Blame view

examples/routers/form.vue 1.66 KB
9f5e2c7e   梁灏   update Form
1
  <template>
257f80f1   梁灏   support Form
2
3
4
5
6
      <i-form ref="formInline" :model="formInline" :rules="ruleInline" inline>
          <Form-item prop="user">
              <Input type="text" v-model="formInline.user" placeholder="Username">
                  <Icon type="ios-person-outline" slot="prepend"></Icon>
              </Input>
8bca1070   梁灏   update Input on-f...
7
          </Form-item>
257f80f1   梁灏   support Form
8
9
10
11
          <Form-item prop="password">
              <Input type="password" v-model="formInline.password" placeholder="Password">
                  <Icon type="ios-locked-outline" slot="prepend"></Icon>
              </Input>
8bca1070   梁灏   update Input on-f...
12
13
          </Form-item>
          <Form-item>
257f80f1   梁灏   support Form
14
              <Button type="primary" @click.native="handleSubmit('formInline')">登录</Button>
8bca1070   梁灏   update Input on-f...
15
16
          </Form-item>
      </i-form>
9f5e2c7e   梁灏   update Form
17
18
19
  </template>
  <script>
      export default {
9f5e2c7e   梁灏   update Form
20
          data () {
184dba1c   梁灏   update Form
21
              return {
257f80f1   梁灏   support Form
22
23
24
                  formInline: {
                      user: '',
                      password: ''
c3a9f389   梁灏   update Input
25
                  },
257f80f1   梁灏   support Form
26
27
28
29
30
31
32
33
                  ruleInline: {
                      user: [
                          { required: true, message: '请填写用户名', trigger: 'blur' }
                      ],
                      password: [
                          { required: true, message: '请填写密码', trigger: 'blur' },
                          { type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur' }
                      ]
184dba1c   梁灏   update Form
34
35
                  }
              }
9f5e2c7e   梁灏   update Form
36
          },
184dba1c   梁灏   update Form
37
          methods: {
257f80f1   梁灏   support Form
38
              handleSubmit(name) {
c3a9f389   梁灏   update Input
39
40
                  this.$refs[name].validate((valid) => {
                      if (valid) {
257f80f1   梁灏   support Form
41
                          console.log('success');
c3a9f389   梁灏   update Input
42
                      } else {
257f80f1   梁灏   support Form
43
                          console.log('fail')
c3a9f389   梁灏   update Input
44
45
                      }
                  })
184dba1c   梁灏   update Form
46
47
              }
          }
8bca1070   梁灏   update Input on-f...
48
49
      }
  </script>