::: tip
通过v-model传递绑定一个变量，来控制显示switch的状态。
:::
<mooc-switch v-model="value1"></mooc-switch>export default {
data () {
return {
value1: true
}
}
}::: tip
通过传递width属性，来控制switch的宽度，默认值为40px。
:::
默认40px
自定义50px
自定义60px
<!-- 默认大小 -->
<mooc-switch v-model="value2"></mooc-switch>
<!-- 自定义大小 -->
<mooc-switch v-model="value3" width="50"></mooc-switch>
<mooc-switch v-model="value4" width="60"></mooc-switch>export default {
data () {
return {
value2: true,
value3: true,
value4: true
}
}
}::: tip
通过传递disabled属性，来控制switch是否可用。
:::
可用
禁用
<!-- 可用 -->
<mooc-switch v-model="value5"></mooc-switch>
<!-- 禁用 -->
<mooc-switch v-model="value6" :disabled="true"></mooc-switch>export default {
data () {
return {
value5: true,
value6: true
}
}
}::: tip
通过传递active对象的color属性，用来控制显示不同颜色的switch。
:::
默认颜色
自定义颜色
<!-- 默认颜色 -->
<mooc-switch v-model="value7"></mooc-switch>
<!-- 自定义颜色 -->
<mooc-switch v-model="value8" :active="active1" :in-active="inActive1"></mooc-switch>export default {
data () {
return {
value7: true,
value8: true,
active1: {
color: '#f60'
},
inActive1: {
color: '#58a'
}
}
}
}默认
自定义文字
<mooc-switch v-model="value9"></mooc-switch>
<mooc-switch v-model="value10" :active="active2" :in-active="inActive2"></mooc-switch>export default {
data () {
return {
value9: true,
value10: true,
active2: {
text: '按年付'
},
inActive2: {
text: '按月付'
}
}
}
}| 属性名称 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| value | [Boolean, Number, String] | false |
状态 |
| width | [Number, String] | 40px |
宽度 |
| disabled | Boolean | false |
是否禁用 |
| active | Object | - | 传递有active.color属性，可用来显示激活时的颜色传递有 active.text属性，可用来显示激活时的辅助文字 |
| inActive | Object | - | 传递有inActive.color属性，可用来显示未激活时的颜色 传递有 inActive.text属性，可用来显示激活时的辅助文字 |
::: tip
在非disabled状态下，此change事件有效，回调参数为更新后的值
:::
<mooc-switch v-model="value1" @change="handleSwitchChange"></mooc-switch>export default {
data () {
return {
value1: true
}
},
methods: {
// 值更新
handleSwitchChange (val) {
console.log(val)
}
}
}