@10yun/cv-mobile-ui 0.5.20 → 0.5.21

package/uni-ui/lib/uni-forms-item/uni-forms-item.vue

@@ -1 +1,429 @@
-<template>
  <view
    class="uni-forms-item"
    :class="[
      'is-direction-' + localLabelPos,
      border ? 'uni-forms-item--border' : '',
      border && isFirstBorder ? 'is-first-border' : ''
    ]"
  >
    <slot name="label">
      <view
        class="uni-forms-item__label"
        :class="{ 'no-label': !label && !required }"
        :style="{ width: localLabelWidth, justifyContent: localLabelAlign }"
      >
        <text v-if="required" class="is-required">*</text>
        <text>{{ label }}</text>
      </view>
    </slot>
    <!-- #ifndef APP-NVUE -->
    <view class="uni-forms-item__content">
      <slot></slot>
      <view class="uni-forms-item__error" :class="{ 'msg--active': msg }">
        <text>{{ msg }}</text>
      </view>
    </view>
    <!-- #endif -->
    <!-- #ifdef APP-NVUE -->
    <view class="uni-forms-item__nuve-content">
      <view class="uni-forms-item__content">
        <slot></slot>
      </view>
      <view class="uni-forms-item__error" :class="{ 'msg--active': msg }">
        <text class="error-text">{{ msg }}</text>
      </view>
    </view>
    <!-- #endif -->
  </view>
 * uni-fomrs-item 表单子组件
 * @description uni-fomrs-item 表单子组件，提供了基础布局已经校验能力
 * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
 * @property {Boolean} required 是否必填，左边显示红色"*"号
 * @property {String } 	label 				输入框左边的文字提示
 * @property {Number } 	labelWidth 			label的宽度，单位px（默认65）
 * @property {String } 	labelAlign = [left|center|right] label的文字对齐方式（默认left）
 * 	@value left		label 左侧显示
 * 	@value center	label 居中
 * 	@value right	label 右侧对齐
 * @property {String } 	errorMessage 		显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
 * @property {String } 	name 				表单域的属性名，在使用校验规则时必填
 * @property {String } 	leftIcon 			【1.4.0废弃】label左边的图标，限 uni-ui 的图标名称
 * @property {String } 	iconColor 		【1.4.0废弃】左边通过icon配置的图标的颜色（默认#606266）
 * @property {String} validateTrigger = [bind|submit|blur]	【1.4.0废弃】校验触发器方式 默认 submit
 * 	@value bind 	发生变化时触发
 * 	@value submit 提交时触发
 * 	@value blur 	失去焦点触发
 * @property {String } 	labelPosition = [top|left] 【1.4.0废弃】label的文字的位置（默认left）
 * 	@value top	顶部显示 label
 * 	@value left	左侧显示 label
 */
  name: 'uniFormsItem',
  options: {
    virtualHost: true
  },
  provide() {
    return {
      uniFormItem: this
    };
  },
  inject: {
    form: {
      from: 'uniForm',
      default: null
    }
  },
  props: {
    // 表单校验规则
    rules: {
      type: Array,
      default() {
        return null;
      }
    },
    // 表单域的属性名，在使用校验规则时必填
    name: {
      type: [String, Array],
      default: ''
    },
    required: {
      type: Boolean,
      default: false
    },
    label: {
      type: String,
      default: ''
    },
    // label的宽度 ，默认 80
    labelWidth: {
      type: [String, Number],
      default: ''
    },
    // label 居中方式，默认 left 取值 left/center/right
    labelAlign: {
      type: String,
      default: ''
    },
    // 强制显示错误信息
    errorMessage: {
      type: [String, Boolean],
      default: ''
    },
    // 1.4.0 弃用，统一使用 form 的校验时机
    // validateTrigger: {
    // 	type: String,
    // 	default: ''
    // },
    // 1.4.0 弃用，统一使用 form 的label 位置
    // labelPosition: {
    // 	type: String,
    // 	default: ''
    // },
    // 1.4.0 以下属性已经废弃，请使用  #label 插槽代替
    leftIcon: String,
    iconColor: {
      type: String,
      default: '#606266'
    }
  },
  data() {
    return {
      errMsg: '',
      userRules: null,
      localLabelAlign: 'left',
      localLabelWidth: '65px',
      localLabelPos: 'left',
      border: false,
      isFirstBorder: false
    };
  },
  computed: {
    // 处理错误信息
    msg() {
      return this.errorMessage || this.errMsg;
    }
  },
  watch: {
    // 规则发生变化通知子组件更新
    'form.formRules'(val) {
      // TODO 处理头条vue3 watch不生效的问题
      // #ifndef MP-TOUTIAO
      this.init();
      // #endif
    },
    'form.labelWidth'(val) {
      // 宽度
      this.localLabelWidth = this._labelWidthUnit(val);
    },
    'form.labelPosition'(val) {
      // 标签位置
      this.localLabelPos = this._labelPosition();
    },
    'form.labelAlign'(val) {}
  },
  created() {
    this.init(true);
    if (this.name && this.form) {
      // TODO 处理头条vue3 watch不生效的问题
      // #ifdef MP-TOUTIAO
      this.$watch('form.formRules', () => {
        this.init();
      });
      // #endif
      // 监听变化
      this.$watch(
        () => {
          const val = this.form._getDataValue(this.name, this.form.localData);
          return val;
        },
        (value, oldVal) => {
          const isEqual = this.form._isEqual(value, oldVal);
          // 简单判断前后值的变化，只有发生变化才会发生校验
          // TODO  如果 oldVal = undefined ，那么大概率是源数据里没有值导致 ，这个情况不哦校验 ,可能不严谨 ，需要在做观察
          // fix by mehaotian 暂时取消 && oldVal !== undefined ，如果formData 中不存在，可能会不校验
          if (!isEqual) {
            const val = this.itemSetValue(value);
            this.onFieldChange(val, false);
          }
        },
        {
          immediate: false
        }
      );
    }
  },
  // #ifndef VUE3
  destroyed() {
    if (this.__isUnmounted) return;
    this.unInit();
  },
  // #endif
  // #ifdef VUE3
  unmounted() {
    this.__isUnmounted = true;
    this.unInit();
  },
  // #endif
  methods: {
    /**
     * 外部调用方法
     * 设置规则 ，主要用于小程序自定义检验规则
     * @param {Array} rules 规则源数据
     */
    setRules(rules = null) {
      this.userRules = rules;
      this.init(false);
    },
    // 兼容老版本表单组件
    setValue() {
      // console.log('setValue 方法已经弃用，请使用最新版本的 uni-forms 表单组件以及其他关联组件。');
    },
    /**
     * 外部调用方法
     * 校验数据
     * @param {any} value 需要校验的数据
     * @param {boolean} 是否立即校验
     * @return {Array|null} 校验内容
     */
    async onFieldChange(value, formtrigger = true) {
      const { formData, localData, errShowType, validateCheck, validateTrigger, _isRequiredField, _realName } = this.form;
      const name = _realName(this.name);
      if (!value) {
        value = this.form.formData[name];
      }
      // fixd by mehaotian 不在校验前清空信息，解决闪屏的问题
      // this.errMsg = '';
      // fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
      const ruleLen = this.itemRules.rules && this.itemRules.rules.length;
      if (!this.validator || !ruleLen || ruleLen === 0) return;
      // 检验时机
      // let trigger = this.isTrigger(this.itemRules.validateTrigger, this.validateTrigger, validateTrigger);
      const isRequiredField = _isRequiredField(this.itemRules.rules || []);
      let result = null;
      // 只有等于 bind 时 ，才能开启时实校验
      if (validateTrigger === 'bind' || formtrigger) {
        // 校验当前表单项
        result = await this.validator.validateUpdate(
          {
            [name]: value
          },
          formData
        );
        // 判断是否必填,非必填，不填不校验，填写才校验 ,暂时只处理 undefined  和空的情况
        if (!isRequiredField && (value === undefined || value === '')) {
          result = null;
        }
        // 判断错误信息显示类型
        if (result && result.errorMessage) {
          if (errShowType === 'undertext') {
            // 获取错误信息
            this.errMsg = !result ? '' : result.errorMessage;
          }
          if (errShowType === 'toast') {
            uni.showToast({
              title: result.errorMessage || '校验错误',
              icon: 'none'
            });
          }
          if (errShowType === 'modal') {
            uni.showModal({
              title: '提示',
              content: result.errorMessage || '校验错误'
            });
          }
        } else {
          this.errMsg = '';
        }
        // 通知 form 组件更新事件
        validateCheck(result ? result : null);
      } else {
        this.errMsg = '';
      }
      return result ? result : null;
    },
    /**
     * 初始组件数据
     */
    init(type = false) {
      const { validator, formRules, childrens, formData, localData, _realName, labelWidth, _getDataValue, _setDataValue } =
        this.form || {};
      // 对齐方式
      this.localLabelAlign = this._justifyContent();
      // 宽度
      this.localLabelWidth = this._labelWidthUnit(labelWidth);
      // 标签位置
      this.localLabelPos = this._labelPosition();
      // 将需要校验的子组件加入form 队列
      this.form && type && childrens.push(this);
      if (!validator || !formRules) return;
      // 判断第一个 item
      if (!this.form.isFirstBorder) {
        this.form.isFirstBorder = true;
        this.isFirstBorder = true;
      }
      // 判断 group 里的第一个 item
      if (this.group) {
        if (!this.group.isFirstBorder) {
          this.group.isFirstBorder = true;
          this.isFirstBorder = true;
        }
      }
      this.border = this.form.border;
      // 获取子域的真实名称
      const name = _realName(this.name);
      const itemRule = this.userRules || this.rules;
      if (typeof formRules === 'object' && itemRule) {
        // 子规则替换父规则
        formRules[name] = {
          rules: itemRule
        };
        validator.updateSchema(formRules);
      }
      // 注册校验规则
      const itemRules = formRules[name] || {};
      this.itemRules = itemRules;
      // 注册校验函数
      this.validator = validator;
      // 默认值赋予
      this.itemSetValue(_getDataValue(this.name, localData));
    },
    unInit() {
      if (this.form) {
        const { childrens, formData, _realName } = this.form;
        childrens.forEach((item, index) => {
          if (item === this) {
            this.form.childrens.splice(index, 1);
            delete formData[_realName(item.name)];
          }
        });
      }
    },
    // 设置item 的值
    itemSetValue(value) {
      const name = this.form._realName(this.name);
      const rules = this.itemRules.rules || [];
      const val = this.form._getValue(name, value, rules);
      this.form._setDataValue(name, this.form.formData, val);
      return val;
    },
    /**
     * 移除该表单项的校验结果
     */
    clearValidate() {
      this.errMsg = '';
    },
    // 是否显示星号
    _isRequired() {
      // TODO 不根据规则显示 星号，考虑后续兼容
      // if (this.form) {
      // 	if (this.form._isRequiredField(this.itemRules.rules || []) && this.required) {
      // 		return true
      // 	}
      // 	return false
      // }
      return this.required;
    },
    // 处理对齐方式
    _justifyContent() {
      if (this.form) {
        const { labelAlign } = this.form;
        let labelAli = this.labelAlign ? this.labelAlign : labelAlign;
        if (labelAli === 'left') return 'flex-start';
        if (labelAli === 'center') return 'center';
        if (labelAli === 'right') return 'flex-end';
      }
      return 'flex-start';
    },
    // 处理 label宽度单位 ,继承父元素的值
    _labelWidthUnit(labelWidth) {
      // if (this.form) {
      // 	const {
      // 		labelWidth
      // 	} = this.form
      return this.num2px(this.labelWidth ? this.labelWidth : labelWidth || (this.label ? 65 : 'auto'));
      // }
      // return '65px'
    },
    // 处理 label 位置
    _labelPosition() {
      if (this.form) return this.form.labelPosition || 'left';
      return 'left';
    },
    /**
     * 触发时机
     * @param {Object} rule 当前规则内时机
     * @param {Object} itemRlue 当前组件时机
     * @param {Object} parentRule 父组件时机
     */
    isTrigger(rule, itemRlue, parentRule) {
      //  bind  submit
      if (rule === 'submit' || !rule) {
        if (rule === undefined) {
          if (itemRlue !== 'bind') {
            if (!itemRlue) {
              return parentRule === '' ? 'bind' : 'submit';
            }
            return 'submit';
          }
          return 'bind';
        }
        return 'submit';
      }
      return 'bind';
    },
    num2px(num) {
      if (typeof num === 'number') {
        return `${num}px`;
      }
      return num;
    }
  }
+<template>
+  <view
+    class="uni-forms-item"
+    :class="[
+      'is-direction-' + localLabelPos,
+      border ? 'uni-forms-item--border' : '',
+      border && isFirstBorder ? 'is-first-border' : ''
+    ]"
+  >
+    <slot name="label">
+      <view
+        class="uni-forms-item__label"
+        :class="{ 'no-label': !label && !required }"
+        :style="{ width: localLabelWidth, justifyContent: localLabelAlign }"
+      >
+        <text v-if="required" class="is-required">*</text>
+        <text>{{ label }}</text>
+      </view>
+    </slot>
+    <!-- #ifndef APP-NVUE -->
+    <view class="uni-forms-item__content">
+      <slot></slot>
+      <view class="uni-forms-item__error" :class="{ 'msg--active': msg }">
+        <text>{{ msg }}</text>
+      </view>
+    </view>
+    <!-- #endif -->
+    <!-- #ifdef APP-NVUE -->
+    <view class="uni-forms-item__nuve-content">
+      <view class="uni-forms-item__content">
+        <slot></slot>
+      </view>
+      <view class="uni-forms-item__error" :class="{ 'msg--active': msg }">
+        <text class="error-text">{{ msg }}</text>
+      </view>
+    </view>
+    <!-- #endif -->
+  </view>
+</template>
+<script>
+/**
+ * uni-fomrs-item 表单子组件
+ * @description uni-fomrs-item 表单子组件，提供了基础布局已经校验能力
+ * @tutorial https://ext.dcloud.net.cn/plugin?id=2773
+ * @property {Boolean} required 是否必填，左边显示红色"*"号
+ * @property {String } 	label 				输入框左边的文字提示
+ * @property {Number } 	labelWidth 			label的宽度，单位px（默认65）
+ * @property {String } 	labelAlign = [left|center|right] label的文字对齐方式（默认left）
+ * 	@value left		label 左侧显示
+ * 	@value center	label 居中
+ * 	@value right	label 右侧对齐
+ * @property {String } 	errorMessage 		显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
+ * @property {String } 	name 				表单域的属性名，在使用校验规则时必填
+ * @property {String } 	leftIcon 			【1.4.0废弃】label左边的图标，限 uni-ui 的图标名称
+ * @property {String } 	iconColor 		【1.4.0废弃】左边通过icon配置的图标的颜色（默认#606266）
+ * @property {String} validateTrigger = [bind|submit|blur]	【1.4.0废弃】校验触发器方式 默认 submit
+ * 	@value bind 	发生变化时触发
+ * 	@value submit 提交时触发
+ * 	@value blur 	失去焦点触发
+ * @property {String } 	labelPosition = [top|left] 【1.4.0废弃】label的文字的位置（默认left）
+ * 	@value top	顶部显示 label
+ * 	@value left	左侧显示 label
+ */
+export default {
+  name: 'uniFormsItem',
+  options: {
+    virtualHost: true
+  },
+  provide() {
+    return {
+      uniFormItem: this
+    };
+  },
+  inject: {
+    form: {
+      from: 'uniForm',
+      default: null
+    }
+  },
+  props: {
+    // 表单校验规则
+    rules: {
+      type: Array,
+      default() {
+        return null;
+      }
+    },
+    // 表单域的属性名，在使用校验规则时必填
+    name: {
+      type: [String, Array],
+      default: ''
+    },
+    required: {
+      type: Boolean,
+      default: false
+    },
+    label: {
+      type: String,
+      default: ''
+    },
+    // label的宽度 ，默认 80
+    labelWidth: {
+      type: [String, Number],
+      default: ''
+    },
+    // label 居中方式，默认 left 取值 left/center/right
+    labelAlign: {
+      type: String,
+      default: ''
+    },
+    // 强制显示错误信息
+    errorMessage: {
+      type: [String, Boolean],
+      default: ''
+    },
+    // 1.4.0 弃用，统一使用 form 的校验时机
+    // validateTrigger: {
+    // 	type: String,
+    // 	default: ''
+    // },
+    // 1.4.0 弃用，统一使用 form 的label 位置
+    // labelPosition: {
+    // 	type: String,
+    // 	default: ''
+    // },
+    // 1.4.0 以下属性已经废弃，请使用  #label 插槽代替
+    leftIcon: String,
+    iconColor: {
+      type: String,
+      default: '#606266'
+    }
+  },
+  data() {
+    return {
+      errMsg: '',
+      userRules: null,
+      localLabelAlign: 'left',
+      localLabelWidth: '65px',
+      localLabelPos: 'left',
+      border: false,
+      isFirstBorder: false
+    };
+  },
+  computed: {
+    // 处理错误信息
+    msg() {
+      return this.errorMessage || this.errMsg;
+    }
+  },
+  watch: {
+    // 规则发生变化通知子组件更新
+    'form.formRules'(val) {
+      // TODO 处理头条vue3 watch不生效的问题
+      // #ifndef MP-TOUTIAO
+      this.init();
+      // #endif
+    },
+    'form.labelWidth'(val) {
+      // 宽度
+      this.localLabelWidth = this._labelWidthUnit(val);
+    },
+    'form.labelPosition'(val) {
+      // 标签位置
+      this.localLabelPos = this._labelPosition();
+    },
+    'form.labelAlign'(val) {}
+  },
+  created() {
+    this.init(true);
+    if (this.name && this.form) {
+      // TODO 处理头条vue3 watch不生效的问题
+      // #ifdef MP-TOUTIAO
+      this.$watch('form.formRules', () => {
+        this.init();
+      });
+      // #endif
+      // 监听变化
+      this.$watch(
+        () => {
+          const val = this.form._getDataValue(this.name, this.form.localData);
+          return val;
+        },
+        (value, oldVal) => {
+          const isEqual = this.form._isEqual(value, oldVal);
+          // 简单判断前后值的变化，只有发生变化才会发生校验
+          // TODO  如果 oldVal = undefined ，那么大概率是源数据里没有值导致 ，这个情况不哦校验 ,可能不严谨 ，需要在做观察
+          // fix by mehaotian 暂时取消 && oldVal !== undefined ，如果formData 中不存在，可能会不校验
+          if (!isEqual) {
+            const val = this.itemSetValue(value);
+            this.onFieldChange(val, false);
+          }
+        },
+        {
+          immediate: false
+        }
+      );
+    }
+  },
+  // #ifndef VUE3
+  destroyed() {
+    if (this.__isUnmounted) return;
+    this.unInit();
+  },
+  // #endif
+  // #ifdef VUE3
+  unmounted() {
+    this.__isUnmounted = true;
+    this.unInit();
+  },
+  // #endif
+  methods: {
+    /**
+     * 外部调用方法
+     * 设置规则 ，主要用于小程序自定义检验规则
+     * @param {Array} rules 规则源数据
+     */
+    setRules(rules = null) {
+      this.userRules = rules;
+      this.init(false);
+    },
+    // 兼容老版本表单组件
+    setValue() {
+      // console.log('setValue 方法已经弃用，请使用最新版本的 uni-forms 表单组件以及其他关联组件。');
+    },
+    /**
+     * 外部调用方法
+     * 校验数据
+     * @param {any} value 需要校验的数据
+     * @param {boolean} 是否立即校验
+     * @return {Array|null} 校验内容
+     */
+    async onFieldChange(value, formtrigger = true) {
+      const { formData, localData, errShowType, validateCheck, validateTrigger, _isRequiredField, _realName } = this.form;
+      const name = _realName(this.name);
+      if (!value) {
+        value = this.form.formData[name];
+      }
+      // fixd by mehaotian 不在校验前清空信息，解决闪屏的问题
+      // this.errMsg = '';
+      // fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
+      const ruleLen = this.itemRules.rules && this.itemRules.rules.length;
+      if (!this.validator || !ruleLen || ruleLen === 0) return;
+      // 检验时机
+      // let trigger = this.isTrigger(this.itemRules.validateTrigger, this.validateTrigger, validateTrigger);
+      const isRequiredField = _isRequiredField(this.itemRules.rules || []);
+      let result = null;
+      // 只有等于 bind 时 ，才能开启时实校验
+      if (validateTrigger === 'bind' || formtrigger) {
+        // 校验当前表单项
+        result = await this.validator.validateUpdate(
+          {
+            [name]: value
+          },
+          formData
+        );
+        // 判断是否必填,非必填，不填不校验，填写才校验 ,暂时只处理 undefined  和空的情况
+        if (!isRequiredField && (value === undefined || value === '')) {
+          result = null;
+        }
+        // 判断错误信息显示类型
+        if (result && result.errorMessage) {
+          if (errShowType === 'undertext') {
+            // 获取错误信息
+            this.errMsg = !result ? '' : result.errorMessage;
+          }
+          if (errShowType === 'toast') {
+            uni.showToast({
+              title: result.errorMessage || '校验错误',
+              icon: 'none'
+            });
+          }
+          if (errShowType === 'modal') {
+            uni.showModal({
+              title: '提示',
+              content: result.errorMessage || '校验错误'
+            });
+          }
+        } else {
+          this.errMsg = '';
+        }
+        // 通知 form 组件更新事件
+        validateCheck(result ? result : null);
+      } else {
+        this.errMsg = '';
+      }
+      return result ? result : null;
+    },
+    /**
+     * 初始组件数据
+     */
+    init(type = false) {
+      const { validator, formRules, childrens, formData, localData, _realName, labelWidth, _getDataValue, _setDataValue } =
+        this.form || {};
+      // 对齐方式
+      this.localLabelAlign = this._justifyContent();
+      // 宽度
+      this.localLabelWidth = this._labelWidthUnit(labelWidth);
+      // 标签位置
+      this.localLabelPos = this._labelPosition();
+      // 将需要校验的子组件加入form 队列
+      this.form && type && childrens.push(this);
+      if (!validator || !formRules) return;
+      // 判断第一个 item
+      if (!this.form.isFirstBorder) {
+        this.form.isFirstBorder = true;
+        this.isFirstBorder = true;
+      }
+      // 判断 group 里的第一个 item
+      if (this.group) {
+        if (!this.group.isFirstBorder) {
+          this.group.isFirstBorder = true;
+          this.isFirstBorder = true;
+        }
+      }
+      this.border = this.form.border;
+      // 获取子域的真实名称
+      const name = _realName(this.name);
+      const itemRule = this.userRules || this.rules;
+      if (typeof formRules === 'object' && itemRule) {
+        // 子规则替换父规则
+        formRules[name] = {
+          rules: itemRule
+        };
+        validator.updateSchema(formRules);
+      }
+      // 注册校验规则
+      const itemRules = formRules[name] || {};
+      this.itemRules = itemRules;
+      // 注册校验函数
+      this.validator = validator;
+      // 默认值赋予
+      this.itemSetValue(_getDataValue(this.name, localData));
+    },
+    unInit() {
+      if (this.form) {
+        const { childrens, formData, _realName } = this.form;
+        childrens.forEach((item, index) => {
+          if (item === this) {
+            this.form.childrens.splice(index, 1);
+            delete formData[_realName(item.name)];
+          }
+        });
+      }
+    },
+    // 设置item 的值
+    itemSetValue(value) {
+      const name = this.form._realName(this.name);
+      const rules = this.itemRules.rules || [];
+      const val = this.form._getValue(name, value, rules);
+      this.form._setDataValue(name, this.form.formData, val);
+      return val;
+    },
+    /**
+     * 移除该表单项的校验结果
+     */
+    clearValidate() {
+      this.errMsg = '';
+    },
+    // 是否显示星号
+    _isRequired() {
+      // TODO 不根据规则显示 星号，考虑后续兼容
+      // if (this.form) {
+      // 	if (this.form._isRequiredField(this.itemRules.rules || []) && this.required) {
+      // 		return true
+      // 	}
+      // 	return false
+      // }
+      return this.required;
+    },
+    // 处理对齐方式
+    _justifyContent() {
+      if (this.form) {
+        const { labelAlign } = this.form;
+        let labelAli = this.labelAlign ? this.labelAlign : labelAlign;
+        if (labelAli === 'left') return 'flex-start';
+        if (labelAli === 'center') return 'center';
+        if (labelAli === 'right') return 'flex-end';
+      }
+      return 'flex-start';
+    },
+    // 处理 label宽度单位 ,继承父元素的值
+    _labelWidthUnit(labelWidth) {
+      // if (this.form) {
+      // 	const {
+      // 		labelWidth
+      // 	} = this.form
+      return this.num2px(this.labelWidth ? this.labelWidth : labelWidth || (this.label ? 65 : 'auto'));
+      // }
+      // return '65px'
+    },
+    // 处理 label 位置
+    _labelPosition() {
+      if (this.form) return this.form.labelPosition || 'left';
+      return 'left';
+    },
+    /**
+     * 触发时机
+     * @param {Object} rule 当前规则内时机
+     * @param {Object} itemRlue 当前组件时机
+     * @param {Object} parentRule 父组件时机
+     */
+    isTrigger(rule, itemRlue, parentRule) {
+      //  bind  submit
+      if (rule === 'submit' || !rule) {
+        if (rule === undefined) {
+          if (itemRlue !== 'bind') {
+            if (!itemRlue) {
+              return parentRule === '' ? 'bind' : 'submit';
+            }
+            return 'submit';
+          }
+          return 'bind';
+        }
+        return 'submit';
+      }
+      return 'bind';
+    },
+    num2px(num) {
+      if (typeof num === 'number') {
+        return `${num}px`;
+      }
+      return num;
+    }
+  }
+};
+</script>
+<style>
+@import 'style.css';
+</style>