drip-public/iview
5
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

update Input loading icon

Browse source
This commit is contained in:
梁灏 2018-06-25 12:48:49 +08:00
parent ffdb5001e0
commit fdcb8143be
2 changed files with 89 additions and 9 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

94
examples/routers/input.vue
View file

@ -1,16 +1,96 @@
<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();
}
}
}

4
src/components/input/input.vue
View file

@ -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"