pco/app/uni_modules/uni-forms/components/uni-forms-item/uni-forms-item.vue

<template>
  <view class="uni-forms-item"
        :class="{ 'uni-forms-item--border': border, 'is-first-border': border && isFirstBorder, 'uni-forms-item-error': msg }">
    <view class="uni-forms-item__box">
      <view class="uni-forms-item__inner" :class="['is-direction-' + labelPos]">
        <view class="uni-forms-item__label" :style="{ width: labelWid , justifyContent: justifyContent }">
          <slot name="label">
            <text v-if="required" class="is-required">*</text>
            <uni-icons v-if="leftIcon" class="label-icon" size="16" :type="leftIcon" :color="iconColor"/>
            <text class="label-text">{{ label }}</text>

            <view v-if="label" class="label-seat"></view>
          </slot>
        </view>
        <view class="uni-forms-item__content" :class="{ 'is-input-error-border': msg }">
          <slot></slot>
        </view>
      </view>
      <view
          v-if="msg"
          class="uni-error-message"
          :class="{ 'uni-error-msg--boeder': border }"
          :style="{
					paddingLeft: labelLeft
				}"
      >
        <text class="uni-error-message-text">{{ showMsg === 'undertext' ? msg : '' }}</text>
      </view>
    </view>
  </view>
</template>

<script>
/**
 * Field 输入框
 * @description 此组件可以实现表单的输入与校验，包括 "text" 和 "textarea" 类型。
 * @tutorial https://ext.dcloud.net.cn/plugin?id=21001
 * @property {Boolean}  required      是否必填，左边显示红色"*"号（默认false）
 * @property {String} validateTrigger = [bind|submit]  校验触发器方式 默认 submit 可选
 *  @value bind  发生变化时触发
 *  @value submit  提交时触发
 * @property {String }  leftIcon      label左边的图标，限 uni-ui 的图标名称
 * @property {String }  iconColor      左边通过icon配置的图标的颜色（默认#606266）
 * @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 }  labelPosition = [top|left] label的文字的位置（默认left）
 *  @value top  顶部显示 label
 *  @value left  左侧显示 label
 * @property {String }  errorMessage    显示的错误提示内容，如果为空字符串或者false，则不显示错误信息
 * @property {String }  name        表单域的属性名，在使用校验规则时必填
 */

export default {
  name: 'uniFormsItem',
  props: {
    // 自定义内容
    custom: {
      type: Boolean,
      default: false
    },
    // 是否显示报错信息
    showMessage: {
      type: Boolean,
      default: true
    },
    name: String,
    required: Boolean,
    validateTrigger: {
      type: String,
      default: ''
    },
    leftIcon: String,
    iconColor: {
      type: String,
      default: '#606266'
    },
    label: String,
    // 左边标题的宽度单位px
    labelWidth: {
      type: [Number, String],
      default: ''
    },
    // 对齐方式，left|center|right
    labelAlign: {
      type: String,
      default: ''
    },
    // lable的位置，可选为 left-左边，top-上边
    labelPosition: {
      type: String,
      default: ''
    },
    errorMessage: {
      type: [String, Boolean],
      default: ''
    },
    // 表单校验规则
    rules: {
      type: Array,
      default() {
        return [];
      }
    }
  },
  data() {
    return {
      errorTop: false,
      errorBottom: false,
      labelMarginBottom: '',
      errorWidth: '',
      errMsg: '',
      val: '',
      labelPos: '',
      labelWid: '',
      labelAli: '',
      showMsg: 'undertext',
      border: false,
      isFirstBorder: false,
      isArray: false,
      arrayField: ''
    };
  },
  computed: {
    msg() {
      return this.errorMessage || this.errMsg;
    },
    fieldStyle() {
      let style = {};
      if (this.labelPos == 'top') {
        style.padding = '0 0';
        this.labelMarginBottom = '6px';
      }
      if (this.labelPos == 'left' && this.msg !== false && this.msg != '') {
        style.paddingBottom = '0px';
        this.errorBottom = true;
        this.errorTop = false;
      } else if (this.labelPos == 'top' && this.msg !== false && this.msg != '') {
        this.errorBottom = false;
        this.errorTop = true;
      } else {
        // style.paddingBottom = ''
        this.errorTop = false;
        this.errorBottom = false;
      }
      return style;
    },

    // uni不支持在computed中写style.justifyContent = 'center'的形式，故用此方法
    justifyContent() {
      if (this.labelAli === 'left') return 'flex-start';
      if (this.labelAli === 'center') return 'center';
      if (this.labelAli === 'right') return 'flex-end';
    },
    labelLeft() {
      return (this.labelPos === 'left' ? parseInt(this.labelWid) : 0) + 'px'
    }
  },
  watch: {
    validateTrigger(trigger) {
      this.formTrigger = trigger;
    }
  },
  created() {
    this.form = this.getForm();
    this.group = this.getForm('uniGroup');
    this.formRules = [];
    this.formTrigger = this.validateTrigger;
    // 处理 name，是否数组
    if (this.name && this.name.indexOf('[') !== -1 && this.name.indexOf(']') !== -1) {
      this.isArray = true;
      this.arrayField = this.name
      // fix by mehaotian 修改不修改的情况，动态值不检验的问题
      this.form.formData[this.name] = this.form._getValue(this.name, '')
    }
  },
  mounted() {
    if (this.form) {
      this.form.childrens.push(this);
    }
    this.init();
  },
  // #ifndef VUE3
  destroyed() {
    if (this.__isUnmounted) return
    this.unInit()
  },
  // #endif
  // #ifdef VUE3
  unmounted() {
    this.__isUnmounted = true
    this.unInit()
  },
  // #endif
  methods: {
    init() {
      if (this.form) {
        let {formRules, validator, formData, value, labelPosition, labelWidth, labelAlign, errShowType} = this.form;
        this.labelPos = this.labelPosition ? this.labelPosition : labelPosition;

        if (this.label) {
          this.labelWid = (this.labelWidth ? this.labelWidth : (labelWidth || 70))
        } else {
          this.labelWid = (this.labelWidth ? this.labelWidth : (labelWidth || 'auto'))
        }
        if (this.labelWid && this.labelWid !== 'auto') {
          this.labelWid += 'px'
        }
        this.labelAli = this.labelAlign ? this.labelAlign : labelAlign;

        // 判断第一个 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;
        this.showMsg = errShowType;
        let name = this.isArray ? this.arrayField : this.name;
        if (!name) return
        if (formRules && this.rules.length > 0) {
          if (!formRules[name]) {
            formRules[name] = {
              rules: this.rules
            }
          }
          validator.updateSchema(formRules);
        }
        this.formRules = formRules[name] || {};
        this.validator = validator;
      } else {
        this.labelPos = this.labelPosition || 'left';
        this.labelWid = this.labelWidth || 65;
        this.labelAli = this.labelAlign || 'left';
      }
    },
    unInit() {
      if (this.form) {
        this.form.childrens.forEach((item, index) => {
          if (item === this) {
            this.form.childrens.splice(index, 1)
            delete this.form.formData[item.name]
          }
        })
      }
    },
    /**
     * 获取父元素实例
     */
    getForm(name = 'uniForms') {
      let parent = this.$parent;
      let parentName = parent.$options.name;
      while (parentName !== name) {
        parent = parent.$parent;
        if (!parent) return false;
        parentName = parent.$options.name;
      }
      return parent;
    },

    /**
     * 移除该表单项的校验结果
     */
    clearValidate() {
      this.errMsg = '';
    },
    /**
     * 子组件调用，如 easyinput
     * @param {Object} value
     */
    setValue(value) {
      let name = this.isArray ? this.arrayField : this.name;
      if (name) {
        if (this.errMsg) this.errMsg = '';
        // 给组件赋值
        this.form.formData[name] = this.form._getValue(name, value);
        if (!this.formRules || (typeof this.formRules && JSON.stringify(this.formRules) === '{}')) return;
        this.triggerCheck(this.form._getValue(this.name, value));
      }
    },

    /**
     * 校验规则
     * @param {Object} value
     */
    async triggerCheck(value, formTrigger) {
      let promise = null;
      this.errMsg = '';
      // fix by mehaotian 解决没有检验规则的情况下，抛出错误的问题
      if (!this.validator || Object.keys(this.formRules).length === 0) return;
      const isNoField = this.isRequired(this.formRules.rules || []);
      let isTrigger = this.isTrigger(this.formRules.validateTrigger, this.validateTrigger, this.form.validateTrigger);
      let result = null;
      if (!!isTrigger || formTrigger) {
        let name = this.isArray ? this.arrayField : this.name;
        result = await this.validator.validateUpdate(
            {
              [name]: value
            },
            this.form.formData
        );
      }
      // 判断是否必填,非必填，不填不校验，填写才校验
      if (!isNoField && (value === undefined || value === '')) {
        result = null;
      }
      const inputComp = this.form.inputChildrens.find(child => child.rename === this.name);
      if ((isTrigger || formTrigger) && result && result.errorMessage) {
        if (inputComp) {
          inputComp.errMsg = result.errorMessage;
        }
        if (this.form.errShowType === 'toast') {
          uni.showToast({
            title: result.errorMessage || '校验错误',
            icon: 'none'
          });
        }
        if (this.form.errShowType === 'modal') {
          uni.showModal({
            title: '提示',
            content: result.errorMessage || '校验错误'
          });
        }
      } else {
        if (inputComp) {
          inputComp.errMsg = '';
        }
      }

      this.errMsg = !result ? '' : result.errorMessage;
      // 触发validate事件
      this.form.validateCheck(result ? result : null);
      // typeof callback === 'function' && callback(result ? result : null);
      // if (promise) return promise
      return result ? result : null;
    },
    /**
     * 触发时机
     * @param {Object} event
     */
    isTrigger(rule, itemRlue, parentRule) {
      let rl = true;
      //  bind  submit
      if (rule === 'submit' || !rule) {
        if (rule === undefined) {
          if (itemRlue !== 'bind') {
            if (!itemRlue) {
              return parentRule === 'bind' ? true : false;
            }
            return false;
          }
          return true;
        }
        return false;
      }
      return true;
    },
    // 是否有必填字段
    isRequired(rules) {
      let isNoField = false;
      for (let i = 0; i < rules.length; i++) {
        const ruleData = rules[i];
        if (ruleData.required) {
          isNoField = true;
          break;
        }
      }
      return isNoField;
    }
  }
};
</script>

<style lang="scss">
.uni-forms-item {
  position: relative;
  padding: 0px;
  text-align: left;
  color: #333;
  font-size: 14px;
  // margin-bottom: 22px;
}

.uni-forms-item__box {
  position: relative;
}

.uni-forms-item__inner {
  /* #ifndef APP-NVUE */
  display: flex;
  /* #endif */
  // flex-direction: row;
  // align-items: center;
  padding-bottom: 22px;
  // margin-bottom: 22px;
}

.is-direction-left {
  flex-direction: row;
}

.is-direction-top {
  flex-direction: column;
}

.uni-forms-item__label {
  /* #ifndef APP-NVUE */
  display: flex;
  flex-shrink: 0;
  box-sizing: border-box;
  /* #endif */
  flex-direction: row;
  align-items: center;
  width: 65px;
  // line-height: 2;
  // margin-top: 3px;
  padding: 5px 0;
  height: 36px;
  // margin-right: 5px;

  .label-text {
    font-size: 13px;
    color: #666666;
  }

  .label-seat {
    margin-right: 5px;
  }
}

.uni-forms-item__content {
  /* #ifndef APP-NVUE */
  width: 100%;
  box-sizing: border-box;
  min-height: 36px;
  /* #endif */
  flex: 1;
}

.label-icon {
  margin-right: 5px;
  margin-top: -1px;
}

// 必填
.is-required {
  // color: $uni-color-error;
  color: #dd524d;
  font-weight: bold;
}

.uni-error-message {
  position: absolute;
  bottom: 0px;
  left: 0;
  text-align: left;
}

.uni-error-message-text {
  line-height: 22px;
  color: #dd524d;
  font-size: 12px;
}

.uni-error-msg--boeder {
  position: relative;
  bottom: 0;
  line-height: 22px;
}

.is-input-error-border {
  border-color: #dd524d;
}

.uni-forms-item--border {
  margin-bottom: 0;
  padding: 10px 0;
  // padding-bottom: 0;
  border-top: 1px #eee solid;

  .uni-forms-item__inner {
    padding: 0;
  }
}

.uni-forms-item-error {
  // padding-bottom: 0;
}

.is-first-border {
  /* #ifndef APP-NVUE */
  border: none;
  /* #endif */
  /* #ifdef APP-NVUE */
  border-width: 0;
  /* #endif */
}

.uni-forms--no-padding {
  padding: 0;
}
</style>