switch

概述

开关选择器。

使用限制

子组件

不支持

属性

除了支持 通用属性以外，还支持如下属性。

样式

支持active伪类。除了支持 通用样式以外，还支持如下样式。

事件

除了支持 通用事件 以外，还支持如下事件。

示例代码

<template>
    <div class="container">
        <div class="page-title-wrap">
            <text class="page-title">{{componentName}}</text>
        </div>
        <div class="item-container">
            <text class="item-title">默认样式</text>
            <div class="item-content">
                <switch checked="true" class="switch"></switch>
                <switch checked="false" class="switch"></switch>
            </div>
        </div>
        <div class="item-container">
            <text class="item-title">推荐展示样式</text>
            <div class="switch-wrap">
                <div class="switch-content border-bottom">
                    <text class="label">开启中</text>
                    <switch checked="true" class="switch"></switch>
                </div>
                <div class="switch-content">
                    <text class="label">关闭中</text>
                    <switch checked="false" class="switch"></switch>
                </div>
            </div>
        </div>
        <div class="item-container">
            <text class="item-title">定制样式</text>
            <div class="switch-wrap">
                <div class="switch-content border-bottom">
                    <text class="label">修改滑块颜色</text>
                    <switch checked="true" style="thumb-color:#ff0000" class="switch"></switch>
                </div>
                <div class="switch-content">
                    <text class="label">修改滑轨颜色</text>
                    <switch class="switch" style="track-color:#00FF00"></switch>
                </div>
                <div class="switch-content">
                    <text class="label">同时修改滑块和滑轨颜色</text>
                    <switch class="switch" style="thumb-color:#13ca22;track-color:#ff00ff"></switch>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
    export default {
        private: {
            componentName: 'switch'
        }
    }
</script>
<style>
    .container {
        flex: 1;
        flex-direction: column;
    }
    .page-title-wrap {
        padding-top: 50px;
        padding-bottom: 80px;
        justify-content: center;
    }
    .page-title {
        padding-top: 30px;
        padding-bottom: 30px;
        padding-left: 40px;
        padding-right: 40px;
        border-color: #bbbbbb;
        color: #bbbbbb;
        border-bottom-width: 2px;
    }
    .item-container {
        margin-top: 20px;
        margin-bottom: 30px;
        flex-direction: column;
    }
    .item-title {
        padding-left: 30px;
        padding-bottom: 30px;
        padding-top: 30px;
        border-bottom-width: 1px;
        border-color: #bbbbbb;
        color: #aaaaaa;
    }
    .item-content {
        background-color: #ffffff;
        border-bottom-width: 1px;
        border-color: #bbbbbb;
        padding-left: 30px;
        padding-right: 30px;
    }
    .switch-wrap {
        border-color: #bbbbbb;
        padding-left: 40px;
        border-bottom-width: 1px;
        border-top-width: 1px;
        background-color: #ffffff;
        flex-direction: column;
    }
    .switch {
        margin-right: 30px;
    }
    .switch-content {
        padding-right: 50px;
    }
    .label {
        flex: 1;
        height: 100px;
    }
    .border-bottom {
        border-color: #bbbbbb;
        border-bottom-width: 1px;
    }
</style>

效果图如下：

版本更新说明

相关链接

案例

如何通过对话框控制Switch组件开关