u

code/base-project/base-vue/packages/ao-design/src/switch/index.tsx

@@ -31,10 +31,14 @@ export default defineComponent({
       type: Boolean,
       default: false,
     },
+
     loading: {
       type: Boolean,
       default: false,
     },
+    beforeConfirm: {
+      type: Function as PropType<() => boolean | Promise<boolean>>,
+    },
     class: {
       type: [String, Array, Object],
       default: '',
@@ -48,22 +52,44 @@ export default defineComponent({
   setup(props, { emit, slots }) {
     const prefixCls = getPrefixCls('switch')
 
+    const _loading = ref(false)
     const _checked = ref(props.modelValue)
 
+    const isLoading = computed(() => props.loading || _loading.value)
+
     watch(
       () => props.modelValue,
       (val) => {
         _checked.value = val
       },
     )
+
     const isChecked = computed(() => _checked.value === props.checkedValue)
 
-    const toggle = (e: Event) => {
-      const newValue = isChecked.value ? props.uncheckedValue : props.checkedValue
-      _checked.value = newValue
+    const toggle = async (e: Event) => {
+      if (props.disabled || isLoading.value)
+        return
 
-      emit('update:modelValue', newValue)
-      emit('change', newValue, e)
+      _loading.value = true
+      let allow = true
+
+      if (props.beforeConfirm) {
+        try {
+          allow = await Promise.resolve(props.beforeConfirm())
+        }
+        catch {
+          allow = false
+        }
+      }
+
+      if (allow) {
+        const newValue = isChecked.value ? props.uncheckedValue : props.checkedValue
+        _checked.value = newValue
+        emit('update:modelValue', newValue)
+        emit('change', newValue, e)
+      }
+
+      _loading.value = false
     }
 
     const displayContent = computed(() => {
@@ -96,13 +122,13 @@ export default defineComponent({
           {
             [`${prefixCls}-checked`]: isChecked.value,
             [`${prefixCls}-disabled`]: props.disabled,
-            [`${prefixCls}-loading`]: props.loading,
+            [`${prefixCls}-loading`]: isLoading.value,
           },
         ]}
         onClick={toggle}
       >
         <span class={`${prefixCls}-handle`}>
-          {props.loading && <Spin loading size={12} />}
+          {isLoading.value && <Spin loading size={12} />}
         </span>
         <span class={`${prefixCls}-text-holder`}>{displayContent.value}</span>
         <span class={`${prefixCls}-text`}>{displayContent.value}</span>