更新记录

1.0.4(2025-04-10) 下载此版本

新增parentKey、label、value、children属性

1.0.3(2025-04-10) 下载此版本

优化

1.0.2(2025-04-10) 下载此版本

优化

查看更多

平台兼容性

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

mosowe-cascade

uniapp/uni_modules组件 ::: tip 支持本地,懒加载
依赖组件:uni-popup :::

兼容性

平台 android ios 微信小程序 H5
兼容

props

属性 类型 说明 默认
modelValue listItem[] 已选值 -
list listItem[] 展示列表 -
popupTitle string 级联弹框标题 请选择
placeholder string 未选择时文本框占位文案 请选择
local boolean 本地数据,非懒加载 false
parentKey string 父级节点 'pid'
label string 文案字段 'text'
value string 值字段 'value'
children string 子集字段 'children'

listItem

属性 类型 说明
text string 选项文案
value string | number
pid string | number | null | undefined 父级 id
isLeaf boolean 是否叶子节点
children listItem[] 子集列表

emits

事件名 说明
confirm 点击弹框确定的时候触发,参数为当前已选值:(data:listItem[])=>void
nodeClick 节点点击,三个参数,一个当前节点 node,当前层级值 level,回调函数 callBack,回调函数接收一个数组用于下一级展示:(node: listItem | null, level: number, callBack: (data:listItem[]) => void) => void

slots

插槽名 说明
default 文本域插槽

示例代码

<template>
  <view class="title">懒加载,无默认数据</view>
  <mosowe-cascade
    v-model="noDefaultValue"
    :list="firstList"
    @nodeClick="nodeClick"
    @confirm="confirm"></mosowe-cascade>
</template>

<script setup lang="ts">
import { ref } from 'vue';
// 无默认数据
const noDefaultValue = ref([]);
const firstList = ref([
  {
    text: '初始-1',
    value: 1,
    pid: 0,
    isLeaf: false,
    children: []
  },
  {
    text: '初始-2',
    value: 2,
    pid: 0,
    isLeaf: false,
    children: []
  }
]);
const nodeClick = (e: any, level: number, callBack: (data: any[]) => void) => {
  setTimeout(() => {
    const list = Array.from({ length: 20 }).map((item: any, index: number) => {
      return {
        text: `${e.text}(${index})-${level}`,
        value: e.value + '-' + index,
        isLeaf: level >= 2 ? true : false,
        pid: e.value,
        children: []
      };
    });
    callBack(list);
  }, 1000);
};
const confirm = (data) => {
  console.log(data);
};
</script>

隐私、权限声明

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

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

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

许可协议

MIT协议

暂无用户评论。

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