Commit fdcb8143be5e8bcc2f196dede25a4d15fcf7f48b
1 parent
ffdb5001
update Input loading icon
Showing
2 changed files
with
89 additions
and
9 deletions
Show diff stats
examples/routers/input.vue
1 | <template> | 1 | <template> |
2 | - <div style="width: 200px;margin: 100px;"> | ||
3 | - {{ value6 }} | ||
4 | - <Input v-model="value5" type="textarea" placeholder="Enter something..."></Input> | ||
5 | - <Input v-model="value6" type="textarea" :rows="4" placeholder="Enter something..."></Input> | ||
6 | - </div> | 2 | + <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80"> |
3 | + <FormItem label="Password" prop="passwd"> | ||
4 | + <Input type="password" v-model="formCustom.passwd"></Input> | ||
5 | + </FormItem> | ||
6 | + <FormItem label="Confirm" prop="passwdCheck"> | ||
7 | + <Input type="password" v-model="formCustom.passwdCheck"></Input> | ||
8 | + </FormItem> | ||
9 | + <FormItem label="Age" prop="age"> | ||
10 | + <Input type="text" v-model="formCustom.age" number></Input> | ||
11 | + </FormItem> | ||
12 | + <FormItem> | ||
13 | + <Button type="primary" @click="handleSubmit('formCustom')">Submit</Button> | ||
14 | + <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button> | ||
15 | + </FormItem> | ||
16 | + <br><br> | ||
17 | + <Icon class="ivu-load-loop" type="loading" size="30" color="#ff6600" /> | ||
18 | + <Icon type="ios-alert" size="30" color="#ff6600" /> | ||
19 | + <Icon class="ivu-load-loop" type="ios-sync" size="30" color="#ff6600" /> | ||
20 | + </Form> | ||
7 | </template> | 21 | </template> |
8 | <script> | 22 | <script> |
9 | export default { | 23 | export default { |
10 | data () { | 24 | data () { |
25 | + const validatePass = (rule, value, callback) => { | ||
26 | + if (value === '') { | ||
27 | + callback(new Error('Please enter your password')); | ||
28 | + } else { | ||
29 | + if (this.formCustom.passwdCheck !== '') { | ||
30 | + // 对第二个密码框单独验证 | ||
31 | + this.$refs.formCustom.validateField('passwdCheck'); | ||
32 | + } | ||
33 | + callback(); | ||
34 | + } | ||
35 | + }; | ||
36 | + const validatePassCheck = (rule, value, callback) => { | ||
37 | + if (value === '') { | ||
38 | + callback(new Error('Please enter your password again')); | ||
39 | + } else if (value !== this.formCustom.passwd) { | ||
40 | + callback(new Error('The two input passwords do not match!')); | ||
41 | + } else { | ||
42 | + callback(); | ||
43 | + } | ||
44 | + }; | ||
45 | + const validateAge = (rule, value, callback) => { | ||
46 | + if (!value) { | ||
47 | + return callback(new Error('Age cannot be empty')); | ||
48 | + } | ||
49 | + // 模拟异步验证效果 | ||
50 | + setTimeout(() => { | ||
51 | + if (!Number.isInteger(value)) { | ||
52 | + callback(new Error('Please enter a numeric value')); | ||
53 | + } else { | ||
54 | + if (value < 18) { | ||
55 | + callback(new Error('Must be over 18 years of age')); | ||
56 | + } else { | ||
57 | + callback(); | ||
58 | + } | ||
59 | + } | ||
60 | + }, 1000); | ||
61 | + }; | ||
62 | + | ||
11 | return { | 63 | return { |
12 | - value5: '', | ||
13 | - value6: '' | 64 | + formCustom: { |
65 | + passwd: '', | ||
66 | + passwdCheck: '', | ||
67 | + age: '' | ||
68 | + }, | ||
69 | + ruleCustom: { | ||
70 | + passwd: [ | ||
71 | + { validator: validatePass, trigger: 'blur' } | ||
72 | + ], | ||
73 | + passwdCheck: [ | ||
74 | + { validator: validatePassCheck, trigger: 'blur' } | ||
75 | + ], | ||
76 | + age: [ | ||
77 | + { validator: validateAge, trigger: 'blur' } | ||
78 | + ] | ||
79 | + } | ||
80 | + } | ||
81 | + }, | ||
82 | + methods: { | ||
83 | + handleSubmit (name) { | ||
84 | + this.$refs[name].validate((valid) => { | ||
85 | + if (valid) { | ||
86 | + this.$Message.success('Success!'); | ||
87 | + } else { | ||
88 | + this.$Message.error('Fail!'); | ||
89 | + } | ||
90 | + }) | ||
91 | + }, | ||
92 | + handleReset (name) { | ||
93 | + this.$refs[name].resetFields(); | ||
14 | } | 94 | } |
15 | } | 95 | } |
16 | } | 96 | } |
src/components/input/input.vue
@@ -2,10 +2,10 @@ | @@ -2,10 +2,10 @@ | ||
2 | <div :class="wrapClasses"> | 2 | <div :class="wrapClasses"> |
3 | <template v-if="type !== 'textarea'"> | 3 | <template v-if="type !== 'textarea'"> |
4 | <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div> | 4 | <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div> |
5 | - <i class="ivu-icon" :class="['ivu-icon-ios-close', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i> | 5 | + <i class="ivu-icon" :class="['ivu-icon-ios-close-circle', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i> |
6 | <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i> | 6 | <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i> |
7 | <transition name="fade"> | 7 | <transition name="fade"> |
8 | - <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i> | 8 | + <i class="ivu-icon ivu-icon-ios-sync ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i> |
9 | </transition> | 9 | </transition> |
10 | <input | 10 | <input |
11 | :id="elementId" | 11 | :id="elementId" |