增加晶全app静态页面
This commit is contained in:
148
node_modules/vk-uview-ui/components/u-form/u-form.vue
generated
vendored
Normal file
148
node_modules/vk-uview-ui/components/u-form/u-form.vue
generated
vendored
Normal file
@ -0,0 +1,148 @@
|
||||
<template>
|
||||
<view class="u-form"><slot /></view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
/**
|
||||
* form 表单
|
||||
* @description 此组件一般用于表单场景,可以配置Input输入框,Select弹出框,进行表单验证等。
|
||||
* @tutorial https://vkuviewdoc.fsq.pub/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 {}
|
||||
}
|
||||
},
|
||||
// 表单内所有input的inputAlign属性的值
|
||||
inputAlign: {
|
||||
type: String,
|
||||
default: 'left'
|
||||
},
|
||||
// 表单内所有input的clearable属性的值
|
||||
clearable:{
|
||||
type: Boolean,
|
||||
default: true
|
||||
}
|
||||
},
|
||||
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 = []; // 存放错误信息
|
||||
let errorObjArr = []; // 存放错误信息对象
|
||||
this.fields.map(field => {
|
||||
// 调用每一个u-form-item实例的validation的校验方法
|
||||
field.validation('', (errorMsg, errObj) => {
|
||||
// 如果任意一个u-form-item校验不通过,就意味着整个表单不通过
|
||||
if (errorMsg) {
|
||||
valid = false;
|
||||
errorArr.push(errorMsg);
|
||||
errorObjArr.push(errObj)
|
||||
}
|
||||
|
||||
// 当历遍了所有的u-form-item时,调用promise的then方法
|
||||
if (++count === this.fields.length) {
|
||||
|
||||
resolve(valid, errorObjArr[0]); // 进入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, errorObjArr[0]);
|
||||
}
|
||||
});
|
||||
});
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped lang="scss">
|
||||
@import "../../libs/css/style.components.scss";
|
||||
</style>
|
Reference in New Issue
Block a user