更新记录

0.0.3（2025-01-07） 下载此版本

• fix: 双向绑定不生效

0.0.2（2024-12-18） 下载此版本

• feat: 兼容vue2

0.0.1（2024-12-18） 下载此版本

• init

平台兼容性

lime-switch 开关

• 用于控制某个功能的开启和关闭。可嵌套内容、禁用以及颜色配置，兼容uniapp/uniappx
• 插件依赖lime-style,lime-loading,lime-shared,不喜勿下

安装

在插件市场导入即可，首次使用可能需要重新编译

代码演示

基础使用

通过 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 属性设置为false可以设为方形。

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

占位符

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

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

自定义尺寸

通过 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表示关闭时的背景色。

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

自定义图标

可通过icon插槽设置按钮上的图标

<l-switch>
    <template #icon="{checked}">
        <text>🤔</text>
    </template>
</l-switch>
<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>

插件标签

• 默认 l-switch 为 component
• 默认 lime-switch 为 demo

• 关于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 变量，可用于自定义样式)。uvue app无效。

打赏

如果你觉得本插件，解决了你的问题，赠人玫瑰，手留余香。