diff --git a/examples/routers/input.vue b/examples/routers/input.vue index 8c1715f..38d0390 100644 --- a/examples/routers/input.vue +++ b/examples/routers/input.vue @@ -1,15 +1,20 @@ <template> - <div style="width: 300px"> - <Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..."></Input> - <Input v-model="value8" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input> + <div> + {{ value1 }} + <Input v-model="value1" clearable icon="ios-clock-outline" size="large" placeholder="large size"></Input> + <br> + <Input v-model="value2" clearable placeholder="default size"></Input> + <br> + <Input v-model="value3" clearable size="small" placeholder="small size"></Input> </div> </template> <script> export default { data () { return { - value7: '', - value8: '' + value1: '', + value2: '', + value3: '' } } } diff --git a/src/components/input/input.vue b/src/components/input/input.vue index b8b080b..b684a73 100644 --- a/src/components/input/input.vue +++ b/src/components/input/input.vue @@ -2,7 +2,8 @@ <div :class="wrapClasses"> <template v-if="type !== 'textarea'"> <div :class="[prefixCls + '-group-prepend']" v-if="prepend" v-show="slotReady"><slot name="prepend"></slot></div> - <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-if="icon" @click="handleIconClick"></i> + <i class="ivu-icon" :class="['ivu-icon-ios-close', prefixCls + '-icon', prefixCls + '-icon-clear' , prefixCls + '-icon-normal']" v-if="clearable" @click="handleClear"></i> + <i class="ivu-icon" :class="['ivu-icon-' + icon, prefixCls + '-icon', prefixCls + '-icon-normal']" v-else-if="icon" @click="handleIconClick"></i> <transition name="fade"> <i class="ivu-icon ivu-icon-load-c ivu-load-loop" :class="[prefixCls + '-icon', prefixCls + '-icon-validate']" v-if="!icon"></i> </transition> @@ -128,6 +129,10 @@ }, default: 'off' }, + clearable: { + type: Boolean, + default: false + }, elementId: { type: String } @@ -244,6 +249,12 @@ } else { this.$refs.input.blur(); } + }, + handleClear () { + const e = { target: { value: '' } }; + this.$emit('input', ''); + this.setCurrentValue(''); + this.$emit('on-change', e); } }, watch: { diff --git a/src/styles/components/input.less b/src/styles/components/input.less index c2951e1..92ddbc0 100644 --- a/src/styles/components/input.less +++ b/src/styles/components/input.less @@ -29,6 +29,16 @@ display: none; } + &-icon-clear{ + display: none; + } + + &-wrapper:hover{ + .@{input-prefix-cls}-icon-clear{ + display: inline-block; + } + } + &-icon-normal + &{ padding-right: 32px; } -- libgit2 0.21.4