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