AyaoJies-boot/AyaoJies-app/house-master/house-life/uview-ui/components/u-form/u-form.vue

<template>
  <view class="u-form">
    <slot/>
  </view>
</template>

<script>
/**
 * form 表单
 * @description 此组件一般用于表单场景，可以配置Input输入框，Select弹出框，进行表单验证等。
 * @tutorial http://uviewui.com/components/form.html
 * @property {Object} model 表单数据对象
 * @property {Boolean} border-bottom 是否显示表单域的下划线边框
 * @property {String} label-position 表单域提示文字的位置，left-左侧，top-上方
 * @property {String Number} label-width 提示文字的宽度，单位rpx（默认90）
 * @property {Object} label-style lable的样式，对象形式
 * @property {String} label-align lable的对齐方式
 * @property {Object} rules 通过ref设置，见官网说明
 * @property {Array} error-type 错误的提示方式，数组形式，见上方说明(默认['message'])
 * @example <u-form :model="form" ref="uForm"></u-form>
 */

export default {
  name: 'u-form',
  props: {
    // 当前form的需要验证字段的集合
    model: {
      type: Object,
      default() {
        return {};
      }
    },
    // 验证规则
    // rules: {
    // 	type: [Object, Function, Array],
    // 	default() {
    // 		return {};
    // 	}
    // },
    // 有错误时的提示方式，message-提示信息，border-如果input设置了边框，变成呈红色，
    // border-bottom-下边框呈现红色，none-无提示
    errorType: {
      type: Array,
      default() {
        return ['message', 'toast']
      }
    },
    // 是否显示表单域的下划线边框
    borderBottom: {
      type: Boolean,
      default: true
    },
    // label的位置，left-左边，top-上边
    labelPosition: {
      type: String,
      default: 'left'
    },
    // label的宽度，单位rpx
    labelWidth: {
      type: [String, Number],
      default: 90
    },
    // lable字体的对齐方式
    labelAlign: {
      type: String,
      default: 'left'
    },
    // lable的样式，对象形式
    labelStyle: {
      type: Object,
      default() {
        return {}
      }
    },
  },
  provide() {
    return {
      uForm: this
    };
  },
  data() {
    return {
      rules: {}
    };
  },
  created() {
    // 存储当前form下的所有u-form-item的实例
    // 不能定义在data中，否则微信小程序会造成循环引用而报错
    this.fields = [];
  },
  methods: {
    setRules(rules) {
      this.rules = rules;
    },
    // 清空所有u-form-item组件的内容，本质上是调用了u-form-item组件中的resetField()方法
    resetFields() {
      this.fields.map(field => {
        field.resetField();
      });
    },
    // 校验全部数据
    validate(callback) {
      return new Promise(resolve => {
        // 对所有的u-form-item进行校验
        let valid = true; // 默认通过
        let count = 0; // 用于标记是否检查完毕
        let errorArr = []; // 存放错误信息
        this.fields.map(field => {
          // 调用每一个u-form-item实例的validation的校验方法
          field.validation('', error => {
            // 如果任意一个u-form-item校验不通过，就意味着整个表单不通过
            if (error) {
              valid = false;
              errorArr.push(error);
            }
            // 当历遍了所有的u-form-item时，调用promise的then方法
            if (++count === this.fields.length) {
              resolve(valid); // 进入promise的then方法
              // 判断是否设置了toast的提示方式，只提示最前面的表单域的第一个错误信息
              if (this.errorType.indexOf('none') === -1 && this.errorType.indexOf('toast') >= 0 && errorArr.length) {
                this.$u.toast(errorArr[0]);
              }
              // 调用回调方法
              if (typeof callback == 'function') callback(valid);
            }
          });
        });
      });
    }
  }
};
</script>

<style lang="scss" scoped>
@import "../../libs/css/style.components.scss";
</style>