更新记录

2.0.1（2023-09-18）

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

2.0.0（2022-05-12）

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

1.0.0（2022-05-09）

首次发布

平台兼容性

zero-switch

一. 插件说明

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

增加 **moon** 月亮模式 ,直接实现暗黑模式切换的开关,也可以自行配色,下面有介绍

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

二. 使用方法

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

    <!-- 渐变玩法 -->
    <zero-switch class='inline_item' 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 class='inline_item' v-model="switchBtn" inactive-color="radial-gradient(circle,#000 10%, #f00000 40%,  #000 70%)" active-color="radial-gradient(circle,#000 10%, #00f260 40%,  #000 70%)" backgroundColorOff='#000000' backgroundColorOn='#000000'></zero-switch>

    <!-- 进阶渐变玩法 -->
    <zero-switch class='inline_item' v-model="switchBtn" inactive-color="radial-gradient(circle at 70% 35%, #000000 30%, #009fff 60%)" backgroundColorOff='#000000' active-color="linear-gradient(40deg,#ff0080,#ff8c00 70%)"></zero-switch>

    <!-- 提供一个没有渐变的月亮模式  :moon="true"-->
    <zero-switch class='inline_item' v-model="switchBtn" :moon="true" backgroundColorOff='#000000' backgroundColorOn="#000000"></zero-switch>

    <!-- 异步控制 -->
    <zero-switch  v-model="switchBtn" @change="handleAsync"></zero-switch>

    <!-- 禁用 -->
   <zero-switch  v-model="switchBtn" :disabled="true"></zero-switch>

    </view>
</template>
<script>
    export default {
        data() {
            return {
                switchBtn: false,
            }
        },
        methods:{
            handleAsync(e) {
                uni.showModal({
                    title: '提示',
                    content: '确定要改变开关状态吗?',
                    success: (res) => {
                        if (res.confirm) {
                            console.log('用户点击确定');
                            this.btnAsync = !this.btnAsync
                        } else if (res.cancel) {
                            console.log('用户点击取消');
                        }
                    }
                });
            }

        },
    }
</script>

三. 参数说明

四. event

插件预览:

小程序搜索: zerojs零技术

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