vue-como-manager

1.0.8 • Public • Published

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:'&#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:[]},
	]}
];
参数名称 类型 是否必填 说明
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的值状态

Dependents (0)

Package Sidebar

Install

npm i vue-como-manager

Weekly Downloads

2

Version

1.0.8

License

ISC

Unpacked Size

2.96 MB

Total Files

6

Last publish

Collaborators

  • como20170606