Switch: update change event triggering mechanism (#1002)

packages/switch/src/component.vue

@@ -1,15 +1,20 @@
 <template>
-  <div class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText }">
+  <label class="el-switch" :class="{ 'is-disabled': disabled, 'el-switch--wide': hasText }">
     <div class="el-switch__mask" v-show="disabled"></div>
-    <input class="el-switch__input" type="checkbox" :checked="value" :name="name" :disabled="disabled" style="display: none;">
-    <span class="el-switch__core" ref="core" @click="handleMiscClick" :style="{ 'width': coreWidth + 'px' }">
+    <input
+      class="el-switch__input"
+      type="checkbox"
+      @change="handleChange"
+      v-model="currentValue"
+      :name="name"
+      :disabled="disabled">
+    <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
       <span class="el-switch__button" :style="buttonStyle"></span>
     </span>
     <transition name="label-fade">
       <div
         class="el-switch__label el-switch__label--left"
         v-show="value"
-        @click="handleMiscClick"
         :style="{ 'width': coreWidth + 'px' }">
         <i :class="[onIconClass]" v-if="onIconClass"></i>
         <span v-if="!onIconClass && onText">{{ onText }}</span>
@@ -19,13 +24,12 @@
       <div
         class="el-switch__label el-switch__label--right"
         v-show="!value"
-        @click="handleMiscClick"
         :style="{ 'width': coreWidth + 'px' }">
         <i :class="[offIconClass]" v-if="offIconClass"></i>
         <span v-if="!offIconClass && offText">{{ offText }}</span>
       </div>
     </transition>
-  </div>
+  </label>
 </template>
 
 <script>
@@ -75,6 +79,7 @@
     },
     data() {
       return {
+        currentValue: this.value,
         coreWidth: this.width,
         buttonStyle: {}
       };
@@ -87,18 +92,19 @@
     },
     watch: {
       value(val) {
+        this.currentValue = val;
         if (this.onColor || this.offColor) {
           this.handleCoreColor();
         }
         this.handleButtonTransform();
-        this.$emit('change', val);
+      },
+      currentValue(val) {
+        this.$emit('input', val);
       }
     },
     methods: {
-      handleMiscClick() {
-        if (!this.disabled) {
-          this.$emit('input', !this.value);
-        }
+      handleChange(event) {
+        this.$emit('change', event.currentTarget.checked);
       },
       handleButtonTransform() {
         this.buttonStyle.transform = this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';

packages/theme-default/src/switch.css

@@ -47,6 +47,7 @@
     }
 
     @e input {
+      display: none;
       &:checked + .el-switch__core {
         border-color: var(--switch-on-color);
         background-color: var(--switch-on-color);

test/unit/specs/switch.spec.js

@@ -50,12 +50,53 @@ describe('Switch', () => {
 
     const core = vm.$el.querySelector('.el-switch__core');
     core.click();
-    Vue.nextTick(() => {
+    setTimeout(() => {
       expect(vm.value).to.equal(false);
       core.click();
+      setTimeout(() => {
         expect(vm.value).to.equal(true);
         done();
+      }, 10);
+    }, 10);
   });
+
+  it('change event', done => {
+    vm = createVue({
+      template: `
+        <div>
+          <el-switch
+            v-model="value"
+            @change="handleChange">  
+          </el-switch>
+        </div>
+      `,
+      mounted() {
+        setTimeout(() => {
+          this.value = false;
+        }, 10);
+      },
+      methods: {
+        handleChange(val) {
+          this.target = val;
+        }
+      },
+      data() {
+        return {
+          target: 1,
+          value: true
+        };
+      }
+    }, true);
+
+    setTimeout(() => {
+      const core = vm.$el.querySelector('.el-switch__core');
+      expect(vm.target).to.equal(1);
+      core.click();
+      setTimeout(() => {
+        expect(vm.target).to.equal(true);
+        done();
+      }, 10);
+    }, 50);
   });
 
   it('disabled switch should not respond to user click', done => {