0.1.2 • Published 2 years ago
bread-tool v0.1.2
已实现功能
- 通过配置进行面包屑关系绑定
- 可以动态修改名称,显示隐藏,以及跳转路径
使用步骤
// 安装
npm i bread-tool
// 使用
// 配置文件(根据具体路径引用)
import breadTree from '../src/plugin/breadTree'
import bread from "bread-tool";
<bread ref="breadRef" :breadTree="breadTree"></bread>
export default {
components: {
bread,
},
mounted() {
// 建议储存组件引用,方便后续调用组件方法
this.$store.commit("setBreadRef", this.$refs.breadRef);
...
},
data() {
return {
breadTree,
...
};
},
};
配置文件
const breadTree = [
{
name: "aaa", // 面包屑显示名字
path: "/aaa", // 对应的路由路径,只能是完整路径,也就是访问此页面$route.path的值(也是唯一主键不可重复,不可动态修改)
isShow: true, // 显示或隐藏此级面包屑(不配置默认值为true)
fullPath: "", // 此属性为空时,跳转路径为path,不为空时此属性为跳转路径(方便后续业务添加参数,或自定义等)(不配置默认为空)
children: [
{
name: "bbb",
path: "/bbb",
children: [
{
name: "eee",
path: "/eee",
},
],
},
],
},
{
name: "ccc",
path: "/ccc",
children: [
{
name: "ddd",
path: "/ddd/:id", // 带路由参数的情况
},
],
},
];
export default breadTree;
组件方法
方法名 | 入参 | 出参 | 说明 |
---|---|---|---|
setPathName | path:String 路由路径,name:String 名称 | - | 设置对应面包屑的名称 |
setPathShow | path:String 路由路径,isShow:String 显示标识 | - | 设置对应面包屑的显示 |
setFullPath | path:String 路由路径,fullPath:String 自定义跳转路径 | - | 设置对应面包屑的自定义跳转路径 |