Vue-role基于 Vue 的可视化权限管理组件
项目介绍
Vue-role 是基于 Vue 的可视化权限管理库,让开发定义权限简单,让非技术人员分配权限更简单
使用说明
按 ctr+/ 开启权限管理模式,所有可定义权限的位置都会出现(红,绿,黄)点,点击点点分配权限,右上角的红点可以定义当前页面(路由)的访问权限,右上角可以模拟某个角色查看他的可访问视图
有图有真像
颜色说明 红色已非配过权限; 绿色没分配过权限,任何人可查看; 黄色没分配过权限,只有超管可查看
在线体验
https://tengzhinei.gitee.io/vue-role/example/index.html
DEMO 使用了 VUE-RAP 框架; Vue-rap 可以在不使用大量前端工具(如npm,webpack,Browserify等)的情况下快速构建基于Vue的秒速打开边用边下载的流应用(单页面应用)
VUE-RAP 地址:https://gitee.com/tengzhinei/Vue-rap
安装教程
引入 vue-role.css文件
在 vue 后引入 vue-role.js文件就可以了
开始使用
//权限定义 只需要后台返回编辑过的权限就可以了 var roles={ 'user.add':[1,2], 'user.edit':[2,3]}; //配置 VueRole.config({ role: 1, //当前用户的 权限 super_role: 1, //超级用户的权限 roles:roles, //权限数据 role_names: {'1': '超管', '2': '技术', '3': '小编'}, //权限名称 lang:{ //语言包可以为空 title:'权限设置', sys_role:'系统设定,不可编辑', f:'不选择,除了超管没有其他角色可以访问', f_not:'不选择,任何角色都可以访问', cancel:'取消', submit:'提交', imitate:'模拟', close:'关闭' } }); //权限编辑时保存 VueRole.onRoleEdit(function (action, roles, close) { //测试时直接权限直接存在本地缓存 localStorage中 localStorage.setItem('vue_role@' + action, JSON.stringify(roles)); close(); });
API
指令 v-role 说明
指令 | 说明 |
---|---|
v-role.1.2 | 权限为 1或者 2的可以查看 ,系统设定不可修改 |
v-role:a | 拥有 (资源)a 的可以查看 |
v-role:a.b | 拥有 (资源)a.b 的可以查看 |
v-role:a.b.$f | f标明如果不设定权限,只有超管可以查看,没有f标明如果不设定权限,只有超管可以查看,没有f标明 如果不设定权限,任何人都可以查看 |
v-role:a.b.$h | $h 标明 编辑模式下 不显示 可编辑权限的点点 |
方法
指令 | 说明 |
---|---|
VueRole.config(config) | 设置配置项 |
VueRole.onRoleEdit(function(action, roles, close)) | 监听 编辑事件 注意使用 close() 关闭编辑框 |
VueRole.onPageNoRole(function()) | 监听 如果当前页面没有权限访问的处理 默认为 弹框(alert),并后退 |
评论
vue-qslib基于 vue 的问卷调查组件
vue-qslib,基于vue开发的问卷调查组件主要题型包括:单选题,单选填空题,多选题,段落题,比重题,矩阵多选,矩阵单选,矩阵填空,判断矩阵,排序题,选择排序题,大小码。使用说明将编译后的js文件
vue-qslib基于 vue 的问卷调查组件
0
twtree基于 vue 的树形组件
基于vue的树形组件。主要特色支持复选框可异步加载拖放操作右键菜单按钮自定义外观文档文档开始使用npmnpminstalltwtree--save引入importTWTreefrom'twtree'示
twtree基于 vue 的树形组件
0
基于jfinal2.2的权限管理系统
jfinal是由jfinal2.2+freemarker+easyui写的一个后台管理系统,参考了jty等一些优秀的开源项目,实现了一个基础的后台管理系统。在线访问:http://moriiy.wic
基于jfinal2.2的权限管理系统
0
KUI for Vue基于 Vue 2.0 的 UI 组件库
KUIforVue基于VUE2.x开发,在追求完美视觉体验的同时也保证了其性能高效。欢迎批评、指正、吐槽、Star和捐助 Docs: http://k-ui.cnBlog: http://chuchu
KUI for Vue基于 Vue 2.0 的 UI 组件库
0
KUI for Vue基于 Vue 2.0 的 UI 组件库
KUI for Vue基于 VUE 2.x 开发,在追求完美视觉体验的同时也保证了其性能高效。欢迎批
KUI for Vue基于 Vue 2.0 的 UI 组件库
0
OpenAnts基于 ElementUI 的 VUE 组件库
OpenAnts 是基于 ElementUI 的 VUE 组件库。截图安装npm install o
OpenAnts基于 ElementUI 的 VUE 组件库
0