更新记录

1.0.2(2024-06-13)

修复子项无法滚动的问题

修复最后一项children为空数组时还会继续显示tab的问题

1.0.1(2024-06-12)

更新了回显,通过双向绑定的方式进行回显

1.0.0(2024-06-12)

首次发布

查看更多

平台兼容性

Vue2 Vue3
×
App 快应用 微信小程序 支付宝小程序 百度小程序 字节小程序 QQ小程序
app-vue × × × × ×
钉钉小程序 快手小程序 飞书小程序 京东小程序
× × × ×
H5-Safari Android Browser 微信浏览器(Android) QQ浏览器(Android) Chrome IE Edge Firefox PC-Safari
× × × × ×

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 '' 下划线的颜色

隐私、权限声明

1. 本插件需要申请的系统权限列表:

2. 本插件采集的数据、发送的服务器地址、以及数据用途说明:

3. 本插件是否包含广告,如包含需详细说明广告表达方式、展示频率:

许可协议

MIT协议

暂无用户评论。

使用中有什么不明白的地方,就向插件作者提问吧~ 我要提问