Switch 滑动开关 APP
该方法或组件支持移动端小程序调用
PC
该方法或组件支持桌面端小程序调用

在两个互斥对象进行选择,eg:选择开或关。

规则

  • 只在 List 中使用。
  • 避免增加额外的文案来描述当前 Switch 的值。

引入方式

数字生活小程序工程中,不需要 import,直接使用组件标签即可。

import {OkSwitch} from '@21cnfe/vui'  
Vue.component('OkSwitch', OkSwitch)

代码演示

基本用法 可通过 v-model 绑定布尔变量控制选中状态,也可通过 checked 属性控制
<ok-switch v-model="check"></ok-switch>
展示形态 通过 platform 的值设置展示形态,可选值为 android, morden, ios,默认为ios
<ok-switch v-model="check" platform="android"></ok-switch>
<ok-switch v-model="check" platform="morden"></ok-switch>
<ok-switch v-model="check" platform="ios"></ok-switch>
禁用状态
<ok-switch v-model="check" disabled></ok-switch>

API

属性 说明 类型 默认值
v-model 绑定值 Boolean --
name switch 的 name String --
disabled 是否不可修改 Boolean false
checked 指定当前是否选中 Boolean false
platform 设定组件的平台特有样式, 可选值为 android, morden 和 ios String ios

Event

事件名称 说明 回调参数
onChange switch 状态发生变化时的回调函数 新状态的值value
  1. 1. Switch 滑动开关 APP 该方法或组件支持移动端小程序调用 PC 该方法或组件支持桌面端小程序调用
    1. 1.1. 规则
    2. 1.2. 引入方式
    3. 1.3. 代码演示
    4. 1.4. API
    5. 1.5. Event