switch.vue
1.53 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<template>
<div>
<i-switch v-model="m1" :loading="loading">
<span slot="open">开</span>
<span slot="close">关</span>
</i-switch>
{{ m1 }}
<div @click="m1 = !m1">toggle</div>
<div @click="loading = !loading">loading</div>
<br><br>
<i-switch size="large" loading></i-switch>
<i-switch></i-switch>
<i-switch size="small" v-model="m1" :loading="loading"></i-switch>
<br><br>
<i-switch>
<span slot="open">开</span>
<span slot="close">关</span>
</i-switch>
<i-switch>
<Icon type="android-done" slot="open"></Icon>
<Icon type="android-close" slot="close"></Icon>
</i-switch>
<br><br>
<i-switch size="large">
<span slot="open">开启</span>
<span slot="close">关闭</span>
</i-switch>
<i-switch size="large" v-model="m1" :loading="loading">
<span slot="open">ON</span>
<span slot="close">OFF</span>
</i-switch>
<br><br>
<i-switch :disabled="disabled"></i-switch>
<Button type="primary" @click="disabled = !disabled">Toggle Disabled</Button>
</div>
</template>
<script>
export default {
data () {
return {
m1: true,
disabled: true,
loading: false
}
},
methods: {
change (status) {
console.log(status)
}
}
}
</script>