chenhaodong / mew-iview

Blame view

examples/routers/form.vue 4.91 KB
Edit Raw Normal View History
9f5e2c7e   梁灏   update Form 
1
 
  <template>
a358e0c7   Aresn   fixed #1171 
2
 
      <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
f3c6cd68   梁灏   fixed FormItem la... 
3
4
 
          <Form-item prop="name">
              <span slot="label"><Icon type="ionic"></Icon></span>
7af00356   梁灏   update AutoComplete 
5
 
              <AutoComplete v-model="formValidate.name" :data="['Li','Liang','Zhang']" placeholder="请输入姓名"></AutoComplete>
a358e0c7   Aresn   fixed #1171 
6
7
 
          </Form-item>
          <Form-item label="邮箱" prop="mail">
2baba209   梁灏   update ColorPicker 
8
9
 
              <!--<Input v-model="formValidate.mail" placeholder="请输入邮箱"></Input>-->
              <ColorPicker v-model="formValidate.mail"></ColorPicker>
a358e0c7   Aresn   fixed #1171 
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
 
          </Form-item>
          <Form-item label="城市" prop="city">
              <Select v-model="formValidate.city" placeholder="请选择所在地">
                  <Option value="beijing">北京市</Option>
                  <Option value="shanghai">上海市</Option>
                  <Option value="shenzhen">深圳市</Option>
              </Select>
          </Form-item>
          <Form-item label="选择日期">
              <Row>
                  <Col span="11">
                  <Form-item prop="date">
                      <Date-picker type="date" placeholder="选择日期" v-model="formValidate.date"></Date-picker>
                  </Form-item>
                  </Col>
                  <Col span="2" style="text-align: center">-</Col>
                  <Col span="11">
                  <Form-item prop="time">
                      <Time-picker type="time" placeholder="选择时间" v-model="formValidate.time"></Time-picker>
                  </Form-item>
                  </Col>
              </Row>
          </Form-item>
          <Form-item label="性别" prop="gender">
              <Radio-group v-model="formValidate.gender">
                  <Radio label="male">男</Radio>
                  <Radio label="female">女</Radio>
              </Radio-group>
          </Form-item>
          <Form-item label="爱好" prop="interest">
              <Checkbox-group v-model="formValidate.interest">
                  <Checkbox label="吃饭"></Checkbox>
                  <Checkbox label="睡觉"></Checkbox>
                  <Checkbox label="跑步"></Checkbox>
                  <Checkbox label="看电影"></Checkbox>
              </Checkbox-group>
          </Form-item>
          <Form-item label="介绍" prop="desc">
              <Input v-model="formValidate.desc" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="请输入..."></Input>
          </Form-item>
          <Form-item>
              <Button type="primary" @click="handleSubmit('formValidate')">提交</Button>
              <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">重置</Button>
          </Form-item>
      </Form>
9f5e2c7e   梁灏   update Form 
55
56
57
 
  </template>
  <script>
      export default {
9f5e2c7e   梁灏   update Form 
58
 
          data () {
184dba1c   梁灏   update Form 
59
 
              return {
7af00356   梁灏   update AutoComplete 
60
 
                  name: '',
05e2dda0   梁灏   fixed #768 
61
 
                  formValidate: {
a358e0c7   Aresn   fixed #1171 
62
63
64
65
66
67
68
69
 
                      name: '',
                      mail: '',
                      city: '',
                      gender: '',
                      interest: [],
                      date: '',
                      time: '',
                      desc: ''
c3a9f389   梁灏   update Input 
70
 
                  },
05e2dda0   梁灏   fixed #768 
71
 
                  ruleValidate: {
a358e0c7   Aresn   fixed #1171 
72
 
                      name: [
7af00356   梁灏   update AutoComplete 
73
 
                          { required: true, message: '姓名不能为空', trigger: 'change' }
a358e0c7   Aresn   fixed #1171 
74
75
 
                      ],
                      mail: [
2baba209   梁灏   update ColorPicker 
76
 
                          { required: true, message: '邮箱不能为空', trigger: 'change' }
a358e0c7   Aresn   fixed #1171 
77
78
79
80
81
82
83
 
                      ],
                      city: [
                          { required: true, message: '请选择城市', trigger: 'change' }
                      ],
                      gender: [
                          { required: true, message: '请选择性别', trigger: 'change' }
                      ],
05e2dda0   梁灏   fixed #768 
84
 
                      interest: [
a358e0c7   Aresn   fixed #1171 
85
86
87
88
89
90
91
92
93
94
95
96
 
                          { required: true, type: 'array', min: 1, message: '至少选择一个爱好', trigger: 'change' },
                          { type: 'array', max: 2, message: '最多选择两个爱好', trigger: 'change' }
                      ],
                      date: [
                          { required: true, type: 'date', message: '请选择日期', trigger: 'change' }
                      ],
                      time: [
                          { required: true, type: 'date', message: '请选择时间', trigger: 'change' }
                      ],
                      desc: [
                          { required: true, message: '请输入个人介绍', trigger: 'blur' },
                          { type: 'string', min: 20, message: '介绍不能少于20字', trigger: 'blur' }
257f80f1   梁灏   support Form 
97
 
                      ]
184dba1c   梁灏   update Form 
98
99
 
                  }
              }
9f5e2c7e   梁灏   update Form 
100
 
          },
184dba1c   梁灏   update Form 
101
 
          methods: {
ef090131   梁灏   optimize Input va... 
102
103
104
105
106
107
108
109
110
111
112
 
              handleSubmit (name) {
                  this.$refs[name].validate((valid) => {
                      if (valid) {
                          this.$Message.success('提交成功!');
                      } else {
                          this.$Message.error('表单验证失败!');
                      }
                  })
              },
              handleReset (name) {
                  this.$refs[name].resetFields();
fc0c4c78   梁灏   fixed #494 
113
 
              }
184dba1c   梁灏   update Form 
114
 
          }
8bca1070   梁灏   update Input on-f... 
115
 
      }
ef090131   梁灏   optimize Input va... 
116
 
  </script>