other / mew-iview

Blame view

src/components/form/form.vue 2.71 KB
Edit Raw Normal View History
8a22e84f   梁灏   init Form component 
1
 
  <template>
9f5e2c7e   梁灏   update Form 
2
 
      <form :class="classes"><slot></slot></form>
8a22e84f   梁灏   init Form component 
3
4
 
  </template>
  <script>
9f5e2c7e   梁灏   update Form 
5
 
      // https://github.com/ElemeFE/element/blob/dev/packages/form/src/form.vue
184dba1c   梁灏   update Form 
6
 
      import { oneOf } from '../../utils/assist';
9f5e2c7e   梁灏   update Form 
7
8
9
 
  
      const prefixCls = 'ivu-form';
8a22e84f   梁灏   init Form component 
10
 
      export default {
9f5e2c7e   梁灏   update Form 
11
12
13
14
15
16
17
18
19
20
21
 
          name: 'iForm',
          props: {
              model: {
                  type: Object
              },
              rules: {
                  type: Object
              },
              labelWidth: {
                  type: Number
              },
184dba1c   梁灏   update Form 
22
23
24
25
26
27
 
              labelPosition: {
                  validator (value) {
                      return oneOf(value, ['left', 'right', 'top']);
                  },
                  default: 'right'
              },
9f5e2c7e   梁灏   update Form 
28
29
30
 
              inline: {
                  type: Boolean,
                  default: false
6986d055   梁灏   Form add show-mes... 
31
32
33
34
 
              },
              showMessage: {
                  type: Boolean,
                  default: true
9f5e2c7e   梁灏   update Form 
35
36
 
              }
          },
8a22e84f   梁灏   init Form component 
37
 
          data () {
9f5e2c7e   梁灏   update Form 
38
39
40
41
42
43
44
45
 
              return {
                  fields: []
              };
          },
          computed: {
              classes () {
                  return [
                      `${prefixCls}`,
184dba1c   梁灏   update Form 
46
 
                      `${prefixCls}-label-${this.labelPosition}`,
9f5e2c7e   梁灏   update Form 
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
 
                      {
                          [`${prefixCls}-inline`]: this.inline
                      }
                  ];
              }
          },
          methods: {
              resetFields() {
                  this.fields.forEach(field => {
                      field.resetField();
                  });
              },
              validate(callback) {
                  let valid = true;
                  let count = 0;
                  this.fields.forEach(field => {
                      field.validate('', errors => {
                          if (errors) {
                              valid = false;
                          }
                          if (typeof callback === 'function' && ++count === this.fields.length) {
                              callback(valid);
                          }
                      });
                  });
              },
              validateField(prop, cb) {
                  const field = this.fields.filter(field => field.prop === prop)[0];
                  if (!field) { throw new Error('[iView warn]: must call validateField with valid prop string!'); }
  
                  field.validate('', cb);
              }
          },
          watch: {
              rules() {
                  this.validate();
              }
8a22e84f   梁灏   init Form component 
84
 
          },
9f5e2c7e   梁灏   update Form 
85
86
87
88
89
90
91
92
93
94
 
          events: {
              'on-form-item-add' (field) {
                  if (field) this.fields.push(field);
                  return false;
              },
              'on-form-item-remove' (field) {
                  if (field.prop) this.fields.splice(this.fields.indexOf(field), 1);
                  return false;
              }
          }
8a22e84f   梁灏   init Form component 
95
96
 
      };
  </script>