support input icon click hook function (#2414)

examples/docs/en-US/input.md

@@ -191,14 +191,14 @@ export default {
 
 Add an icon to indicate input type.
 
-::: demo You can add an icon at the end of Input by setting the `icon` attribute.
+::: demo You can add an icon at the end of Input by setting the `icon` attribute and use `on-icon-click` hook to complete some work after clicking the icon.
 
 ```html
 <el-input
   placeholder="Pick a date"
-  icon="time"
+  icon="search"
   v-model="input2"
-  @click="handleIconClick">
+  :on-icon-click="handleIconClick">
 </el-input>
 
 <script>
@@ -608,7 +608,7 @@ Search data from server-side.
 |resize| control the resizability | string | none, both, horizontal, vertical | — |
 |autofocus | same as `autofocus` in native input | boolean | — | false |
 |form | same as `form` in native input | string | — | — |
-
+| on-icon-click | hook function when clicking on the input icon | function | — | — |
 
 ### Input Events
 

examples/docs/zh-CN/input.md

@@ -231,13 +231,13 @@ export default {
 
 带有图标标记输入类型
 
-::: demo 可以通过 `icon` 属性在 input 组件尾部增加显示图标。
+::: demo 可以通过 `icon` 属性在 input 组件尾部增加显示图标，可以通过 `on-icon-click` 钩子函数来在点击图标后执行需要的逻辑。
 ```html
 <el-input
   placeholder="请选择日期"
-  icon="time"
+  icon="search"
   v-model="input2"
-  @click="handleIconClick">
+  :on-icon-click="handleIconClick">
 </el-input>
 
 <script>
@@ -771,6 +771,7 @@ export default {
 | resize | 控制是否能被用户缩放 | string | none, both, horizontal, vertical | — |
 | autofocus | 原生属性，自动获取焦点 | boolean | true, false | false |
 | form | 原生属性 | string | — | — |
+| on-icon-click | 点击 Input 内的图标的钩子函数 | function | — | — |
 
 ### Input Events
 | 事件名称 | 说明 | 回调参数 |

packages/input/src/input.vue

@@ -16,7 +16,14 @@
       </div>
       <!-- input 图标 -->
       <slot name="icon">
-        <i class="el-input__icon" :class="'el-icon-' + icon" v-if="icon" @click="handleIconClick"></i>
+        <i class="el-input__icon"
+          :class="[
+            'el-icon-' + icon,
+            onIconClick ? 'is-clickable' : ''
+          ]"
+          v-if="icon"
+          @click="handleIconClick">
+        </i>
       </slot>
       <input
         v-if="type !== 'textarea'"
@@ -118,7 +125,8 @@
       validateEvent: {
         type: Boolean,
         default: true
-      }
+      },
+      onIconClick: Function
     },
 
     computed: {
@@ -162,6 +170,9 @@
         this.setCurrentValue(event.target.value);
       },
       handleIconClick(event) {
+        if (this.onIconClick) {
+          this.onIconClick(event);
+        }
         this.$emit('click', event);
       },
       setCurrentValue(value) {

packages/theme-default/src/input.css

@@ -47,6 +47,7 @@
       top: 0;
       text-align: center;
       color: var(--input-icon-color);
+      transition: all .3s;
 
       &:after {
         content: '';
@@ -59,6 +60,17 @@
       & + .el-input__inner {
         padding-right: 35px;
       }
+
+      @when clickable {
+        &:hover {
+          cursor: pointer;
+          color: var(--input-hover-border);
+
+          & + .el-input__inner {
+            border-color: var(--input-hover-border);
+          }
+        }
+      }
     }
 
     @when active {