属性 | 描述 | 类型 | 默认值 |
---|---|---|---|
value | 要绑定的值,可通过v-model绑定 | boolean | - |
labelPosition | 文案位置 | string | right |
disabled | 是否禁用 | boolean | false |
fillSpace | 上下padding的值 | number | 10 |
名称 | 描述 |
---|---|
default | 默认的插槽,可以替换文案 |
名称 | 描述 | 参数 |
---|---|---|
input | input事件 | value |
change | change事件 | value |
<template>
<div>
<div class="items">
<p class="item_title">switch的基础用法</p>
<vill-switch v-model="value_1" @change="handleChange">单组switch</vill-switch>
<p class="item_change">{{value_1}}</p>
</div>
<div class="items">
<p class="item_title">单组switch-禁用</p>
<vill-switch labelPosition="left" :fillSpace="20" v-model="value_2" :disabled="true">单组switch</vill-switch>
<p class="item_change">{{value_2}}</p>
</div>
</div>
</template>
<script>
export default {
data() {
return {
value_1: false,
value_2: true
}
},
methods: {
handleChange(val) {
console.log(val)
}
}
}
</script>