From 23c0570a79f27c4b2d15064a3b15b3a81fb33404 Mon Sep 17 00:00:00 2001
From: LCJ-MinYa <1049468118@qq.com>
Date: Mon, 23 Jun 2025 15:50:03 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20elementPlusSwitch=20=E4=B8=ADbefore-cha?=
 =?UTF-8?q?nge=E9=97=AE=E9=A2=98=E5=A4=84=E7=90=86?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/views/demo/elementPlusSwitch.vue | 47 ++++++++++++++++++++++++++++
 1 file changed, 47 insertions(+)
 create mode 100644 src/views/demo/elementPlusSwitch.vue

diff --git a/src/views/demo/elementPlusSwitch.vue b/src/views/demo/elementPlusSwitch.vue
new file mode 100644
index 0000000..d4e1e90
--- /dev/null
+++ b/src/views/demo/elementPlusSwitch.vue
@@ -0,0 +1,47 @@
+<template>
+    <el-switch
+        v-model="isEnabled"
+        :loading="loading"
+        active-text="启用"
+        inactive-text="禁用"
+        active-value="Y"
+        inactive-value="N"
+        :before-change="() => toggleSwitch('测试参数')"
+    />
+</template>
+
+<script setup>
+import { ref, onMounted } from 'vue';
+
+/**
+ * :before-change="toggleSwitch"                    如果不带参数，可以使用这种写法，不会导致getInitData设置数据之后触发
+ * :before-change="toggleSwitch(isEnabled)"         如果带参数，使用这种写法会导致getInitData设置数据之后触发
+ * :before-change="() => toggleSwitch(isEnabled)"   无聊是否带参数都可以使用该写法，都不会导致getInitData设置数据之后触发
+ *
+ * 原因是因为el-switch希望得到的默认值我们自定义为Y或者N，但是我们初始化的时候又设置值为空，从空切换到Y或者N，会触发before-change事件
+ */
+
+const isEnabled = ref('');
+const loading = ref(false);
+const toggleSwitch = (params) => {
+    console.log('执行一次', params);
+    loading.value = true;
+    return new Promise((resolve) => {
+        setTimeout(() => {
+            isEnabled.value = isEnabled.value === 'Y' ? 'N' : 'Y';
+            loading.value = false;
+            resolve();
+        }, 3000);
+    });
+};
+
+const getInitData = () => {
+    setTimeout(() => {
+        isEnabled.value = 'Y';
+    }, 500);
+};
+
+onMounted(() => {
+    getInitData();
+});
+</script>