vue-permission-breads-plus

1.4.3 • Public • Published

面包屑组件(vue3版)

vue3版本 | vue2版本

预览

clone项目后npm run preview即可

安装

npm i vue-permission-breads-plus
// 需要安装前置依赖组件,已安装请忽略
npm i vue-router
// 开启国际化需要安装组件,已安装请忽略
npm i vue-i18n

使用

import vuePermissionBreadsPlus from "vue-permission-breads-plus";
import "vue-permission-breads-plus/index.css";

app.use(vuePermissionBreadsPlus);

0. 可改动样式变量

  • --permis-bread-height:50px;-->面包屑高度

  • --permis-bread-bg:#fff(黑夜模式:rgb(24, 24, 28));-->面包屑背景色

  • --permis-bread-position-color:#000(黑夜模式:rgba(255, 255, 255, 0.82));-->我的位置字体颜色

  • --permis-bread-color:#8998a6;-->不可点击的路由颜色

  • --permis-bread-active-color:#000;-->可点击的路由颜色

  • --permis-bread-back-color:#000(黑夜模式:rgba(255, 255, 255, 0.82));-->返回字体颜色

1. 参数

  • menu:要显示的菜单数据-->Array;非必传;默认*[]*
// 配置项说明
{
	"name":'' // 菜单唯一值,对应路由的name,点击触发跳转时会跳转该name
	"title":'' // 普通菜单名或i18n对应的key
	//
	// 自定义标题(优先级高于标题,受i18n影响,常用例如:新增/编辑页,如果路由有权限影响,建议创建两个路由即可,如果不在乎权限可以使用该字段替换原固定标题):route.query.diyTitle
	// 补充标题(会拼到标题后面,不受i18n影响):route.query.breadsSupTit
	//
	"icon":{  // 菜单图标
		"attrs":{},
		"type":'',
		"icon":''
	}
	//
	// attrs的值会v-bind到对应dom上
	// type的值,有以下四种情况:
	// custom,此时为自定义组件,icon为组件名(!!!未内置,确保当前页面或全局已引入)
	// el,此时为el-icon,icon为图标组件名(!!!未内置,确保当前页面或全局已引入)
	// iconfont,此时为iconfont,icon为图标去掉icon-后部分(!!!未内置,确保当前页面或全局已引入)
	// 其他,此时为本地自定义图标,type为class,icon为内容
	//
	"replaceIndex":false // 隐藏当前路由的名字,只会展示父级
	"showBackBtn":true // 是否展示返回按钮,只有设置为true才展示
	"parents":'第一个父级/第二个父级/xxx' // 将平级菜单转换为父子级,父级链用/分隔
	"children":[] // 子菜单
}
  • hideMenuIcon:隐藏菜单图标-->Boolean;非必传;默认false

  • spaceIcon:间隔图标-->Object;非必传;默认*{icon:'<'}*

attrs的值会v-bind到对应dom上
type的值,有以下四种情况
// custom,此时为自定义组件,icon为组件名(!!!未内置,确保当前页面或全局已引入)
// el,此时为el-icon,icon为图标组件名(!!!未内置,确保当前页面或全局已引入)
// iconfont,此时为iconfont,icon为图标去掉icon-后部分(!!!未内置,确保当前页面或全局已引入)
// 其他,此时为本地自定义图标,type为class,icon为内容
  • i18n:标题是否开启国际化-->Boolean;非必传;默认false

  • simpleMode:简易模式,此时为行内块元素且只保留面包屑主内容-->Boolean;非必传;默认false

  • positionTitle:我的位置文字,内容受i18n影响-->String;非必传;默认*'我的位置'*

  • backTitle:返回文字,内容受i18n影响-->String;非必传;默认*'返回'*

  • backIconPosition:返回图标的位置,校验变量只能为'left'/'right'-->String;非必传;默认*'left'*

  • backBtn:返回图标-->Object;非必传;默认*{}*

attrs的值会v-bind到对应dom上
type的值,有以下四种情况
// custom,此时为自定义组件,icon为组件名(!!!未内置,确保当前页面或全局已引入)
// el,此时为el-icon,icon为图标组件名(!!!未内置,确保当前页面或全局已引入)
// iconfont,此时为iconfont,icon为图标去掉icon-后部分(!!!未内置,确保当前页面或全局已引入)
// 其他,此时为本地自定义图标,type为class,icon为内容

更多vue3组件

自定义右键菜单 | 拖拽卡片布局组件 | 可拖拽菜单 | echarts组件 | 基于el-menu的菜单组件 | 面包屑组件 | 滑动拼图 | 工作日历 | 多页签组件 | uEditor | wangEditor | 年密度组件

Package Sidebar

Install

npm i vue-permission-breads-plus

Weekly Downloads

3

Version

1.4.3

License

MIT

Unpacked Size

19.7 kB

Total Files

6

Last publish

Collaborators

  • a1106728884