other / mew-iview

Commit fdcb8143be5e8bcc2f196dede25a4d15fcf7f48b

Authored by 梁灏
1 parent ffdb5001

update Input loading icon

Showing 2 changed files with 89 additions and 9 deletions   Show diff stats
Inline Side-by-side
examples/routers/input.vue
  Show/Hide comments   View file @fdcb814
1 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 21 </template>
8 22 <script>
9 23 export default {
10 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 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
  Show/Hide comments   View file @fdcb814
... ... @@ -2,10 +2,10 @@
2 2 <div :class="wrapClasses">
3 3 <template v-if="type !== 'textarea'">
4 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 6 <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i>
7 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 9 </transition>
10 10 <input
11 11 :id="elementId"
... ...