vue-checkbox-count

该组件是 DropdownMenu下拉菜单 与 Checkbox复选框 的结合，特点在于在显示栏处，若多选项溢出显示区域则在最后标记其溢出个数。

该组件采用 Vue@3.4.21+ TypeScript@5.2.2 + Vite@5.2.0 + Sass@1.75.0 实现！
样式 CSS 使用 box-sizing: border-box; 模式！
开箱即用！

vue-checkbox-count 适用于 移动端， Vue3 + Typescript 环境！

Install & Use

npm install vue-checkbox-count
# or
yarn add vue-checkbox-count
# or
pnpm i vue-checkbox-count

Import and register component

Global

import { createApp } from "vue";
import App from "./App.vue";

import CheckboxCount from "vue-checkbox-count";
import "vue-checkbox-count/style.css";

const app = createApp(App);
app.use(CheckboxCount);
app.mount("#app");

Local

<script setup lang="ts">
import { CheckboxCount } from "vue-checkbox-count";
import "vue-checkbox-count/style.css";
</script>

基本使用

<script setup lang="ts">
const list = [
  {
    name: "Tom",
  },
  {
    name: "Jerry",
  },
  {
    name: "Lewis",
  },
  {
    name: "Shelly",
  },
];
const value = ref([]);
</script>
<template>
  <CheckboxCount v-model="value" :list="list" name="name"></CheckboxCount>
</template>

自定义过滤器图标

<template>
  <CheckboxCount v-model="value" :list="list" name="id">
    <template #panelFilter></template>
  </CheckboxCount>
</template>

自定义箭头图标

<template>
  <CheckboxCount v-model="value" :list="list" name="id">
    <template #panelArrow></template>
  </CheckboxCount>
</template>

自定义多选框图标

<template>
  <CheckboxCount v-model="value" :list="list" name="id">
    <template #checkboxIcon="props">
      <div class="square" :class="{ checked: props.checked }"></div>
    </template>
  </CheckboxCount>
</template>

自定义多选框内容文字

<template>
  <template #checkboxText="props">
    <div style="color: aquamarine">{{ props.listItem }}</div>
  </template>
</template>

APIs

Props

参数	说明	类型	默认值
v-model	当前选中项对应的 value	Array	[]
list	选项数组	Array	[]
disabled	是否禁用菜单	boolean	false
width	组件宽度，默认单位 px	string | number	300
height	下拉框最大高度，默认单位 px	string | number	200
color	文字及图标颜色	string	"#93acd3"
direction-down	菜单向下展开	boolean	true
duration	动画时长，单位秒，设置为 0 可以禁用动画	string | number	0.2
z-index	菜单栏 z-index 层级	string | number	10
overlay	是否显示遮罩层	boolean	true
close-on-click-overlay	是否在点击遮罩层后关闭菜单	boolean	true
close-on-click-outside	是否在点击外部元素后关闭菜单	boolean	true
placeholder-text	占位文字	string	"Select"
name	标识符，唯一的字符串	string	""
checkbox-disabled-name	标识符，根据此属性判断是否禁用复选框	string	""
max	最大选项可选数，-1 为无限制	string | number	-1

Events

事件名	说明	回调参数
change	点击选项导致 value 变化时触发	value
open	打开菜单栏时触发	-
close	关闭菜单栏时触发	-
opened	打开菜单栏且动画结束后触发	-
closed	关闭菜单栏且动画结束后触发	-

slotProps

参数	说明	类型	默认值
checked	是否选中当前项	boolean	false
listItem	当前项数据（仅#checkboxText 生效）	string	-

updateScroll 方法

通过 ref 可以获取到 Checkbox 实例并调用实例方法，详见组件实例方法

事件名	说明	回调参数
updateScroll	更新组件内部对页面滚动状态的控制	-