LimeSwitch 开关

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

安装

导入即可，首次使用可能需要重新编译

文档

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 属性设置为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

参数	说明	类型	默认值
v-model	开关选中状态	boolean	false
value	开关选中状态	boolean	-
defaultValue	开关选中状态	boolean	-
disabled	是否禁用	boolean	false
loading	是否加载	boolean	false
round	是否为圆形	boolean	true
rubberBand	按钮是否有橡皮筋效果	boolean	true
placeholder	占位内容，[开启时内容，关闭时内容]。	string[]	[]
fontSize	字体大小	string	-
width	开关最小宽度	string	-
height	开关高度	string	-
height	开关高度	string	-
dotSize	按钮尺寸	string	-
dotPressedSize	设置rubberBand后，按下按钮尺寸	string	-
checkedColor	打开时的背景色	string	-
disabledColor	禁用背景色	string	-
checkedDisabledColor	打开禁用背景色	string	-
uncheckedColor	关闭背景色	string	-

Events

事件名	说明	回调参数
change	开关状态切换时触发	currentValue: boolean

Slots

名称	说明
icon	按钮图标插槽

主题定制

样式变量

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

名称	默认值	描述
--l-switch-checked-color:	$primary-color	-
--l-switch-checked-disabled-color:	$primary-color-3	-
--l-switch-unchecked-color:	$gray-4	-
--l-switch-unchecked-disabled-color:	$gray-2	-
--l-switch-width:	90rpx	-
--l-switch-height:	56rpx	-
--l-switch-radius:	99px	-
--l-switch-dot-bg-color:	white	-
--l-switch-dot-size:	44rpx	-
--l-switch-dot-shadow:	$shadow-1	-
--l-switch-dot-radius:	99px	-
--l-swtich-font-size:	28rpx	-
--l-swtich-text-color:	white	-

打赏

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

源代码

组件源码