0.2.2 • Published 3 years ago
vue2-permission v0.2.2
vue2-permission
说明
该插件用于权限控制,根据不同的权限,显示不同的控件,常用于页面中按钮级别的权限控制,也可以用于数据表格权限的控制
安装
yarn add vue2-permission
// or
npm install vue2-permission --save
使用教程
使用指令模式
import { vuePermission } from 'vue2-permission';
Vue.use(vuePermission, {
// 配置权限,默认从路由中读取
permissions: ['select', 'delete', 'create', 'insert', 'upload', 'download'],
});
在vue文件中使用
<HelloWorld msg="Welcome to Your Vue.js App" v-permission.select />
使用组件模式
import { VuePermission } from 'vue2-permission';
Vue.component(VuePermission);
<VuePermission :permissions="permissions" :all-permissions="allPermissions">
<HelloWorld msg="Welcome to Your Vue.js App" />
</VuePermission>
export default {
name: 'App',
data() {
return {
permissions: ['select'], // 当前需要的权限
allPermissions: ['select', 'delete', 'create', 'insert', 'upload', 'download'], // 当前页面存在的权限
};
},
}
注意
该插件只能在vue中使用 基于vue和vue-router 需要在vue-router中配置路由的时候,配置上对应的路由权限
const routes = [ { path: '/login', name: 'Login', component: Login, meta: { permissions: ['select'], }, }, { path: 'home', name: 'Home', component: Home, meta: { permissions: ['select', 'create'], }, } ];