Switch开关

    引入

    在app.json或index.json中引入组件，默认为ES6版本

    1.       "usingComponents": {
    2.     "vtu-switch": "/miniprogram_npm/vtuweapp/switch/vtu-switch"
    3. }
    4.

    代码演示

    基础用法

    1. <vtu-switch checked="{{value}}"></vtu-switch>
    2. <vtu-switch checked="{{value}}" size="small" active-color="red"></vtu-switch>
    3. <vtu-switch checked="{{value}}" type="round" active-color="orange"></vtu-switch>
    4. <vtu-switch checked="{{value}}" type="round" size="small" color="#9596A4" active-color="orange"></vtu-switch>
    6. Page({
    7.   data: {
    8.     value: true
    9.   }
    10. });
    11.

    其他样式

    1. <vtu-switch checked="{{value}}" type="circle" simple active-color="orange"></vtu-switch>
    2. <vtu-switch checked="{{value}}" type="circle" simple size="small" active-color="orange"></vtu-switch>
    3. <vtu-switch checked="{{value}}" type="round" simple color="#9596A4" active-color="skyblue"></vtu-switch>
    4. <vtu-switch checked="{{value}}" type="round" simple size="small" active-color="skyblue"></vtu-switch>
    6. Page({
    7.   data: {
    8.     value: true
    9.   }
    10. });
    11.

    禁用样式

    1. <vtu-switch checked="{{false}}" type="circle" bind:change="bindChange" active-color="red" disabled></vtu-switch>
    2. <vtu-switch checked="{{true}}" type="round" bind:change="bindChange" active-color="red" disabled></vtu-switch>
    3. <vtu-switch checked="{{false}}" type="circle" simple bind:change="bindChange" active-color="red" disabled></vtu-switch>
    4.

    异步

    1. <vtu-switch checked="{{value}}" async type="circle" bind:change="bindAsyncChange" active-color="orange"></vtu-switch>
    2. <vtu-switch checked="{{value}}" async type="round" bind:change="bindAsyncChange" active-color="orange"></vtu-switch>
    3. <vtu-switch checked="{{value}}" async type="round" simple bind:change="bindAsyncChange" active-color="orange"></vtu-switch>
    5. Page({
    6.   data: {
    7.     value: true
    8.   },
    10.   bindAsyncChange(e) {
    11.     let self = this
    12.     setTimeout(function() {
    13.       self.setData({
    14.         value: e.detail.value
    15.       })
    16.     }, 2000)
    17.   }
    18. });
    19.

    自定义图标

    1. <vtu-switch checked="{{value}}" async type="circle" color="#9596A4" icon="iconfont icon-xingbie" active-icon="iconfont icon-xingbienvxianxing"></vtu-switch>
    2. <vtu-switch checked="{{value}}" type="circle" color="#9596A4" icon="iconfont icon-guanbi1" active-icon="iconfont icon-xuanze1"></vtu-switch>
    4. Page({
    5.   data: {
    6.     value: true
    7.   }
    8. });
    9.

    自定义文字

    1. <vtu-switch checked="{{value}}" async type="circle" color="#9596A4" label="男" active-label="女"></vtu-switch>
    3. Page({
    4.   data: {
    5.     value: true
    6.   }
    7. });
    8.

    组件参数

    Props

    参数说明类型默认值必填
    checked绑定值Booleanfalse否
    type开关形状，circle圆形，round圆角Stringcircle否
    color关闭时背景色String#dcdfe6否
    active-color打开时背景色String#1989fa否
    size尺寸，smalldefaultStringdefault否
    async是否开启异步处理Booleanfalse否
    loading是否显示加载图标Booleanfalse否
    icon关闭时的图标String-否
    active-icon打开时的图标String-否
    label关闭时的文字String-否
    active-label打开时的文字String-否
    simple简约样式Booleanfalse否

    Events

    参数说明参数返回值
    bind:changeswitch 状态发生变化时的回调函数-新状态的值

    外部样式类

    外部样式类名说明
    v-class组件外部样式类

    Switch 开关 - 图1