yunshangxie/tuniao-ui/components/tn-form/tn-form.vue

140 lines
3.4 KiB
Vue
Raw Permalink Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<template>
<view class="tn-form-class tn-form">
<slot></slot>
</view>
</template>
<script>
export default {
name: 'tn-form',
props: {
// 表单数据对象(需要验证的表单数据)
model: {
type: Object,
default() {
return {}
}
},
// 发生错误时的提示方式
// toast - 弹出toast框
// message - 提示信息
// border - 如果设置了边框,边框会变成红色
// border-bottom - 下边框会呈现红色
// none - 无提示
errorType: {
type: Array,
default() {
return ['message', 'toast']
}
},
// 是否显示表单域的下划线边框
borderBottom: {
type:Boolean,
default: true
},
// label(标签名称)的位置
// left - 左边
// top - 上边
labelPosition: {
type: String,
default: 'left'
},
// label的宽度
labelWidth: {
type: Number,
default: 90
},
// label的对齐方式
// left - 左对齐
// center - 居中对齐
// right - 右对齐
labelAlign: {
type: String,
default: 'left'
},
// label 的样式
labelStyle: {
type: Object,
default() {
return {}
}
}
},
// 向子孙传递数据
provide() {
return {
tnForm: this
}
},
data() {
return {
rules: {}
}
},
created() {
// 存储当前form下的所有form-item的实例
// 不能定义再data中否则小程序会循环引用而报错
this.fields = []
},
methods: {
/**
* 设置规则
*
* @param {Object} rules
*/
setRules(rules) {
this.rules = rules
},
/**
* 清空form-item组件
*/
resetFields() {
this.fields.map(field => {
field.resetField()
})
},
/**
* 校验数据
* @param {Object} callback 校验回调方法
*/
validate(callback) {
return new Promise(resolve => {
// 标记校验是否通过
let valid = true
// 标记是否检查完毕
let count = 0
// 存放错误信息
let errors = []
// 对所有form-item进行校验
this.fields.map(field => {
// 调用对应form-item实例的validation校验方法
field.validation('', error => {
// 如果有一个form-item校验不通过则整个表单校验不通过
if (error) {
valid = false
errors.push(error)
}
// 当遍历完所有的form-item的校验规则返回信息
if (++count === this.fields.length) {
resolve(valid)
// 判断是否设置了toast的提示方式只提示表单域中最前面的一条错误信息
if (this.errorType.indexOf('none') === -1 &&
this.errorType.indexOf('toast') >= 0 &&
errors.length > 0) {
this.$tn.message.toast(errors[0])
}
// 调用回调方法
if (typeof callback == 'function') callback(valid)
}
})
})
})
}
}
}
</script>
<style>
</style>