一. 介绍
在 uniapp 开发中，常常会遇到需要使用开关按钮的场景。而 zero-switch 就是一个看似简单的 uniapp 开关小组件，它可以轻松实现开关按钮的功能。不过，你真的用明白了吗？简单配置一下，你也可以快速实现一个极其个性化的开关，让我们来深入探讨一下这个小组件吧！
- 你看到的和你以为的可能是这样的
- 也许它还可以是这样的
- 或者是，这样的
二. 插件下载地址： zero-switch
三. 插件使用方法
插件市场中点击 下载插件并导入HBuilderX, 插件导入项目中的 uni_modules 文件夹后直接使用即可
<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>
三. 参数说明
| 参数 | 类型 | 默认值 | 描述 |
|---|---|---|---|
| value | Boolean | false | 开关状态 |
| activeColor | String | #1EABFA | 开关开启时颜色 |
| inactiveColor | String | #cccccc | 开关关闭时颜色 |
| backgroundColorOn | String | #ffffff | 开关开启背景颜色 |
| backgroundColorOff | String | #ffffff | 开关关闭背景颜色 |
| borderColorOn | String | #eeeeee | 开关开启边框颜色 |
| borderColorOff | String | #eeeeee | 开关关闭边框颜色 |
| showText | Boolean | false | 是否显示文字(只能显示一个字) |
| textOn | String | 开 | 开关开启时的文字 |
| textOff | String | 关 | 开关关闭时的文字 |
| size | Number | 26 | 开关大小 |
| disabled | Boolean | false | 是否禁用 |
| stopChange | Boolean | false | 是否需要异步控制 |
| moon | Boolean | false | 月亮模式,此时禁用文字,建议把背景色改成黑色 backgroundColorOff='#000000' backgroundColorOn="#000000" |
五. event
| 参数 | 返回值 |
|---|---|
| change | value |
六. 小小总结一下
官方的switch太难用了，稍微有点ui要求的都用不上，所以只能自己动手了。除了基本的开关功能外，zero-switch还具有高度定制化的配色能力。你可以通过设置一些属性来改变开关按钮的外观，使其更符合你的设计需求。我不是专业的ui，我只是搬砖的，更多配色方案请自行探索。发现那种适用于绝大多数场景也项目的，作者会考虑用于默认配色。
