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 <template> 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 </template> 82 </template>
32 <script> 83 <script>
33 export default { 84 export default {
34 data () { 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 return { 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,7 +178,7 @@
178 text-align: center; 178 text-align: center;
179 background-color: #eee; 179 background-color: #eee;
180 border: 1px solid @input-border-color; 180 border: 1px solid @input-border-color;
181 - border-radius: @border-radius-base; 181 + border-radius: @btn-border-radius;
182 182
183 // Reset Select's style in addon 183 // Reset Select's style in addon
184 .@{css-prefix}select { 184 .@{css-prefix}select {