默认主题
开关

示例

基础用法

通过disabled禁用组件,v-model进行数据双向绑定。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
定义文案

定义开关开启/关闭时文案,可以通过以下两种方式来定义:

  1. 通过属性on off来定义,可以传入字符串或者vNode对象
  2. 通过扩展点on off来定义
index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
关闭
开启
关闭
开启
长/宽

通过width/height,可定义开关长度/高度,不用加单位(默认px)。

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
large:
default:
small:
mini:
开关尺寸

通过size可以定义尺寸: large default small mini

index.vdt
index.styl
index.js
index.vue (Vue)
index.jsx (React)
开关值

Switch默认选中的值为true,非选中的值为false,通过trueValuefalseValue属性,我们可以指定选中和非选中的值。

index.vdt
index.js
index.vue (Vue)
index.jsx (React)

Vue不能使用Switch作为组件名,可以自定义为KSwitch: import {Switch as KSwitch} from 'kpc/components/switch';

属性

属性 说明 类型 默认值
name 可定义当前开关的名称 String undefined
on 定义开启时显示文案 String undefined
off 定义关闭时显示文案 String undefined
width 开关的宽度 Number undefined
height 开关的高度 Number undefined
size 开关的型号 String "default"
disabled 控制禁用 Boolean false
value 开关当前值,可用v-model双向绑定 * false
trueValue 开启时的值 * true
falseValue 关闭时的值 * false

扩展点

名称 说明
on 扩展开启时的文案
off 扩展关闭时的文案

方法

方法名 说明 参数 返回值
isChecked 判断是否开启 - Boolean
check 开启按钮 - undefined
uncheck 关闭按钮 - undefined