更新记录

0.1.3（2025-08-31） 下载此版本

• chore: 更新文档

0.1.2（2025-05-27） 下载此版本

• fix: 修复uniapp缺少inject

0.1.1（2025-05-22） 下载此版本

• fix: 修复uniappx app 设置背景色问题

平台兼容性

uni-app(4.74)

uni-app x(4.75)

其他

lime-switch 开关

一个功能丰富的开关组件，用于控制某个功能的开启和关闭状态。组件支持多种自定义选项，包括禁用状态、加载状态、形状选择、占位内容、自定义尺寸和颜色等，兼容uniapp/uniappx。

插件依赖：lime-style、lime-loading、lime-shared

文档链接

📚 组件详细文档请访问以下站点：

• 开关文档 - 站点1
• 开关文档 - 站点2
• 开关文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-switch
2. 插件市场导入即可，首次使用可能需要重新编译
3. 在页面中使用l-switch组件（组件）或lime-switch（演示）

代码演示

基础使用

通过 v-model 绑定开关的选中状态，true 表示开，false 表示关。

<l-switch v-model="checked"></l-switch>

const checked = ref(false)

禁用状态

通过 disabled 属性来禁用开关，禁用状态下开关不可点击。

<l-switch v-model="checked" disabled></l-switch>

加载状态

通过 loading 属性设置开关为加载状态，加载状态下开关不可点击。

<l-switch v-model="checked" loading></l-switch>

形状选择

通过 round 属性设置开关形状，true 为圆形（默认），false 为方形。

<l-switch :round="false"></l-switch>
<l-switch></l-switch>

占位内容

通过 placeholder 属性可设置占位内容，格式为[开启时内容，关闭时内容]。

<l-switch :defaultValue="true" :placeholder="['人生得意须尽欢', '莫使金樽空对月']"></l-switch>

自定义尺寸

通过 dotSize、height 和 width 属性自定义开关尺寸：

• dotSize：按钮的尺寸
• height：开关的高度
• width：开关的最小宽度

<l-switch dotSize="14px" height="18px" width="32px"></l-switch>
<l-switch dotSize="14px" height="22px" width="40px"></l-switch>
<l-switch dotSize="18px" height="26px" width="48px"></l-switch>

自定义颜色

通过 checkedColor 和 uncheckedColor 属性自定义开关颜色：

• checkedColor：打开时的背景色
• uncheckedColor：关闭时的背景色

<l-switch checkedColor="#ffb300" uncheckedColor="#33c471" 
         :placeholder="['长风破浪会有时', '直挂云帆济沧海']"></l-switch>

自定义图标

通过icon插槽自定义按钮上的图标，插槽参数checked表示当前开关状态。

<l-switch>
    <template #icon="{checked}">
        <text style="font-size:13px" v-show="checked">开</text>
        <text style="font-size:13px" v-show="!checked">关</text>
    </template>
</l-switch>

快速预览

导入插件后，可以直接使用以下标签查看演示效果：

<!-- 代码位于 uni_modules/lime-switch/components/lime-switch -->
<lime-switch />

插件标签说明

• 默认 l-switch 为组件标签
• 默认 lime-switch 为演示标签

Vue2使用说明

插件使用了composition-api，如果你希望在Vue2中使用，请按官方教程vue-composition-api配置。

关键代码是在main.js中的Vue2部分添加以下代码：

// vue2
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

API文档

Props

Events

Slots

主题定制

组件提供了下列 CSS 变量，可用于自定义样式。

支持与赞赏

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助	微信赞助