更新记录
1.0.0(2024-06-10)
下载此版本
初始化
平台兼容性
App |
快应用 |
微信小程序 |
支付宝小程序 |
百度小程序 |
字节小程序 |
QQ小程序 |
app-vue |
× |
× |
× |
× |
× |
× |
钉钉小程序 |
快手小程序 |
飞书小程序 |
京东小程序 |
× |
× |
× |
× |
H5-Safari |
Android Browser |
微信浏览器(Android) |
QQ浏览器(Android) |
Chrome |
IE |
Edge |
Firefox |
PC-Safari |
× |
× |
× |
× |
√ |
× |
× |
× |
× |
long-breadcrumb-menu
安装方式
本组件符合easycom规范,HBuilderX 2.5.5
起,只需将本组件导入项目,在页面template
中即可直接使用,无需在页面中import
和注册components
。
如需通过npm
方式使用uni-ui
组件,另见文档:https://ext.dcloud.net.cn/plugin?id=55
基本用法
在 template
中使用组件
该插件依赖 uni-breadcrumb 、uni-row
<long-breadcrumb-menu :menuData="menuData" :select=""></long-breadcrumb-menu>
import LongBreadcrumbMenu from "@/uni_modules/long-breadcrumb-menu/components/long-breadcrumb-menu/long-breadcrumb-menu.vue"
export default {
data() {
return {
selectTreeId: "",
selectMenuName: "",
menuData:[
{
treeId:"01",
groupName:"文件夹1",
children:[
{
treeId:"0101",
groupName:"文件夹1_1",
children:[
{
treeId:"010101",
groupName:"文件夹1_1_1"
}
]
},
{
treeId:"0102",
groupName:"文件夹1_2"
},
{
treeId:"0103",
groupName:"文件夹1_3"
},
]
},
{
treeId:"02",
groupName:"文件夹2",
chidren:[
{
treeId:"0201",
groupName:"文件夹2-1"
},
{
treeId:"0201",
groupName:"文件夹2-1"
}
]
}
]
}
},
methods: {
:function(item) {
this.selectTreeId = item.treeId;
this.selectMenuName = item.groupName;
}
}
}
API
LongBreadcrumbMenu Props
属性名 |
类型 |
默认值 |
说明 |
menuData |
Array |
无 |
菜单数据 树结构 , 显示名称:groupName, 键 treeId, 下级树 children |
select |
Function |
|
点击菜单回调,传入参数 树结构节点 |