Switch add new prop: beforeChange

examples/routers/switch.vue

@@ -1,6 +1,6 @@
 <template>
     <div>
-        <i-switch v-model="m1" :loading="loading">
+        <i-switch v-model="m1" :loading="loading" @on-change="change" :before-change="beforeChange">
             <span slot="open">开</span>
             <span slot="close">关</span>
         </i-switch>
@@ -49,6 +49,20 @@
         methods: {
             change (status) {
                 console.log(status)
+            },
+            beforeChange () {
+                return new Promise((resolve, reject) => {
+                    this.$Modal.confirm({
+                        title: '切换确认',
+                        content: '您确认要切换开关状态吗？',
+                        onOk: () => {
+                            resolve();
+                        },
+                        onCancel: () => {
+                            reject();
+                        }
+                    });
+                });
             }
         }
     }

src/components/switch/switch.vue

@@ -59,7 +59,8 @@
             },
             falseColor: {
                 type: String
-            }
+            },
+            beforeChange: Function
         },
         data () {
             return {
@@ -96,18 +97,33 @@
             }
         },
         methods: {
-            toggle (event) {
+            handleToggle () {
-                event.preventDefault();
-                if (this.disabled || this.loading) {
-                    return false;
-                }
-
                 const checked = this.currentValue === this.trueValue ? this.falseValue : this.trueValue;
 
                 this.currentValue = checked;
                 this.$emit('input', checked);
                 this.$emit('on-change', checked);
                 this.dispatch('FormItem', 'on-form-change', checked);
+            },
+            toggle (event) {
+                event.preventDefault();
+                if (this.disabled || this.loading) {
+                    return false;
+                }
+
+                if (!this.beforeChange) {
+                    return this.handleToggle();
+                }
+
+                const before = this.beforeChange();
+
+                if (before && before.then) {
+                    before.then(() => {
+                        this.handleToggle();
+                    });
+                } else {
+                    this.handleToggle();
+                }
             }
         },
         watch: {