更新记录

2.0.2（2026-05-22） 下载此版本

增加loading状态,多文字适配

2.0.1（2023-09-18） 下载此版本

兼容vue2,vue3,新增月亮模式使用案例,或者懒人一键月亮模式

2.0.0（2022-05-12） 下载此版本

重构,已使用的请及时更新,传参字段也需更改

平台兼容性

uni-app(5.0)

uni-app x(5.0)

zero-switch

一. 插件说明

个人仅测试与vue2,vue3,微信小程序，其他平台请自行测试

zero-switch-看似简单的一个uniapp开关小组件，你真的用明白了吗？

二. 使用方法

<template>
    <view class="container">
        <!-- 默认用法 -->
        <zero-switch v-model="switchBtn"></zero-switch>

        <!-- 单字文字 -->
        <zero-switch v-model="switchBtn" :showText="true" textOn="是" textOff="否"></zero-switch>

        <!-- 多文字，组件会自动加宽并把文字显示在圆点对侧 -->
        <zero-switch
            v-model="switchBtn"
            :showText="true"
            textOn="已开启"
            textOff="已关闭"
        ></zero-switch>

        <!-- 异步控制，loading 时圆点内显示加载状态，并且不可重复点击 -->
        <zero-switch
            v-model="switchBtn"
            :stopChange="true"
            :loading="submitting"
            @change="handleAsync"
        ></zero-switch>

        <!-- 自定义颜色 -->
        <zero-switch
            v-model="switchBtn"
            backgroundColorOff="#f8fafc"
            backgroundColorOn="#dcfce7"
            borderColorOff="#cbd5e1"
            borderColorOn="#86efac"
            activeColor="#16a34a"
            inactiveColor="#64748b"
        ></zero-switch>

        <!-- 渐变玩法 -->
        <zero-switch
            v-model="switchBtn"
            inactive-color="radial-gradient(circle,#fff 10%, #ccc 100%)"
            active-color="radial-gradient(circle,#fff 10%, #007aff 100%)"
        ></zero-switch>

        <!-- 禁用 -->
        <zero-switch v-model="switchBtn" :disabled="true"></zero-switch>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                switchBtn: false,
                submitting: false,
            }
        },
        methods:{
            handleAsync(nextValue) {
                uni.showModal({
                    title: '提示',
                    content: '确定要改变开关状态吗?',
                    success: (res) => {
                        if (res.confirm) {
                            this.submitting = true
                            setTimeout(() => {
                                this.switchBtn = nextValue
                                this.submitting = false
                            }, 800)
                        }
                    }
                });
            }

        },
    }
</script>

三. 参数说明

四. 文字显示规则

• showText=true 时显示开关内文字。
• 单字文案会使用更大的字号，适合 是 / 否、开 / 关。
• 多字文案会自动加宽开关，并把文字显示在圆点对侧，适合 已开启 / 已关闭、同步中 / 等待中。
• 多文字建议控制在 2-4 个中文字符内，过长会影响开关的紧凑性。

五. event

插件预览:

预览的小程序不一定能及时更新当前插件