feat: 适配表单相关组件

sadais-org · Feb 3, 2021 · 4db5103 · 4db5103
1 parent 8376f12
commit 4db5103
Show file tree

Hide file tree

Showing 15 changed files with 87 additions and 48 deletions.
diff --git a/components/pi-checkbox-group/index.vue b/components/pi-checkbox-group/index.vue
@@ -36,6 +36,9 @@ export default {
       'activeMode'
     ])
   ], // 注入value与val，进行双向绑定
+  options: {
+    styleIsolation: 'shared'
+  },
   props: {
     // 初始值
     value: {
@@ -151,6 +154,10 @@ export default {
     /deep/ .pi-check-wrap:not(:last-child) {
       margin-right: 32rpx;
     }
+    // 兼容小程序
+    /deep/ pi-checkbox:not(:last-child) {
+      margin-right: 32rpx;
+    }
   }
   &.vertical {
     flex-direction: column;

diff --git a/components/pi-checkbox/index.vue b/components/pi-checkbox/index.vue
@@ -27,6 +27,9 @@ export default {
   name: 'Checkbox',
   // 混入自定义样式customStyle和customClass
   mixins: [ValueSync, extendCheckboxGroup], // 注入value与val，进行双向绑定
+  options: {
+    styleIsolation: 'shared'
+  },
   props: {
     // 初始值
     value: {
@@ -235,6 +238,9 @@ $disable-color: #c8c9cc;
         border-color: $pi-primary-color;
       }
     }
+    /deep/ pi-icon {
+      display: inline-flex;
+    }
   }
   .checkbox-label {
     margin-left: 10rpx;

diff --git a/components/pi-form-item/index.vue b/components/pi-form-item/index.vue
@@ -6,11 +6,14 @@
     @tap.stop="handleItemClick"
   >
     <!-- 左侧区域 -->
-    <view class="form-label" :style="[getLabelStyle, labelStyle]">
+    <view class="form-label pi-align-center pi-flex-nowrap" :style="[getLabelStyle, labelStyle]">
+      <view v-if="required" style="color: red;" class=" pi-mg-right-12" :style="[requiredStyle]">
+        *
+      </view>
       <slot name="label">
         {{ label }}
       </slot>
-      <text v-if="getColon" class="pi-pd-left-8">:</text>
+      <view v-if="getColon" class="pi-pd-left-8">:</view>
     </view>
 
     <!-- 中间区域 -->
@@ -22,7 +25,7 @@
       <slot />
     </view>
     <!-- 右侧区域 -->
-    <view v-if="$slots.right" class="pi-pd-left-24">
+    <view v-if="$slots && $slots.right" class="pi-pd-left-24">
       <slot name="right" />
     </view>
   </view>
@@ -45,6 +48,9 @@ const alignFlexMap = {
 export default {
   name: 'FormItem',
   mixins: [extendPiFrom], // 注入inheritProps
+  options: {
+    styleIsolation: 'shared'
+  },
   props: {
     // 自定义样式，对象形式（默认值：{}）
     customStyle: {
@@ -60,6 +66,20 @@ export default {
         return formItem.customClass
       }
     },
+    // 是否必填
+    required: {
+      type: Boolean,
+      default() {
+        return formItem.required
+      }
+    },
+    // 必填标志自定义样式，对象形式（默认值：{}）
+    requiredStyle: {
+      type: Object,
+      default() {
+        return formItem.requiredStyle
+      }
+    },
     // 高度
     height: {
       type: [String, Number],
@@ -129,20 +149,16 @@ export default {
   },
   computed: {
     getBorder() {
-      return this.inheritProps.border !== undefined ? this.inheritProps.border : this.border
+      return this.inheritProps.border !== null ? this.inheritProps.border : this.border
     },
     getColon() {
-      return this.inheritProps.colon !== undefined ? this.inheritProps.colon : this.colon
+      return this.inheritProps.colon !== null ? this.inheritProps.colon : this.colon
     },
     getLabelAlign() {
-      return this.inheritProps.labelAlign !== undefined
-        ? this.inheritProps.labelAlign
-        : this.labelAlign
+      return this.inheritProps.labelAlign !== null ? this.inheritProps.labelAlign : this.labelAlign
     },
     getInputAlign() {
-      return this.inheritProps.inputAlign !== undefined
-        ? this.inheritProps.inputAlign
-        : this.inputAlign
+      return this.inheritProps.inputAlign !== null ? this.inheritProps.inputAlign : this.inputAlign
     },
     itemStyle() {
       const style = {
@@ -170,7 +186,7 @@ export default {
     }
   },
   inject: {
-    piForm: { default: undefined }
+    piForm: { default: null }
   },
   created() {},
   methods: {
@@ -197,27 +213,38 @@ export default {
   .form-label {
     font-weight: $pi-form-label-weight;
     color: $pi-form-label-color;
-    white-space: nowrap;
   }
   .input-wrap {
     padding-left: 24rpx;
-    /deep/ .pi-input-wrap {
+  }
+  // 解决slot宽度没有占满100%的问题
+  /deep/ .input-wrap {
+    & > pi-input {
       width: 100%;
     }
     &.left {
-      /deep/ .pi-input-wrap {
+      .pi-input-wrap {
         text-align: left;
       }
+      .pi-checkbox-group.horizontal {
+        justify-content: flex-start;
+      }
     }
     &.center {
-      /deep/ .pi-input-wrap {
+      .pi-input-wrap {
         text-align: center;
       }
+      .pi-checkbox-group.horizontal {
+        justify-content: center;
+      }
     }
     &.right {
-      /deep/ .pi-input-wrap {
+      .pi-input-wrap {
         text-align: right;
       }
+      .pi-checkbox-group.horizontal {
+        justify-content: flex-end;
+      }
     }
   }
 }

diff --git a/components/pi-form/index.vue b/components/pi-form/index.vue
@@ -86,12 +86,12 @@ export default {
     },
     // 表单label区域 label 对齐方式，可选值为 left center right
     labelAlign: {
-      type: String,
+      type: [Object, String],
       default() {
         return form.labelAlign
       },
       validator: function(value) {
-        return ['left', 'center', 'right'].includes(value)
+        return [null, 'left', 'center', 'right'].includes(value)
       }
     },
     // 表单项 label样式
@@ -103,12 +103,12 @@ export default {
     },
     // 表单输入区域 label 对齐方式，可选值为 left center right
     inputAlign: {
-      type: String,
+      type: [Object, String],
       default() {
         return form.inputAlign
       },
       validator: function(value) {
-        return ['left', 'center', 'right'].includes(value)
+        return [null, 'left', 'center', 'right'].includes(value)
       }
     },
     // 是否在 label 后面添加冒号

diff --git a/components/pi-grid-item/index.vue b/components/pi-grid-item/index.vue
@@ -111,10 +111,10 @@ export default {
       return `calc((100% - ${this.getRowGapWidth}) / ${this.getCol})`
     },
     getSquare() {
-      return this.inheritProps.square !== undefined ? this.inheritProps.square : this.square
+      return this.inheritProps.square !== null ? this.inheritProps.square : this.square
     },
     getBorder() {
-      return this.inheritProps.border !== undefined ? this.inheritProps.border : this.border
+      return this.inheritProps.border !== null ? this.inheritProps.border : this.border
     },
     itemStyle() {
       const gap = this.$pi.common.addUnit(this.getGap)
@@ -147,7 +147,7 @@ export default {
   },
   methods: {
     valid() {
-      if (this.getGap && this.index === undefined) {
+      if (this.getGap && this.index === null) {
         console.warn(TAG, '当设置gap的时候，请把当前迭代器的索引传递到index属性，否则宽度计算有误')
       }
     },

diff --git a/components/pi-icon/index.vue b/components/pi-icon/index.vue
@@ -112,7 +112,7 @@ export default {
 <style lang="scss" scoped>
 .icon-wrap {
   position: relative;
-  display: inline-block;
+  display: inline-flex;
   .icon-badge {
     position: absolute;
     top: 0;

diff --git a/components/pi-input/index.vue b/components/pi-input/index.vue
@@ -23,6 +23,8 @@
     /> -->
     <input
       class="pi-input"
+      :style="[customStyle]"
+      :class="[customClass]"
       :type="type == 'password' ? 'text' : type"
       :value="val"
       :password="password"
@@ -105,7 +107,7 @@ export default {
     },
     placeholderStyle: {
       type: String,
-      default: 'color: #c0c4cc;'
+      default: 'color: #c0c4cc; font-weight: 400;'
     },
     confirmType: {
       type: String,

diff --git a/components/pi-list-item/index.vue b/components/pi-list-item/index.vue
@@ -213,7 +213,7 @@ export default {
   },
   computed: {
     getBorder() {
-      return this.inheritProps.border !== undefined ? this.inheritProps.border : this.border
+      return this.inheritProps.border !== null ? this.inheritProps.border : this.border
     },
     getHeight() {
       const height = this.inheritProps.height || this.height

diff --git a/components/pi-section/index.vue b/components/pi-section/index.vue
@@ -13,14 +13,11 @@
     <!-- 中间区域 -->
     <view class="pi-flex-sub pi-align-baseline">
       <!-- 标题和描述 -->
-      <view
-        v-if="$slots.default || $slots.$default || title"
-        :style="[titleStyle]"
-        class="list-item-title"
-      >
-        <slot>{{ title }}</slot>
+      <view :style="[titleStyle]" class="list-item-title">
+        <slot v-if="$slots && ($slots.default || $slots.$default)" />
+        <template v-else-if="title">{{ title }}</template>
       </view>
-      <view v-if="$slots.desc || desc" :style="[descStyle]" class="list-item-desc">
+      <view v-if="($slots && $slots.desc) || desc" :style="[descStyle]" class="list-item-desc">
         <slot name="desc">{{ desc }}</slot>
       </view>
     </view>

diff --git a/config/form.js b/config/form.js
@@ -4,12 +4,12 @@ export default {
   title: '', // 表单面板标题
   desc: '', // 表单描述
   titleStyle: {}, // 表单自定义样式，对象形式（默认值：{}）
-  height: undefined, // 高度
+  height: null, // 高度
   labelWidth: 120, // 表单项 label 宽度，默认单位为rpx
-  labelAlign: undefined, // 表单项 label 对齐方式，可选值为 left center right
+  labelAlign: null, // 表单项 label 对齐方式，可选值为 left center right
   labelStyle: {}, // 表单项 label样式
-  inputAlign: undefined, // 表单输入区域 label 对齐方式，可选值为 left center right
-  colon: true, // 是否在 label 后面添加冒号
+  inputAlign: null, // 表单输入区域 label 对齐方式，可选值为 left center right
+  colon: false, // 是否在 label 后面添加冒号
   disabled: false, // 是否禁用
   border: false // 是否显示边框
 }
diff --git a/config/formItem.js b/config/formItem.js
@@ -1,13 +1,15 @@
 export default {
   customClass: '', // 自定义样式类，字符串形式（''）
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
-  height: undefined, // 表格高度
-  padding: '24rpx 32rpx', // padding
-  labelWidth: undefined, // 表单项 label 宽度，默认单位为rpx
+  required: false, // 是否必填
+  requiredStyle: {}, // 必填标志自定义样式，对象形式（默认值：{}）
+  height: null, // 表格高度
+  padding: '0 32rpx', // padding
+  labelWidth: null, // 表单项 label 宽度，默认单位为rpx
   labelAlign: 'left', // 表单项 label 对齐方式，可选值为 left center right
   labelStyle: {}, // 表单项 label样式
   inputAlign: 'right', // 表单输入区域 label 对齐方式，可选值为 left center right
-  colon: true, // 是否在 label 后面添加冒号
+  colon: false, // 是否在 label 后面添加冒号
   disabled: false, // 是否禁用
   border: false // 是否显示边框
 }
diff --git a/config/input.js b/config/input.js
@@ -1,6 +1,6 @@
 export default {
   customClass: '', // 自定义样式类，字符串形式（''）
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
-  input: 'text', // 输入框类型，默认为text
+  type: 'text', // 输入框类型，默认为text
   placeholder: '请输入'
 }
diff --git a/config/list.js b/config/list.js
@@ -1,11 +1,11 @@
 export default {
   customClass: '', // 自定义样式类，字符串形式（''）
   customStyle: {}, // 自定义样式，对象形式（默认值：{}）
-  height: undefined, // 列表项高度
+  height: null, // 列表项高度
   title: '', // 列表面板标题
   desc: '', // 列表描述
   titleStyle: {}, // 标题自定义样式，对象形式（默认值：{}）
   disabled: false, // 是否禁用
   border: true, // 是否显示边框
-  hoverClass: undefined // 宫格按压时的样式类，"none"为无效果
+  hoverClass: null // 宫格按压时的样式类，"none"为无效果
 }
diff --git a/mixin/props-sync.js b/mixin/props-sync.js
@@ -47,7 +47,7 @@ export function childInit(parentName) {
     },
     created() {
       this._parent = this.$pi.parent(this, parentName)
-      if (this._parent) {
+      if (this._parent && this._parent.getInheritProps) {
         this.inheritProps = this._parent.getInheritProps()
       }
     },

diff --git a/scss/icon/icon.scss b/scss/icon/icon.scss
@@ -11,9 +11,7 @@
   align-items: center;
   justify-content: center;
   font-family: 'pi-icon' !important;
-  font-size: 16px;
   font-style: normal;
-  color: inherit;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
 }