1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
| <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.$t.message.toast(errors[0])
| }
| // 调用回调方法
| if (typeof callback == 'function') callback(valid)
| }
| })
| })
| })
| }
| }
| }
| </script>
|
| <style>
| </style>
|
|
