Switch

Basic usage

<mu-switch v-model="switchValue" />
1
export default {
    data() {
        return {
            switchValue: false,
            switchValueActive: true,
        };
    }
}
1
2
3
4
5
6
7
8

Disabled

<mu-switch 
    v-model="switchValue" 
    :disabled="disabledSwitch"
/>
1
2
3
4
export default {
    data() {
        return {
            switchValue: false,
            disabledSwitch: true,
        };
    }
}
1
2
3
4
5
6
7
8

Loading



<div>
    <mu-switch 
        v-model="switchValue" 
        :loading="switchLoading" 
    />

    <el-button @click="switchStart">Change with preload</el-button>
</div>
1
2
3
4
5
6
7
8
export default {
    data() {
        return {
            switchValue: false,
            switchLoading: false,
        };
    },

    methods: {
        switchStart() {
            this.switchLoading = true;
            setTimeout(() =>{
                this.switchLoading = false;
                this.switchValue = !this.switchValue;
            }, 2000);
        },
    },
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

Attributes

Attribute Description Type Accepted Values Default
value v-model Boolean true/false Reuired
disabled Disabled checkbox Boolean true/false false
loading Show preload state Boolean true/false false