From c37f47faca1bd4fa76b7b00a14021e589b5873cb Mon Sep 17 00:00:00 2001
From: djkloop <1044032256@qq.com>
Date: Mon, 8 Feb 2021 16:19:36 +0800
Subject: [PATCH] fix(switch): cannot change width dynamically (#1435)

Cannot change the width dynamically, the subset does not change the width operation

Co-authored-by: djkloop <675467298@qq.com>
---
 packages/switch/src/index.vue | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/packages/switch/src/index.vue b/packages/switch/src/index.vue
index f10fc23991..4c65fb662b 100644
--- a/packages/switch/src/index.vue
+++ b/packages/switch/src/index.vue
@@ -26,7 +26,7 @@
       <i v-if="inactiveIconClass" :class="[inactiveIconClass]"></i>
       <span v-if="!inactiveIconClass && inactiveText" :aria-hidden="checked">{{ inactiveText }}</span>
     </span>
-    <span ref="core" class="el-switch__core" :style="{ 'width': coreWidth + 'px' }">
+    <span ref="core" class="el-switch__core" :style="{ 'width': (width || 40) + 'px' }">
       <div class="el-switch__action">
         <i v-if="loading" class="el-icon-loading"></i>
       </div>
@@ -138,7 +138,6 @@ export default defineComponent({
     const elForm = inject(elFormKey, {} as ElFormContext)
     const elFormItem = inject(elFormItemKey, {} as ElFormItemContext)
 
-    const coreWidth = ref(props.width)
     const isModelValue = ref(props.modelValue !== false)
     const input = ref(null)
     const core = ref(null)
@@ -204,8 +203,6 @@ export default defineComponent({
     }
 
     onMounted(() => {
-      coreWidth.value = coreWidth.value || 40
-
       if (props.activeValue || props.inactiveValue) {
         setBackgroundColor()
       }
@@ -216,7 +213,6 @@ export default defineComponent({
     return {
       input,
       core,
-      coreWidth,
       switchDisabled,
       checked,
       handleChange,