135 lines
3.6 KiB
Vue
135 lines
3.6 KiB
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 scoped lang="scss">
|
|||
|
|
@import "../../libs/css/style.components.scss";
|
|||
|
|
</style>
|