更新记录

0.1.3（2025-10-21） 下载此版本

• fix: 修复没有默认icon

0.1.2（2025-10-10） 下载此版本

• fix: 修复uniappx报错问题

0.1.1（2025-10-09） 下载此版本

• chore: 去掉多余的注释

平台兼容性

uni-app(4.73)

uni-app x(4.75)

其他

lime-checkbox 复选框

一个功能丰富的复选框组件，支持v-model双向数据绑定，提供多种自定义样式选项，包括不同形状、颜色和大小的复选框。组件支持单独使用和组合使用，可以实现全选、限制最大可选数等功能，兼容uniapp/uniappx。

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

文档链接

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

• 复选框文档 - 站点1
• 复选框文档 - 站点2
• 复选框文档 - 站点3

安装方法

1. 在uni-app插件市场中搜索并导入lime-checkbox
2. 首次导入可能需要重新编译
3. 在页面中使用l-checkbox和l-checkbox-group组件

代码演示

基础演示

通过 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)
}

快速预览

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

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

插件标签说明

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

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

Checkbox Slots

主题定制

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

支持与赞赏

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

支付宝赞助	微信赞助