Switch 开关
用法
基础用法
通过v-model传递绑定一个变量，来控制显示switch的状态。
<mooc-switch v-model="value1"></mooc-switch>
export default {
data () {
return {
value1: true
}
}
}
不同的宽度
通过传递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
}
}
}
禁用
通过传递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
}
}
}
不同的颜色
通过传递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属性，可用来显示激活时的辅助文字 |
事件
change事件
在非disabled状态下，此change事件有效，回调参数为更新后的值
<mooc-switch v-model="value1" @change="handleSwitchChange"></mooc-switch>
export default {
data () {
return {
value1: true
}
},
methods: {
// 值更新
handleSwitchChange (val) {
console.log(val)
}
}
}
← Badge 标记 Timeline 时间线 →