Button: add click event (#703)

examples/docs/zh-cn/button.md

@@ -51,7 +51,7 @@
     overflow: hidden;
     border-bottom: solid 1px #EFF2F6;
     &:last-child {
-      border-bottom: none;      
+      border-bottom: none;
     }
   }
 

packages/button/src/button.vue

@@ -1,5 +1,6 @@
 <template>
   <button :disabled="disabled" class="el-button"
+    @click="handleClick"
     :type="nativeType"
     :class="[
       type ? 'el-button--' + type : '',
@@ -46,6 +47,12 @@
         type: Boolean,
         default: false
       }
+    },
+
+    methods: {
+      handleClick(evt) {
+        this.$emit('click', evt);
+      }
     }
   };
 </script>

test/unit/specs/button.spec.js

@@ -1,4 +1,4 @@
-import { createTest } from '../util';
+import { createTest, createVue, destroyVM } from '../util';
 import Button from 'packages/button';
 
 describe('Button', () => {
@@ -8,6 +8,7 @@ describe('Button', () => {
     }, true);
     let buttonElm = vm.$el;
     expect(buttonElm.classList.contains('el-button--primary')).to.be.true;
+    destroyVM(vm);
   });
   it('icon', () => {
     const vm = createTest(Button, {
@@ -15,6 +16,7 @@ describe('Button', () => {
     }, true);
     let buttonElm = vm.$el;
     expect(buttonElm.querySelector('.el-icon-search')).to.be.ok;
+    destroyVM(vm);
   });
   it('nativeType', () => {
     const vm = createTest(Button, {
@@ -22,6 +24,7 @@ describe('Button', () => {
     }, true);
     let buttonElm = vm.$el;
     expect(buttonElm.getAttribute('type')).to.be.equal('submit');
+    destroyVM(vm);
   });
   it('loading', () => {
     const vm = createTest(Button, {
@@ -30,6 +33,7 @@ describe('Button', () => {
     let buttonElm = vm.$el;
     expect(buttonElm.classList.contains('is-loading')).to.be.true;
     expect(buttonElm.querySelector('.el-icon-loading')).to.be.ok;
+    destroyVM(vm);
   });
   it('disabled', () => {
     const vm = createTest(Button, {
@@ -37,6 +41,7 @@ describe('Button', () => {
     }, true);
     let buttonElm = vm.$el;
     expect(buttonElm.classList.contains('is-disabled')).to.be.true;
+    destroyVM(vm);
   });
   it('size', () => {
     const vm = createTest(Button, {
@@ -44,6 +49,7 @@ describe('Button', () => {
     }, true);
     let buttonElm = vm.$el;
     expect(buttonElm.classList.contains('el-button--large')).to.be.true;
+    destroyVM(vm);
   });
   it('plain', () => {
     const vm = createTest(Button, {
@@ -51,5 +57,26 @@ describe('Button', () => {
     }, true);
     let buttonElm = vm.$el;
     expect(buttonElm.classList.contains('is-plain')).to.be.true;
+    destroyVM(vm);
+  });
+  it('click', done => {
+    let result;
+    const vm = createVue({
+      template: `
+        <el-button @click="handleClick"></el-button>
+      `,
+      methods: {
+        handleClick(evt) {
+          result = evt;
+        }
+      }
+    }, true);
+    vm.$el.click();
+
+    setTimeout(_ => {
+      expect(result).to.exist;
+      destroyVM(vm);
+      done();
+    }, 20);
   });
 });