other / mew-iview

Commit c0d09051434bc3db868c109ff27f8bd417c7675b

Authored by 梁灏
1 parent eccaa940

update Input append&prepend border-radius

Showing 2 changed files with 86 additions and 96 deletions   Show diff stats
Inline Side-by-side
examples/routers/input.vue
  Show/Hide comments   View file @c0d0905
1 1 <template>
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="ios-loading" size="14" color="#ff6600" />
  2 + <div>
  3 + <Input v-model="value" placeholder="Enter something..." style="width: 300px"></Input>
  4 + <Input v-model="value11">
  5 + <span slot="prepend">http://</span>
  6 + <span slot="append">.com</span>
  7 + </Input>
  8 + <br>
  9 + <Input v-model="value12">
  10 + <Select v-model="select1" slot="prepend" style="width: 80px">
  11 + <Option value="http">http://</Option>
  12 + <Option value="https">https://</Option>
  13 + </Select>
  14 + <Select v-model="select2" slot="append" style="width: 70px">
  15 + <Option value="com">.com</Option>
  16 + <Option value="org">.org</Option>
  17 + <Option value="io">.io</Option>
  18 + </Select>
  19 + </Input>
  20 + <br>
  21 + <Input v-model="value13">
  22 + <Select v-model="select3" slot="prepend" style="width: 80px">
  23 + <Option value="day">Day</Option>
  24 + <Option value="month">Month</Option>
  25 + </Select>
  26 + <Button slot="append" icon="ios-search"></Button>
  27 + </Input>
  28 + <br>
18 29  
19   - <Icon class="ivu-load-loop" type="ios-loading" size="12" color="#ff6600" />
20   - <Icon class="ivu-load-loop" type="ios-loading" size="13" color="#ff6600" />
  30 + <Input v-model="value11" size="small">
  31 + <span slot="prepend">http://</span>
  32 + <span slot="append">.com</span>
  33 + </Input>
  34 + <br>
  35 + <Input v-model="value12" size="small">
  36 + <Select v-model="select1" slot="prepend" style="width: 80px">
  37 + <Option value="http">http://</Option>
  38 + <Option value="https">https://</Option>
  39 + </Select>
  40 + <Select v-model="select2" slot="append" style="width: 70px">
  41 + <Option value="com">.com</Option>
  42 + <Option value="org">.org</Option>
  43 + <Option value="io">.io</Option>
  44 + </Select>
  45 + </Input>
  46 + <br>
  47 + <Input v-model="value13" size="small">
  48 + <Select v-model="select3" slot="prepend" style="width: 80px">
  49 + <Option value="day">Day</Option>
  50 + <Option value="month">Month</Option>
  51 + </Select>
  52 + <Button slot="append" icon="ios-search"></Button>
  53 + </Input>
  54 + <br>
21 55  
22   - <Icon class="ivu-load-loop" type="ios-loading" size="16" color="#ff6600" />
23   - <Icon class="ivu-load-loop" type="ios-loading" size="18" color="#ff6600" />
24   - <Icon class="ivu-load-loop" type="ios-loading" size="20" color="#ff6600" />
25   - <Icon class="ivu-load-loop" type="ios-loading" size="30" color="#ff6600" />
26   - <Icon class="ivu-load-loop" type="ios-loading" size="30" color="#ff6600" />
27   -
28   - <Icon type="ios-alert" size="30" color="#ff6600" />
29   - <Icon class="ivu-load-loop" type="ios-loading" size="30" color="#ff6600" />
30   - </Form>
  56 + <Input v-model="value11" size="large">
  57 + <span slot="prepend">http://</span>
  58 + <span slot="append">.com</span>
  59 + </Input>
  60 + <br>
  61 + <Input v-model="value12" size="large">
  62 + <Select v-model="select1" slot="prepend" style="width: 80px">
  63 + <Option value="http">http://</Option>
  64 + <Option value="https">https://</Option>
  65 + </Select>
  66 + <Select v-model="select2" slot="append" style="width: 70px">
  67 + <Option value="com">.com</Option>
  68 + <Option value="org">.org</Option>
  69 + <Option value="io">.io</Option>
  70 + </Select>
  71 + </Input>
  72 + <br>
  73 + <Input v-model="value13" size="large">
  74 + <Select v-model="select3" slot="prepend" style="width: 80px">
  75 + <Option value="day">Day</Option>
  76 + <Option value="month">Month</Option>
  77 + </Select>
  78 + <Button slot="append" icon="ios-search"></Button>
  79 + </Input>
  80 + <br>
  81 + </div>
31 82 </template>
32 83 <script>
33 84 export default {
34 85 data () {
35   - const validatePass = (rule, value, callback) => {
36   - if (value === '') {
37   - callback(new Error('Please enter your password'));
38   - } else {
39   - if (this.formCustom.passwdCheck !== '') {
40   - // 对第二个密码框单独验证
41   - this.$refs.formCustom.validateField('passwdCheck');
42   - }
43   - callback();
44   - }
45   - };
46   - const validatePassCheck = (rule, value, callback) => {
47   - if (value === '') {
48   - callback(new Error('Please enter your password again'));
49   - } else if (value !== this.formCustom.passwd) {
50   - callback(new Error('The two input passwords do not match!'));
51   - } else {
52   - callback();
53   - }
54   - };
55   - const validateAge = (rule, value, callback) => {
56   - if (!value) {
57   - return callback(new Error('Age cannot be empty'));
58   - }
59   - // 模拟异步验证效果
60   - setTimeout(() => {
61   - if (!Number.isInteger(value)) {
62   - callback(new Error('Please enter a numeric value'));
63   - } else {
64   - if (value < 18) {
65   - callback(new Error('Must be over 18 years of age'));
66   - } else {
67   - callback();
68   - }
69   - }
70   - }, 1000);
71   - };
72   -
73 86 return {
74   - formCustom: {
75   - passwd: '',
76   - passwdCheck: '',
77   - age: ''
78   - },
79   - ruleCustom: {
80   - passwd: [
81   - { validator: validatePass, trigger: 'blur' }
82   - ],
83   - passwdCheck: [
84   - { validator: validatePassCheck, trigger: 'blur' }
85   - ],
86   - age: [
87   - { validator: validateAge, trigger: 'blur' }
88   - ]
89   - }
90   - }
91   - },
92   - methods: {
93   - handleSubmit (name) {
94   - this.$refs[name].validate((valid) => {
95   - if (valid) {
96   - this.$Message.success('Success!');
97   - } else {
98   - this.$Message.error('Fail!');
99   - }
100   - })
101   - },
102   - handleReset (name) {
103   - this.$refs[name].resetFields();
  87 + value: '',
  88 + value11: '',
  89 + value12: '',
  90 + value13: '',
  91 + select1: 'http',
  92 + select2: 'com',
  93 + select3: 'day'
104 94 }
105 95 }
106 96 }
... ...
src/styles/mixins/input.less
  Show/Hide comments   View file @c0d0905
... ... @@ -178,7 +178,7 @@
178 178 text-align: center;
179 179 background-color: #eee;
180 180 border: 1px solid @input-border-color;
181   - border-radius: @border-radius-base;
  181 + border-radius: @btn-border-radius;
182 182  
183 183 // Reset Select's style in addon
184 184 .@{css-prefix}select {
... ...