Switch 开关
表示两种相互对立的状态间的切换,多用于触发「开/关」。
基础用法
当前选择值:true
绑定v-model到一个Boolean类型的变量。可以使用active-color属性与inactive-color属性来设置开关的背景色。
<template>
<os-switch v-model="value1" active-color="green" inactive-color="orange" />
</template>
文字描述
使用active-text属性与inactive-text属性来设置开关的文字描述。
<template>
<os-switch v-model="value2" active-text="智能施法" inactive-text="手动施法" />
</template>
扩展的 value 类型
当前的选择值:10
设置active-value和inactive-value属性,接受Boolean, String或Number类型的值。
<template>
<os-switch v-model="value3" :active-value="100" :inactive-value="10" />
</template>
禁用状态
设置disabled属性,接受一个Boolean,设置true即可禁用。
<template>
<os-switch v-model="value4" disabled />
</template>
Switch 属性
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
value / v-model | 绑定值 | boolean/string/number | -- | -- |
disabled | 是否禁用 | boolean | -- | false |
active-text | switch 打开时的文字描述 | string | -- | -- |
inactive-text | switch 关闭时的文字描述 | string | -- | -- |
active-value | switch 打开时的值 | boolean / string / number | -- | true |
inactive-value | switch 关闭时的值 | boolean / string / number | -- | false |
active-color | switch 打开时的背景色 | string | -- | #00554a |
inactive-color | switch 关闭时的背景色 | string | -- | #d8d8d8 |