项目介绍
Vue-role v0.1.0 正式发布,Vue-role 是基于 Vue 的可视化权限管理库,让开发定义权限简单,让非技术人员分配权限更简单,和传统的树形权限结构说 no
V0.1.0功能
1.任何 ctr+/ 一键开启权限编辑模式
2.支持对页面的按钮, div 等任何可视化组件进行定义权限
3.支持对当前页面定义权限
4.支持模拟不同权限查看访问效果
有图有真像
颜色说明 红色已非配过权限; 绿色没分配过权限,任何人可查看; 黄色没分配过权限,只有超管可查看
在线体验
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),并后退 |
相关推荐
Neo4j Vue 安装步骤 克隆或下载该库到本地 下载neo4j并安装到本地,启动neo4j服务 进入到该工程的根目录,输入命令:npm run update进行npm包的导入 使用命令:npm run dev启动该工程 默认端口是:8081 neo4j账号...
Neo4j Vue 安装步骤 克隆或下载该库到本地 下载neo4j并安装到本地,启动neo4j服务 进入到该工程的根目录,输入命令:npm run update进行npm包的导入 使用命令:npm run dev启动该工程 默认端口是:8081 neo4j账号...
vue-spa:vue+vue-router+axios+vuex+vux快速成型移动端项目,直接使用。.zip
测试 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 整理和修复文件 npm run lint 自定义配置 请参阅。
博客地址:...由于发现在我的博客通过点击GitHub链接,会跳转到别人盗用的下载地址,而且还是VIP收费,所以自己把代码上传CSDN资源上。 【因为缺分,所以收5个积分,免费可以到Github上下载最新的代码】
kuan-vue-waterfall (vue3.0 瀑布插件)不需要设置内容高度,间隙默认 0注意:如果没有图片需要延迟获取元素尺寸的话,可以设置delay=false,等待图片加载后显示元素体验比较差安装yarn add kuan-vue-waterfall# ...
vue3-element-admin 是【有来开源组织】基于 Vue3 + Vite4 + TypeScript + Element-Plus + Pinia 等前端主流技术栈从0到1搭建后台管理系统模板(前后端开源)。 后端是基于 Spring Boot 3.0 、Spring Security 6.0 ...
vue-next-drag-demo项目设置npm install编译和热重装以进行开发npm run serve编译并最小化生产npm run build自定义配置请参阅。
项目估计已经跑不起来了,如有需要可自行使用vue-cli创建新项目,然后导入src内部得内容,再相应得安装依赖包即可 Build Setup # install dependencies npm install # serve with hot reload at localhost:8080 npm ...
基于Vue-CLI 3的vue样式化组件示例 项目设置 使用Vue-CLI 3创建Vue项目 vue create vue-styled-components-example cd vue-styled-components-example 添加vue样式的组件 yarn add vue-styled-components 用法 基本...
vue-admin-beautiful::rocket::rocket::rocket:vue3,vue3.0,vue,vue3.x,vue.js,vue后台管理,admin,vue-admin,vue-element-admin,vue-admin-beautiful-pro主线版本基于element-plus,element-ui,ant-...
:light_bulb: 提示提示 通过__vue__属性在DOM中添加开发提示的Vue开发__vue__ 即时识别DOM中的所有Vue组件及其在代码库中的位置 :person_raising_hand: 为什么? :glowing_star: 与浏览器无关的最小替代品! :woman_...
用了vue - echarts - datav-elementul大屏数据可视化方案,包含屏幕适配方案等比例缩放, 等比例缩放的屏幕适配方法。可以让你不需要大量使用百分比或者转换之类的方法去写屏幕自适应大小,而是可以用部分px直接写...
init-config : 初始化vue.config.js & Views.json两个文件到你的项目 build-multi : 并行构建多个页面 watch-multi : 并行观看多个页面 你可以在你的项目中使用vue-cli-service [command] 初始化配置 如果你的项目...
vue-pdf-符号 vue.js pdf查看器 安装 npm install --save vue-pdf-sign 2020-07-10 npm 重新打包!!支持显示签章 by 张总监 朱总监 示例-基本 < pdf xss=removed></ pdf> < script > import pdf from ' vue-...
vue-print基于vue-print-nb打印组件的拓展功能,下载后放在项目中引用详情请看博客介绍Installmain.js文件引用import Print from './xxxx/vue-print-nb/src'Vue.use(Print);
md-vue-loader md-vue-loader是一个Webpack加载器,用于将Markdown文件作为Vue组件导入。 :person_raising_hand: 为什么? :raising_hands: 从与Vue公司的任何版本兼容解耦( / vue-template-compiler )! :...
虚拟虚拟卷轴 快速滚动任意数量的数据| |赞助商目录安装npm install --save vue-virtual-scroller :warning: 现在, vue-virtual-scroller使用在显示时自动刷新自身,以防止显示故障。 这意味着您需要包括vue-...
小:1.5kb(最小化并压缩),4kb(最小化) 简单this.$notify({message:'My message'}) 有多个主题 可以通过Vue过渡自定义动画 既可以通过npm使用,也可以作为脚本标签使用 演示: 支持3个主题 材料设计主题 Now...
Vue Demi (法语一半)是一个正在开发的实用程序允许您为Vue 2和3编写通用Vue库在查看更多详细信息 用法 将其安装为插件的依赖项: npm i vue-demi # or yarn add vue-demi 将vue和@vue/composition-api到插件的...