Commit a73ae72b3559eb3abf4420ad835931c003b76c82
1 parent
07614811
fixed #2884
Showing
3 changed files
with
32 additions
and
6 deletions
Show diff stats
examples/routers/input.vue
| 1 | <template> | 1 | <template> |
| 2 | - <div style="width: 300px"> | ||
| 3 | - <Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..."></Input> | ||
| 4 | - <Input v-model="value8" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input> | 2 | + <div> |
| 3 | + {{ value1 }} | ||
| 4 | + <Input v-model="value1" clearable icon="ios-clock-outline" size="large" placeholder="large size"></Input> | ||
| 5 | + <br> | ||
| 6 | + <Input v-model="value2" clearable placeholder="default size"></Input> | ||
| 7 | + <br> | ||
| 8 | + <Input v-model="value3" clearable size="small" placeholder="small size"></Input> | ||
| 5 | </div> | 9 | </div> |
| 6 | </template> | 10 | </template> |
| 7 | <script> | 11 | <script> |
| 8 | export default { | 12 | export default { |
| 9 | data () { | 13 | data () { |
| 10 | return { | 14 | return { |
| 11 | - value7: '', | ||
| 12 | - value8: '' | 15 | + value1: '', |
| 16 | + value2: '', | ||
| 17 | + value3: '' | ||
| 13 | } | 18 | } |
| 14 | } | 19 | } |
| 15 | } | 20 | } |
src/components/input/input.vue
| @@ -2,7 +2,8 @@ | @@ -2,7 +2,8 @@ | ||
| 2 | <div :class="wrapClasses"> | 2 | <div :class="wrapClasses"> |
| 3 | <template v-if="type !== 'textarea'"> | 3 | <template v-if="type !== 'textarea'"> |
| 4 | <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div> | 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-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-if="icon" @click="handleIconClick"></i> | 5 | + <i class="ivu-icon" :class="['ivu-icon-ios-close', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable" @click="handleClear"></i> |
| 6 | + <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i> | ||
| 6 | <transition name="fade"> | 7 | <transition name="fade"> |
| 7 | <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-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i> |
| 8 | </transition> | 9 | </transition> |
| @@ -128,6 +129,10 @@ | @@ -128,6 +129,10 @@ | ||
| 128 | }, | 129 | }, |
| 129 | default: 'off' | 130 | default: 'off' |
| 130 | }, | 131 | }, |
| 132 | + clearable: { | ||
| 133 | + type: Boolean, | ||
| 134 | + default: false | ||
| 135 | + }, | ||
| 131 | elementId: { | 136 | elementId: { |
| 132 | type: String | 137 | type: String |
| 133 | } | 138 | } |
| @@ -244,6 +249,12 @@ | @@ -244,6 +249,12 @@ | ||
| 244 | } else { | 249 | } else { |
| 245 | this.$refs.input.blur(); | 250 | this.$refs.input.blur(); |
| 246 | } | 251 | } |
| 252 | + }, | ||
| 253 | + handleClear () { | ||
| 254 | + const e = { target: { value: '' } }; | ||
| 255 | + this.$emit('input', ''); | ||
| 256 | + this.setCurrentValue(''); | ||
| 257 | + this.$emit('on-change', e); | ||
| 247 | } | 258 | } |
| 248 | }, | 259 | }, |
| 249 | watch: { | 260 | watch: { |
src/styles/components/input.less
| @@ -29,6 +29,16 @@ | @@ -29,6 +29,16 @@ | ||
| 29 | display: none; | 29 | display: none; |
| 30 | } | 30 | } |
| 31 | 31 | ||
| 32 | + &-icon-clear{ | ||
| 33 | + display: none; | ||
| 34 | + } | ||
| 35 | + | ||
| 36 | + &-wrapper:hover{ | ||
| 37 | + .@{input-prefix-cls}-icon-clear{ | ||
| 38 | + display: inline-block; | ||
| 39 | + } | ||
| 40 | + } | ||
| 41 | + | ||
| 32 | &-icon-normal + &{ | 42 | &-icon-normal + &{ |
| 33 | padding-right: 32px; | 43 | padding-right: 32px; |
| 34 | } | 44 | } |