更新记录

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

• feat: 兼容vue2

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

• init

平台兼容性

lime-checkbox 复选框

• 复选框，支持v-model双向数据绑定，支持自定义样式，兼容uniapp/uniappx

安装

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

代码演示

基础演示

通过 v-model 绑定复选框的勾选状态。

<l-checkbox v-model="checked">复选框</l-checkbox>

const checked = ref(false)

选项组

通过 v-model 绑定值当前选中项的 value或name。

<l-checkbox-group v-model="checked" @change="onChange">
    <l-checkbox value="Beijing" label="北京" />
    <l-checkbox value="Shanghai" label="上海" />
    <l-checkbox value="Guangzhou" label="广州" />
    <l-checkbox value="Shenzen" label="深圳" />
</l-checkbox-group>

const checked = ref(['Beijing']);

const onChange = (e: string[]) => {
    console.log('onChange', e)
}

禁用

通过 disabled 属性禁止选项切换，在 checkbox 上设置 disabled 可以禁用单个选项。

<l-checkbox-group v-model="checked" disabled>
    <l-checkbox value="Beijing" label="北京" />
    <l-checkbox value="Shanghai" label="上海" />
    <l-checkbox value="Guangzhou" label="广州" />
    <l-checkbox value="Shenzen" label="深圳" />
</l-checkbox-group>

样式

icon 属性可选值为circle(圆) line(线) dot(点)，复选框形状。

<l-checkbox-group icon="dot">
    <l-checkbox value="Beijing" label="北京" />
    <l-checkbox value="Guangzhou" label="广州" />
    <l-checkbox value="Shenzen" label="深圳" />
</l-checkbox-group>
<l-checkbox-group icon="circle">
    <l-checkbox value="Beijing" label="北京" />
    <l-checkbox value="Guangzhou" label="广州" />
    <l-checkbox value="Shenzen" label="深圳" />
</l-checkbox-group>
<l-checkbox-group icon="line">
    <l-checkbox value="Beijing" label="北京" />
    <l-checkbox value="Guangzhou" label="广州" />
    <l-checkbox value="Shenzen" label="深圳" />
</l-checkbox-group>

自定义颜色

通过 checked-color 属性设置选中状态的图标颜色。

<l-checkbox-group checked-color="#ee0a24">
    <l-checkbox value="Beijing" label="北京" />
    <l-checkbox value="Guangzhou" label="广州" />
    <l-checkbox value="Shenzen" label="深圳" />
</l-checkbox-group>

自定义大小

通过 icon-size 属性可以自定义图标的大小。

<l-checkbox-group>
    <l-checkbox icon-size="44px" value="Beijing" label="北京" />
    <l-checkbox icon-size="34px" value="Guangzhou" label="广州" />
    <l-checkbox icon-size="24px" value="Shenzen" label="深圳" />
</l-checkbox-group>

自定义图标

通过 icon 插槽自定义图标，并通过 slotProps 判断是否为选中状态。

<l-checkbox-group>
    <l-checkbox value="Beijing" label="北京">
        <template #icon="{checked}">
            <image v-show="checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"></image>
            <image v-show="!checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png"></image>
        </template>
    </l-checkbox>
    <l-checkbox value="Guangzhou" label="广州">
        <template #icon="{checked}">
            <image v-show="checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"></image>
            <image v-show="!checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png"></image>
        </template>
    </l-checkbox>
    <l-checkbox value="Shenzen" label="深圳">
        <template #icon="{checked}">
            <image v-show="checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-active.png"></image>
            <image v-show="!checked" style="width:20px; height:20px" src="https://fastly.jsdelivr.net/npm/@vant/assets/user-inactive.png"></image>
        </template>
    </l-checkbox>
</l-checkbox-group>

限制最大可选数

通过 max 属性可以限制复选框组的最大可选数。

<l-checkbox-group :max="3">
    <l-checkbox value="Beijing" label="北京" />
    <l-checkbox value="Shanghai" label="上海" />
    <l-checkbox value="Guangzhou" label="广州" />
    <l-checkbox value="Shenzen" label="深圳" />
</l-checkbox-group>

全选与反选

通过 CheckboxGroup 实例上的 toggleAll 方法可以实现全选与反选。

<l-checkbox-group ref="checkboxGroupRef" @change="onChange" direction="vertical">
    <l-checkbox value="all" checkAll label="全选" />
    <l-checkbox value="Beijing" label="北京" />
    <l-checkbox value="Shanghai" label="上海" />
    <l-checkbox value="Guangzhou" label="广州" />
    <l-checkbox value="Shenzen" label="深圳" />
</l-checkbox-group>
<button type="primary" @click="checkAll">全选</button>
<button @click="toggleAll">反选</button>

const checkboxGroupRef = ref<LCheckboxGroupComponentPublicInstance|null>(null);
const onChange = (e: string[]) => {
    console.log('onChange', e)
}
const checkAll = () => {
    if(checkboxGroupRef.value == null) return
    checkboxGroupRef.value!.toggleAll(true)
}
const toggleAll = () => {
    if(checkboxGroupRef.value == null) return
    checkboxGroupRef.value!.toggleAll(false)
}

插件标签

• 默认 l-checkbox 为 component
• 默认 lime-checkbox 为 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

Checkbox Props

CheckboxGroup Props

Events

Radio Slots

主题定制

样式变量

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

打赏

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