feat: 完善form校验

sadais-org · Feb 7, 2021 · ce35016 · ce35016
1 parent 7318026
commit ce35016
Show file tree

Hide file tree

Showing 5 changed files with 92 additions and 17 deletions.
diff --git a/components/pi-form-item/index.vue b/components/pi-form-item/index.vue
@@ -2,16 +2,16 @@
   <view
     class="pi-form-item"
     :style="[customStyle, itemStyle]"
-    :class="[{ border: getBorder }, { 'pi-align-center': !getWrap }, customClass]"
+    :class="[{ border: getBorder }, { 'pi-align-baseline': !getWrap }, customClass]"
     @tap.stop="handleItemClick"
   >
     <!-- 表单标题 -->
     <view
-      class="form-label pi-align-center pi-flex-nowrap"
+      class="form-label pi-align-start pi-flex-nowrap"
       :style="[getLabelStyle, labelStyle]"
       :class="[{ border: getWrap && getLabelWrapBorder }]"
     >
-      <view v-if="required" style="color: red;" class="pi-mg-right-12" :style="[requiredStyle]">
+      <view v-if="required" style="color: ed2235;" class="pi-mg-right-12" :style="[requiredStyle]">
         *
       </view>
       <slot name="label">
@@ -22,11 +22,16 @@
 
     <!-- 内容区域 -->
     <view
-      class="content-wrap pi-align-center"
+      class="content-wrap"
       :class="[{ 'pi-flex-sub': !getWrap }, getInputAlign, { wrap: getWrap, nowrap: !getWrap }]"
       :style="[contentWrapStyle]"
     >
-      <slot />
+      <view class="content-input pi-align-center" :style="[getInputAlignStyle]">
+        <slot />
+      </view>
+      <view v-if="validateMessage" class="form-valid">
+        <view class="form-valid-item">{{ validateMessage }}</view>
+      </view>
     </view>
     <!-- 右侧区域 -->
     <view v-if="$slots && $slots.right" class="pi-pd-left-24">
@@ -70,6 +75,11 @@ export default {
         return formItem.customClass
       }
     },
+    // 绑定字段
+    prop: {
+      type: String,
+      default: ''
+    },
     // 是否必填
     required: {
       type: Boolean,
@@ -161,6 +171,9 @@ export default {
       default: formItem.border
     }
   },
+  data() {
+    return { validateMessage: '' }
+  },
   computed: {
     getBorder() {
       return this.inheritProps.border !== null ? this.inheritProps.border : this.border
@@ -189,7 +202,7 @@ export default {
       }
       const height = this.height || this.inheritProps.height
       if (!this.getWrap && height) {
-        style.height = this.$pi.common.addUnit(height)
+        style.minHeight = this.$pi.common.addUnit(height)
       }
       return style
     },
@@ -204,7 +217,7 @@ export default {
       }
       const height = this.height || this.inheritProps.height
       if (this.getWrap && height) {
-        style.height = this.$pi.common.addUnit(height)
+        style.minHeight = this.$pi.common.addUnit(height)
       }
       style.justifyContent = alignFlexMap[this.getLabelAlign]
       return style
@@ -214,14 +227,14 @@ export default {
       if (this.getWrap) {
         style.padding = this.padding
       }
-      style.justifyContent = alignFlexMap[this.getInputAlign]
       return style
+    },
+    getInputAlignStyle() {
+      return {
+        justifyContent: alignFlexMap[this.getInputAlign]
+      }
     }
   },
-  inject: {
-    piForm: { default: null }
-  },
-  created() {},
   methods: {
     handleItemClick(e) {
       this.$emit('click', e)
@@ -261,6 +274,16 @@ export default {
       margin-top: 24rpx;
       margin-bottom: 24rpx;
     }
+    .form-valid {
+      font-size: 24rpx;
+      color: #ed2235;
+      .form-valid-item {
+        margin-bottom: 8rpx;
+        &:first-child {
+          margin-top: 8rpx;
+        }
+      }
+    }
   }
   // 解决slot宽度没有占满100%的问题
   /deep/ .content-wrap {
@@ -271,29 +294,35 @@ export default {
       width: 100%;
     }
     &.left {
+      .form-valid,
       .pi-input-wrap,
       pi-input {
         text-align: left;
       }
-      .pi-checkbox-group.horizontal {
+      .pi-checkbox-group.horizontal,
+      .pi-radio-group.horizontal {
         justify-content: flex-start;
       }
     }
     &.center {
+      .form-valid,
       .pi-input-wrap,
       pi-input {
         text-align: center;
       }
-      .pi-checkbox-group.horizontal {
+      .pi-checkbox-group.horizontal,
+      .pi-radio-group.horizontal {
         justify-content: center;
       }
     }
     &.right {
+      .form-valid,
       .pi-input-wrap,
       pi-input {
         text-align: right;
       }
-      .pi-checkbox-group.horizontal {
+      .pi-checkbox-group.horizontal,
+      .pi-radio-group.horizontal {
         justify-content: flex-end;
       }
     }

diff --git a/components/pi-form/index.vue b/components/pi-form/index.vue
@@ -12,6 +12,7 @@
 </template>
 
 <script>
+import ValueSync from '../../mixin/value-sync'
 import { parentInit } from '../../mixin/props-sync'
 import { getConfig } from '../../config'
 
@@ -22,6 +23,7 @@ const { form } = getConfig()
 export default {
   name: 'Form',
   mixins: [
+    ValueSync, // 混入v-model
     parentInit([
       'height',
       'border',

diff --git a/components/pi-input/index.vue b/components/pi-input/index.vue
@@ -55,7 +55,6 @@ export default {
   name: TAG,
   // 混入v-model
   mixins: [ValueSync],
-
   props: {
     // 初始值
     value: {

diff --git a/config/formItem.js b/config/formItem.js
@@ -4,7 +4,7 @@ export default {
   required: false, // 是否必填
   requiredStyle: {}, // 必填标志自定义样式，对象形式（默认值：{}）
   height: 100, // 表单项高度
-  padding: '0 32rpx', // padding
+  padding: '32rpx', // padding
   labelWidth: null, // 表单项 label 宽度，默认单位为rpx
   labelAlign: 'left', // 表单项 label 对齐方式，可选值为 left center right
   labelStyle: {}, // 表单项 label样式

diff --git a/mixin/emitter.js b/mixin/emitter.js
@@ -0,0 +1,45 @@
+/**
+ * 广播
+ * @desc 向下广播
+ * @param {String} componentName 组件名
+ * @param {String} eventName 事件名
+ * @param {Object} params 参数
+ */
+function broadcast(componentName, eventName, params) {
+  this.$children.forEach(child => {
+    const name = child.$options.componentName
+    if (name === componentName) {
+      child.$emit.apply(child, [eventName].concat(params))
+    } else {
+      broadcast.apply(child, [componentName, eventName].concat([params]))
+    }
+  })
+}
+
+/**
+ * 发布订阅
+ * 该组件参考 https://github.com/ElemeFE/element/blob/dev/src/mixins/emitter.js
+ * 鸣谢 element团队
+ */
+export default {
+  methods: {
+    dispatch(componentName, eventName, params) {
+      let parent = this.$parent || this.$root
+      let name = parent.$options.componentName
+
+      while (parent && (!name || name !== componentName)) {
+        parent = parent.$parent
+
+        if (parent) {
+          name = parent.$options.componentName
+        }
+      }
+      if (parent) {
+        parent.$emit.apply(parent, [eventName].concat(params))
+      }
+    },
+    broadcast(componentName, eventName, params) {
+      broadcast.call(this, componentName, eventName, params)
+    }
+  }
+}