介绍

由于很多移动端组件库例如vant、nutui、cube等并不支持多选的级联选择器，于是一个基于vue3开发的支持多选的移动端级联选择器诞生了。

预览

https://chuckchen88.github.io/chuck-cascader/

安装

$ npm i chuck-cascader@latest

使用

# 局部使用 ChuckSearch, CheckBox, RadioBox 这三个组件也暴露出来了 按需使用
$ import { ChuckCascader } from 'chuck-cascader';
$ import "chuck-cascader/css"; # 注意需要引入css

# 全局注册
$ import ChuckCascader from 'chuck-cascader';
$ import "chuck-cascader/css"; # 注意需要引入css
$ Vue.use(ChuckCascader)

ChuckCascader参数说明

|参数|类型|是否必传|说明| |-|-|-|-| |v-model|string|string[]|否|多选时是数组,单选时是字符串| |options|CascaderOption[]|是|选项| |multiple|boolean|否|是否多选，默认false| |color|string|否|主题颜色，默认'#1989fa'| |title|string|否|下拉标题，默认'请选择'| |height|string|否|下拉选项高度，默认'250px'| |zIndex|number|否|下拉选项的zIndex，默认2023| |filterable|boolean|否|是否支持搜索，默认true|

CascaderOption[]

interface CascaderOption{
    label: string
    value: string | number
    children?: CascaderOption[]
    disabled?: boolean
}

事件

|事件名称|类型|默认值|说明| |-|-|-|-| |on-update:value|(value: string | number | Array<string | number> | null, option: CascaderOption | Array<CascaderOption | null> | null) => void|undefined|值改变时执行的回调| |on-confirm|() => void|undefined|点击了确认回调|

异步展开或收起

const cascaderRef = ref<any>(null)
// 展开
cascaderRef.value.expand(true)
// 收起
cascaderRef.value.expand(false)

vue3中使用示例

<script setup lang="ts">
import { ChuckCascader, ChuckSearch, CheckBox, RadioBox } from 'chuck-cascader';
import "chuck-cascader/css";
import { ref } from 'vue'
interface CascaderOption{
    label: string
    value: string | number
    disabled?: boolean
    children?: CascaderOption[]
}
const value = ref([]) // 双向绑定
const options = ref<CascaderOption[]>([]) // 选项

function getOptions (depth = 3, iterator = 1, prefix = '') {
  const length = 12
  const options: CascaderOption[] = []
  for (let i = 1; i <= length; ++i) {
    if (iterator === 1) {
      options.push({
        value: `v-${i}`,
        label: `l-${i}`,
        disabled: i % 5 === 0,
        children: getOptions(depth, iterator + 1, '' + String(i))
      })
    } else if (iterator === depth) {
      options.push({
        value: `v-${prefix}-${i}`,
        label: `l-${prefix}-${i}`,
        disabled: i % 5 === 0
      })
    } else {
      options.push({
        value: `v-${prefix}-${i}`,
        label: `l-${prefix}-${i}`,
        disabled: i % 5 === 0,
        children: getOptions(depth, iterator + 1, `${prefix}-${i}`)
      })
    }
  }
  return options
}

options.value = getOptions()

const onUpdateValue = (value: string[], options: CascaderOption[]) => {
  console.log(value) // 选中的
  console.log(options) // 选中的
}
const confirm = () => {
  console.log('点击了确认')
}
const filterValue = ref('') // 双向绑定
const checked = ref(true)
</script>

<template>
  搜索框：
  <ChuckSearch v-model="filterValue" />
  CheckBox:
  <CheckBox color="#1989fa" v-model="checked" :childChecked="false" :disabled="false" @update:value="(_e: any) => {}" />
  RadioBox:
  <RadioBox color="#1989fa" v-model="checked" :disabled="false" :showNext="true" /> 
  级联：
  <ChuckCascader
    :options="options"
    :multiple="true"
    color="#1989fa"
    title="请选择"
    v-model="value"
    @update:value="onUpdateValue"
    height="250px"
    :zIndex="9999"
    :filterable="true"
    @confirm="confirm"
  />
</template>

<style lang="less">
  body{
    margin:0;
    padding:0;
  }
</style>