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|logout) | | full-screen | 用户开启全屏事件 | function(value) (true|false) | | 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的值状态