Switch: compatible with vue ssr, fixed #3752 (#3820)

packages/switch/src/component.vue

@@ -9,7 +9,7 @@
       :name="name"
       :disabled="disabled">
     <span class="el-switch__core" ref="core" :style="{ 'width': coreWidth + 'px' }">
-      <span class="el-switch__button" :style="buttonStyle"></span>
+      <span class="el-switch__button" :style="{ transform }"></span>
     </span>
     <transition name="label-fade">
       <div
@@ -79,10 +79,7 @@
     },
     data() {
       return {
-        coreWidth: this.width,
-        buttonStyle: {
-          transform: ''
-        }
+        coreWidth: this.width
       };
     },
     computed: {
@@ -97,6 +94,9 @@
         set(val) {
           this.$emit('input', val);
         }
+      },
+      transform() {
+        return this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
       }
     },
     watch: {
@@ -104,16 +104,12 @@
         if (this.onColor || this.offColor) {
           this.setBackgroundColor();
         }
-        this.handleButtonTransform();
       }
     },
     methods: {
       handleChange(event) {
         this.$emit('change', event.currentTarget.checked);
       },
-      handleButtonTransform() {
-        this.buttonStyle.transform = this.value ? `translate(${ this.coreWidth - 20 }px, 2px)` : 'translate(2px, 2px)';
-      },
       setBackgroundColor() {
         let newColor = this.value ? this.onColor : this.offColor;
         this.$refs.core.style.borderColor = newColor;
@@ -125,7 +121,6 @@
       if (this.width === 0) {
         this.coreWidth = this.hasText ? 58 : 46;
       }
-      this.handleButtonTransform();
       if (this.onColor || this.offColor) {
         this.setBackgroundColor();
       }