Norwegian Parcel Mail

    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的值状态

    Install

    npm i vue-como-manager

    DownloadsWeekly Downloads

    2

    Version

    1.0.8

    License

    ISC

    Unpacked Size

    2.96 MB

    Total Files

    6

    Last publish

    Collaborators

    • como20170606