vue-como-manager

• 基于elmment ui的后台管理经理,可实现后台的总体管理

安装

npm install vue-como-manager

使用

import  comoManager 	from 'vue-como-manager';
import vue-como-manager/vue-como-manager.css;
Vue.use(comoManager)

示例

<template>
	<div class="home">
		<vue-como-manager :menus="menus" console-router="Home" header-name="思智捷科技数据管理系统" :auto-router="true" console-name="系统首页" :auto-back="false" :auto-flush="false" :show-logo="false" :manager-name="manager_name" :default-theme="theme" @tag-theme="handleTagTheme" @sidebar-click="handlerSidebarClick"></vue-como-manager>
	</div>
</template>

<script>

let menus = [
	{access_id:70,access_name:'系统首页',access_icon:'&#xe99e;',router_name:'enroll_mng',router_path:'',is_nav:1,child:[
		{access_id:84,access_name:'系统管理',access_icon:'el-icon-s-platform',router_name:'enroll',router_path:'',is_nav:1,child:[
			{access_id:85,access_name:'配置管理',access_icon:'el-icon-video-play',router_name:'enroll_list',router_path:'',is_nav:1},
			{access_id:90,access_name:'文章列表',access_icon:'el-icon-video-play',router_name:'article_index',router_path:'https://www.baidu.com/',is_nav:1},
			{access_id:93,access_name:'添加文章',access_icon:'el-icon-video-play',router_name:'article_create',router_path:'',is_nav:1},
		]},
		{access_id:89,access_name:'学习管理',access_icon:'el-icon-s-platform',router_name:'study_list',router_path:'',is_nav:1},
		{access_id:99,access_name:'视频管理',access_icon:'el-icon-s-platform',router_name:'video_list',router_path:'',is_nav:1,child:[]},
	]}
];


export default {
	name: 'Home',
	components: {},
	data() {
		return {
			menus:[],
			manager_name:'szjcomo',
			theme:'red'
		};
	},
	mounted:function() {
		let that = this;
		this.menus = menus;
	},
	methods:{
		/**
		 * [handleTagTheme 处理用户选择主题事件]
		 * @author    szjcomo
		 * @date   		2020-10-17
		 * @param  {[type]}     vlaue [description]
		 * @return {[type]}           [description]
		 */
		handleTagTheme:function(vlaue) {
			this.theme = vlaue;
		},
		/**
		 * [handlerSidebarClick 如果不是自动路由 则自己处理路由事件 在此可进行权限拦截 外链跳转等等功能]
		 * @author    szjcomo
		 * @date   		2020-10-19
		 * @param  {[type]}     router_name [description]
		 * @return {[type]}                 [description]
		 */
		handlerSidebarClick:function(routerItems) {
			let that = this;
			console.log(routerItems)
		}
	}
}
</script>

/**
 menus菜单结构组成
 
*/

let menus = [
	{access_id:70,access_name:'系统首页',access_icon:'',router_name:'enroll_mng',router_path:'',is_nav:1,child:[
		{access_id:84,access_name:'系统管理',access_icon:'el-icon-s-platform',router_name:'enroll',router_path:'',is_nav:1,child:[
			{access_id:85,access_name:'配置管理',access_icon:'el-icon-video-play',router_name:'enroll_list',router_path:'',is_nav:1},
			{access_id:90,access_name:'文章列表',access_icon:'el-icon-video-play',router_name:'article_index',router_path:'https://www.baidu.com/',is_nav:1},
			{access_id:93,access_name:'添加文章',access_icon:'el-icon-video-play',router_name:'article_create',router_path:'',is_nav:1},
		]},
		{access_id:89,access_name:'学习管理',access_icon:'el-icon-s-platform',router_name:'study_list',router_path:'',is_nav:1},
		{access_id:99,access_name:'视频管理',access_icon:'el-icon-s-platform',router_name:'video_list',router_path:'',is_nav:1,child:[]},
	]}
];

参数名称	类型	是否必填	说明
access_id	int	Y	菜单节点ID
access_name	string	Y	菜单节点名称
router_name	string	Y	对应的路由名称
access_icon	string	N	节点图标 支持element ui的图标和iconfont的图标
router_path	string	N	路由地址,如何是http或者https 跳转外链
is_nav	number	N	是否导航,如果不是导航,则不在导航展示
child	array	N	子节点路由

建议都是三级节点，便于控制,如果router_path 为http或https 则进行外部跳转

events

事件名	说明	参数
tag-collapse	菜单侧栏缩放事件	function(value) (true/false)
tag-theme	用户选择主题事件	function(vlaue) value是主题名称
tag-flush	用户点击刷新事件	function()
header-active-change	用户切换头部菜单事件	function(index,item) 头部菜单索引,头部菜单值
sidebar-click	用户选择左侧导航菜单事件	function(router_item) 当前路由对象
dropdown-click	用户选择头像下操作事件	function(type) (savepwd
full-screen	用户开启全屏事件	function(value) (true
tag-back	用户点击后退事件	function()

props

参数名称	说明	类型
menus	菜单数组	array
header-name	头部名称	string (default:思智捷科技数据管理系统)
header-logo	头部logo	string (图片地址)
show-logo	是否显示logo	boolean (default:false) 如果显示logo请输入logo地址
default-theme	默认主题	string red、pink、default、orange、green、mauve、cyan default:'default'
manager-name	管理员名称	string
auto-router	自动路由	boolean (default:true) 用户点击左侧导航路由时是否自动跳转路由
auto-back	自动后退	boolean (default:true) 用户点击后退按钮是否自动后退
auto-flush	自动刷新	boolean (default:true) 用户点击刷新按钮是否自动刷新页面
console-router	整个中后台控制中心路由	string (default:manager_console) 需要在路由已经定义
console-name	控制台名称	string (default:控制台) 后台管理经理默认名称
show-theme	是否显示主题	boolean (default:true) 默认显示主题供用户选择

更新日志

2020年10月11日

• 完成组件的首次封装

2020年10月17日

• 完善组件文档，修复一些已知的bug
• 增加图标兼容性 兼容iconfont的class类型 unicode类型 兼容element ui的icon
• 修复sidebar底部留白的问题

2020年10月19日

• 增加左侧导航栏一级显示,可以不嵌套的二级菜单，整体菜单可以是二级或三级
• 增加左侧导航栏外链跳转，增加是否显示主题供用户选择，false不让用户选择
• 增加导航栏外链跳转，在自动处理路由的情况，也可以自己手动自动路由
• 修复一些已知bug

2021年1月30日

• 修复多个顶部导航来回切换的bug
• 增加主题导出功能
• 增加导航记忆功能,不再会返回0的值状态