fixed #2884

examples/routers/input.vue

@@ -1,15 +1,20 @@
 <template>
-    <div style="width: 300px">
+    <div>
-        <Input v-model="value7" type="textarea" :autosize="true" placeholder="Enter something..."></Input>
+        {{ value1 }}
-        <Input v-model="value8" type="textarea" :autosize="{minRows: 2,maxRows: 5}" placeholder="Enter something..."></Input>
+        <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: '',
+                value1: '',
-                value8: ''
+                value2: '',
+                value3: ''
             }
         }
     }

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: {

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;
     }