Switch 开关

概述

在两种状态间切换时用到的开关选择器。

使用指南

在 .json 中引入组件

  1. "usingComponents": {
  2.     "i-switch": "../../dist/switch/index"
  3. }

示例

  1. <i-cell-group>
  2.     <i-cell title="基本用法">
  3.         <i-switch value="{{switch1}}" bind:change="onChange" slot="footer"></i-switch>
  4.     </i-cell>
  5.     <i-cell title="自定义内容">
  6.         <i-switch value="{{switch1}}" size="large" bind:change="onChange" slot="footer">
  7.             <view slot="open">开启</view>
  8.             <view slot="close">关闭</view>
  9.         </i-switch>
  10.     </i-cell>
  11.     <i-cell title="图标">
  12.         <i-switch value="{{switch1}}" bind:change="onChange" slot="footer">
  13.             <i-icon type="right" slot="open"></i-icon>
  14.             <i-icon type="close" slot="close"></i-icon>
  15.         </i-switch>
  16.     </i-cell>
  17.     <i-cell title="禁止切换">
  18.         <i-switch value="{{switch1}}" disabled="{{true}}" slot="footer"></i-switch>
  19.     </i-cell>
  20. </i-cell-group>
  1. Page({
  2.     data : {
  3.         switch1 : false
  4.     },
  5.     onChange(event){
  6.         const detail = event.detail;
  7.         this.setData({
  8.             'switch1' : detail.value
  9.         })
  11.     }
  12. });

API

Switch properties

属性说明类型默认值
i-class自定义 class 类名String-
value指定当前是否选中Booleanfalse
size开关的尺寸，可选值为 large、small、default 或者不写。建议开关如果使用了2个汉字的文字，使用 largeStringdefault
disabled是否禁用开关Booleanfalse
name隐藏的 input 的 name 值String-

Switch events

事件名说明返回值
bind:change开关变化时触发，返回当前的状态{ value }

Switch slot

名称说明
open自定义显示打开时的内容
close自定义显示关闭时的内容