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>
@@ -32,6 +32,7 @@
         <br><br>
         <i-switch :disabled="disabled"></i-switch>
         <Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
+        <Divider></Divider>
         <i-switch v-model="switch1" true-color="#13ce66" false-color="#ff4949" />
     </div>
 </template>
@@ -48,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

@@ -16,9 +16,7 @@
 <script>
     import { oneOf } from '../../utils/assist';
     import Emitter from '../../mixins/emitter';
-
     const prefixCls = 'ivu-switch';
-
     export default {
         name: 'iSwitch',
         mixins: [ Emitter ],
@@ -59,7 +57,8 @@
             },
             falseColor: {
                 type: String
-            }
+            },
+            beforeChange: Function
         },
         data () {
             return {
@@ -94,18 +93,29 @@
             }
         },
         methods: {
+            handleToggle () {
+                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;
                 }
-
-                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);
+                if (!this.beforeChange) {
+                    return this.handleToggle();
+                }
+                const before = this.beforeChange();
+                if (before && before.then) {
+                    before.then(() => {
+                        this.handleToggle();
+                    });
+                } else {
+                    this.handleToggle();
+                }
             }
         },
         watch: {