更新记录
1.0.0(2025-07-15) 下载此版本
首次发布
平台兼容性
uni-app(4.06)
Vue2 | Vue3 | Chrome | Safari | app-vue | app-nvue | Android | iOS | 鸿蒙 |
---|---|---|---|---|---|---|---|---|
× | √ | - | - | √ | - | - | - | - |
微信小程序 | 支付宝小程序 | 抖音小程序 | 百度小程序 | 快手小程序 | 京东小程序 | 鸿蒙元服务 | QQ小程序 | 飞书小程序 | 快应用-华为 | 快应用-联盟 |
---|---|---|---|---|---|---|---|---|---|---|
√ | - | - | - | - | - | - | - | - | - | - |
props
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
v-model | [String,Number] | '' | 选中项的值 |
list | Array | [] | 渲染的树型列表数组 |
labelKey | String | 'label' | 显示的名称属性字段 |
valueKey | String | 'value' | 绑定的属性字段 |
childrenKey | String | 'children' | 子项的属性字段 |
placeholder | String | '请选择' | tab未选择时的提示内容 |
title | String | '' | 弹窗的标题 |
popupProps | Object | {} | popup的props传参 |
tabProps | Object | {} | tab的props传参 |
events
事件名 | 说明 |
---|---|
change | 选择的内容改变时触发,返回的参数为列表的 item的value值 |
close | 弹窗关闭时触发,无参数 |
finish | 选择完成后触发,返回一个对象,包含value和label,值为以/拼接的值 |
基本使用
确保项目已经安装 scss
将树型数组传递给 list
属性,通过 ref
的方式调用 open
方法打开组件
通过 v-model
对选中的数据进行双向绑定
<template>
<div class="mt-200rpx" @click="open">
打开
</div>
<div>选择的值:{{ test1 }}</div>
<wCascader v-model="test1" title="请选择" @finish="finish" :list="list" ref="cascaRef" />
</template>
<script setup>
import wCascader from '@/components/w-cascader/w-cascader.vue'
const cascaRef = ref(null)
const test1 = ref('')
const open = () => {
cascaRef.value.open()
}
const finish = (e) => {
console.log(e)
}
const list = [
{
value: '1',
label: 'Level1',
children: [
{
value: '1-1',
label: 'Level1-1',
children: [
{
value: '1-1-1',
label: 'Level1-1-1'
}
]
},
{
value: '1-2',
label: 'Level1-2'
},
{
value: '1-3',
label: 'Level1-3'
}
]
},
{
value: '2',
label: 'Level2',
children: [
{
value: '2-1',
label: 'Level2-1',
children: [
{
value: '2-1-1',
label: 'Level2-1-1'
}
]
},
{
value: '2-2',
label: 'Level2-2',
children: [
{
value: '2-2-1',
label: 'Level2-2-1',
children: [
{
value: '2-1-1-1',
label: 'Level2-1-1',
children: [
{
value: '2-1-1-1-1',
label: 'Level2-1-1-1-1',
children: [
{
value: '2-1-1-1-1-1',
label: 'Level2-1-1-1-1-1'
}
]
}
]
}
]
}
]
}
]
}
]
</script>
popup props
通过 popupProps
传入
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
bgColor | String | '#fff' | popup的背景颜色 |
round | Boolean | true | 是否开启圆角 |
padding | Boolean | true | 是否开启padding |
overlay | Boolean | true | 是否开启遮罩 |
clickOverlayClose | Boolean | true | 是否点击遮罩能关闭弹窗 |
tab props
通过 tabProps
传入
名称 | 类型 | 默认值 | 说明 |
---|---|---|---|
bgColor | String | '#fff' | tab的背景颜色 |
color | String | '' | tab的字体颜色 |
activeColor | String | '' | tab活跃时的字体颜色 |
lineHeight | String | '' | 下划线的高度 |
lineColor | String | '' | 下划线的颜色 |