add input icon click event

CHANGELOG.md

@@ -11,6 +11,7 @@
 - 修复 Tooltip/Popover 首次渲染的箭头位置 #412
 - 修复 Autocomplete 的弹出框不会消失 #439
 - 修复 DatePicker 弹出框样式溢出边框 #318
+- 新增 Input 图标的点击事件 #444
 
 #### 非兼容性更新
 

examples/docs/zh-cn/input.md

@@ -109,6 +109,9 @@
       },
       handleSelect(item) {
         console.log(item);
+      },
+      handleIconClick(ev) {
+        console.log(ev);
       }
     },
     mounted() {
@@ -227,7 +230,8 @@
 <el-input
   placeholder="请选择日期"
   icon="time"
-  v-model="input2">
+  v-model="input2"
+  @click="handleIconClick">
 </el-input>
 ```
 :::
@@ -638,6 +642,11 @@
 | rows          | 输入框行数，只对 `type="textarea"` 有效  |  number | — |  2   |
 | autosize      | 自适应内容高度，只对 `type="textarea"` 有效，可传入对象，如，{ minRows: 2, maxRows: 6 }  |  boolean/object | — |  false   |
 
+### Input Events
+| 事件名称 | 说明 | 回调参数 |
+|---------|--------|---------|
+| click | 点击 Input 内的图标时触发 | event |
+
 ### Autocomplete API
 
 | 参数          | 说明            | 类型            | 可选值                 | 默认值   |

packages/input/src/input.vue

@@ -12,6 +12,8 @@
       <div class="el-input-group__prepend" v-if="$slots.prepend">
         <slot name="prepend"></slot>
       </div>
+      <!-- input 图标 -->
+      <i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon" @click="handleIconClick"></i>
       <input
         v-if="type !== 'textarea'"
         class="el-input__inner"
@@ -30,8 +32,6 @@
         @focus="handleFocus"
         @blur="handleBlur"
       >
-      <!-- input 图标 -->
-      <i class="el-input__icon" :class="[icon ? 'el-icon-' + icon : '']" v-if="icon"></i>
       <i class="el-input__icon el-icon-loading" v-if="validating"></i>
       <!-- 后置元素 -->
       <div class="el-input-group__append" v-if="$slots.append">
@@ -138,6 +138,9 @@
       },
       handleInput(ev) {
         this.currentValue = ev.target.value;
+      },
+      handleIconClick(ev) {
+        this.$emit('click', ev);
       }
     },
 

packages/theme-default/src/input.css

@@ -36,11 +36,21 @@
 
     @e icon {
       position: absolute;
-      right: 10px;
+      width: 35px;
-      top: 50%;
+      height: 100%;
-      transform: translate(0, -50%);
+      right: 0;
+      text-align: center;
       color: var(--input-icon-color);
 
+      &:after {
+        content: '';
+        height: 100%;
+        width: 0;
+        display: inline-block;
+        vertical-align: middle;
+      }
+
+
       & + .el-input__inner {
         padding-right: 35px;
       }