Input: add clear event (#9988)

examples/docs/en-US/input.md

@@ -682,6 +682,7 @@ Search data from server-side.
 | blur | triggers when Input blurs | (event: Event) |
 | focus | triggers when Input focuses | (event: Event) |
 | change | triggers when the icon inside Input value change | (value: string \| number) |
+| clear | triggers when the Input is cleared by the button which generated by the "clearable" attribute | (event: Event) |
 
 ### Autocomplete Attributes
 

examples/docs/zh-CN/input.md

@@ -836,6 +836,7 @@ export default {
 | blur | 在 Input 失去焦点时触发 | (event: Event) |
 | focus | 在 Input 获得焦点时触发 | (event: Event) |
 | change | 在 Input 值改变时触发 | (value: string \| number) |
+| clear | 在点击"clearable"属性生成的清空按钮时触发 | (event: Event) |
 
 ### Input Methods
 | 方法名 | 说明 | 参数 |

packages/input/src/input.vue

@@ -284,6 +284,7 @@
       clear() {
         this.$emit('input', '');
         this.$emit('change', '');
+        this.$emit('clear');
         this.setCurrentValue('');
         this.focus();
       }

test/unit/specs/input.spec.js

@@ -241,5 +241,36 @@ describe('Input', () => {
         done();
       });
     });
+    it('event:clear', done => {
+      vm = createVue({
+        template: `
+          <el-input
+            ref="input"
+            placeholder="请输入内容"
+            clearable
+            :value="input">
+          </el-input>
+        `,
+        data() {
+          return {
+            input: 'a'
+          };
+        }
+      }, true);
+
+      const spyClear = sinon.spy();
+      const inputElm = vm.$el.querySelector('input');
+
+      // focus to show clear button
+      inputElm.focus();
+      vm.$refs.input.$on('clear', spyClear);
+      vm.$nextTick(_ => {
+        vm.$el.querySelector('.el-input__clear').click();
+        vm.$nextTick(_ => {
+          expect(spyClear.calledOnce).to.be.true;
+          done();
+        });
+      });
+    });
   });
 });