Commit 54c988f211436d33a3cb185bed33e158b0d885ed
1 parent
5bb01822
fixed input cls with group & prepend, close #3089
Showing
2 changed files
with
34 additions
and
9 deletions
Show diff stats
examples/routers/input.vue
| 1 | <template> | 1 | <template> |
| 2 | <div> | 2 | <div> |
| 3 | - {{ value1 }} | ||
| 4 | - <Input v-model="value1" clearable icon="ios-clock-outline" size="large" placeholder="large size"></Input> | 3 | + <Input v-model="value11" size="small"> |
| 4 | + <span slot="prepend">http://</span> | ||
| 5 | + <span slot="append">.com</span> | ||
| 6 | + </Input> | ||
| 5 | <br> | 7 | <br> |
| 6 | - <Input v-model="value2" clearable placeholder="default size"></Input> | 8 | + <Input v-model="value12" size="small"> |
| 9 | + <Select v-model="select1" slot="prepend" style="width: 80px"> | ||
| 10 | + <Option value="http">http://</Option> | ||
| 11 | + <Option value="https">https://</Option> | ||
| 12 | + </Select> | ||
| 13 | + <Select v-model="select2" slot="append" style="width: 70px"> | ||
| 14 | + <Option value="com">.com</Option> | ||
| 15 | + <Option value="org">.org</Option> | ||
| 16 | + <Option value="io">.io</Option> | ||
| 17 | + </Select> | ||
| 18 | + </Input> | ||
| 7 | <br> | 19 | <br> |
| 8 | - <Input v-model="value3" clearable size="small" placeholder="small size"></Input> | 20 | + <Input v-model="value13" size="small"> |
| 21 | + <Select v-model="select3" slot="prepend" style="width: 80px"> | ||
| 22 | + <Option value="day">Day</Option> | ||
| 23 | + <Option value="month">Month</Option> | ||
| 24 | + </Select> | ||
| 25 | + <Button slot="append" icon="ios-search"></Button> | ||
| 26 | + </Input> | ||
| 9 | </div> | 27 | </div> |
| 10 | </template> | 28 | </template> |
| 11 | <script> | 29 | <script> |
| 12 | export default { | 30 | export default { |
| 13 | data () { | 31 | data () { |
| 14 | return { | 32 | return { |
| 15 | - value1: '', | ||
| 16 | - value2: '', | ||
| 17 | - value3: '' | 33 | + value11: '', |
| 34 | + value12: '', | ||
| 35 | + value13: '', | ||
| 36 | + select1: 'http', | ||
| 37 | + select2: 'com', | ||
| 38 | + select3: 'day' | ||
| 18 | } | 39 | } |
| 19 | } | 40 | } |
| 20 | } | 41 | } |
src/styles/mixins/input.less
| @@ -129,11 +129,15 @@ | @@ -129,11 +129,15 @@ | ||
| 129 | // border-radius: 0; | 129 | // border-radius: 0; |
| 130 | //} | 130 | //} |
| 131 | } | 131 | } |
| 132 | - &-with-prepend .@{inputClass} { | 132 | + &-with-prepend .@{inputClass}, |
| 133 | + &-with-prepend&-small .@{inputClass} | ||
| 134 | + { | ||
| 133 | border-top-left-radius: 0; | 135 | border-top-left-radius: 0; |
| 134 | border-bottom-left-radius: 0; | 136 | border-bottom-left-radius: 0; |
| 135 | } | 137 | } |
| 136 | - &-with-append .@{inputClass} { | 138 | + &-with-append .@{inputClass}, |
| 139 | + &-with-append&-small .@{inputClass} | ||
| 140 | + { | ||
| 137 | border-top-right-radius: 0; | 141 | border-top-right-radius: 0; |
| 138 | border-bottom-right-radius: 0; | 142 | border-bottom-right-radius: 0; |
| 139 | } | 143 | } |