update Input loading icon

梁灏
1 parent ffdb5001
Showing 2 changed files with 89 additions and 9 deletions Show diff stats
examples/routers/input.vue
src/components/input/input.vue
 <template>
-    <div style="width: 200px;margin: 100px;">
-        {{ value6 }}
-        <Input v-model="value5" type="textarea" placeholder="Enter something..."></Input>
-        <Input v-model="value6" type="textarea" :rows="4" placeholder="Enter something..."></Input>
-    </div>
+    <Form ref="formCustom" :model="formCustom" :rules="ruleCustom" :label-width="80">
+        <FormItem label="Password" prop="passwd">
+            <Input type="password" v-model="formCustom.passwd"></Input>
+        </FormItem>
+        <FormItem label="Confirm" prop="passwdCheck">
+            <Input type="password" v-model="formCustom.passwdCheck"></Input>
+        </FormItem>
+        <FormItem label="Age" prop="age">
+            <Input type="text" v-model="formCustom.age" number></Input>
+        </FormItem>
+        <FormItem>
+            <Button type="primary" @click="handleSubmit('formCustom')">Submit</Button>
+            <Button type="ghost" @click="handleReset('formCustom')" style="margin-left: 8px">Reset</Button>
+        </FormItem>
+        <br><br>
+        <Icon class="ivu-load-loop" type="loading" size="30" color="#ff6600" />
+        <Icon type="ios-alert" size="30" color="#ff6600" />
+        <Icon class="ivu-load-loop" type="ios-sync" size="30" color="#ff6600" />
+    </Form>
 </template>
 <script>
     export default {
         data () {
+            const validatePass = (rule, value, callback) => {
+                if (value === '') {
+                    callback(new Error('Please enter your password'));
+                } else {
+                    if (this.formCustom.passwdCheck !== '') {
+                        // 对第二个密码框单独验证
+                        this.$refs.formCustom.validateField('passwdCheck');
+                    }
+                    callback();
+                }
+            };
+            const validatePassCheck = (rule, value, callback) => {
+                if (value === '') {
+                    callback(new Error('Please enter your password again'));
+                } else if (value !== this.formCustom.passwd) {
+                    callback(new Error('The two input passwords do not match!'));
+                } else {
+                    callback();
+                }
+            };
+            const validateAge = (rule, value, callback) => {
+                if (!value) {
+                    return callback(new Error('Age cannot be empty'));
+                }
+                // 模拟异步验证效果
+                setTimeout(() => {
+                    if (!Number.isInteger(value)) {
+                        callback(new Error('Please enter a numeric value'));
+                    } else {
+                        if (value < 18) {
+                            callback(new Error('Must be over 18 years of age'));
+                        } else {
+                            callback();
+                        }
+                    }
+                }, 1000);
+            };
+
             return {
-                value5: '',
-                value6: ''
+                formCustom: {
+                    passwd: '',
+                    passwdCheck: '',
+                    age: ''
+                },
+                ruleCustom: {
+                    passwd: [
+                        { validator: validatePass, trigger: 'blur' }
+                    ],
+                    passwdCheck: [
+                        { validator: validatePassCheck, trigger: 'blur' }
+                    ],
+                    age: [
+                        { validator: validateAge, trigger: 'blur' }
+                    ]
+                }
+            }
+        },
+        methods: {
+            handleSubmit (name) {
+                this.$refs[name].validate((valid) => {
+                    if (valid) {
+                        this.$Message.success('Success!');
+                    } else {
+                        this.$Message.error('Fail!');
+                    }
+                })
+            },
+            handleReset (name) {
+                this.$refs[name].resetFields();
             }
         }
     }
@@ -2,10 +2,10 @@
     <div :class="wrapClasses">
         <template v-if="type !== 'textarea'">
             <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div>
-            <i class="ivu-icon" :class="['ivu-icon-ios-close', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable && currentValue" @click="handleClear"></i>
+            <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>
             <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
             <transition name="fade">
-                <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
+                <i class="ivu-icon ivu-icon-ios-sync ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i>
             </transition>
             <input
                 :id="elementId"