From d3904e6c2865e3ec6b095c06089a371dec3d226f Mon Sep 17 00:00:00 2001 From: Pan Date: Thu, 27 Dec 2018 18:19:11 +0800 Subject: [PATCH] perf[v-permission]: refine v-permission demo --- src/lang/en.js | 3 +- src/lang/es.js | 3 +- src/lang/zh.js | 3 +- src/views/permission/directive.vue | 71 +++++++++++++++++++++--------- 4 files changed, 55 insertions(+), 25 deletions(-) diff --git a/src/lang/en.js b/src/lang/en.js index 656b746b..2af355b1 100644 --- a/src/lang/en.js +++ b/src/lang/en.js @@ -87,7 +87,8 @@ export default { }, permission: { roles: 'Your roles', - switchRoles: 'Switch roles' + switchRoles: 'Switch roles', + tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.' }, guide: { description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ', diff --git a/src/lang/es.js b/src/lang/es.js index 69218ad2..1268f083 100755 --- a/src/lang/es.js +++ b/src/lang/es.js @@ -87,7 +87,8 @@ export default { }, permission: { roles: 'Tus permisos', - switchRoles: 'Cambiar permisos' + switchRoles: 'Cambiar permisos', + tips: 'In some cases it is not suitable to use v-permission, such as element Tab component or el-table-column and other asynchronous rendering dom cases which can only be achieved by manually setting the v-if.' }, guide: { description: 'The guide page is useful for some people who entered the project for the first time. You can briefly introduce the features of the project. Demo is based on ', diff --git a/src/lang/zh.js b/src/lang/zh.js index 021a5fa7..4371713f 100644 --- a/src/lang/zh.js +++ b/src/lang/zh.js @@ -87,7 +87,8 @@ export default { }, permission: { roles: '你的权限', - switchRoles: '切换权限' + switchRoles: '切换权限', + tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。' }, guide: { description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于', diff --git a/src/views/permission/directive.vue b/src/views/permission/directive.vue index 2817f1c5..df277ddc 100644 --- a/src/views/permission/directive.vue +++ b/src/views/permission/directive.vue @@ -2,29 +2,53 @@
- - Only - admin can see this - - - Only - editor can see this - - - Both - admin and - editor can see this - +
+ + Only + admin can see this + + v-permission="['admin']" +
+ +
+ + Only + editor can see this + + v-permission="['editor']" +
+ +
+ + Both + admin and + editor can see this + + v-permission="['admin','editor']" +
-
- In some cases it is not suitable to use v-permission, such as element Tab component which can only be achieved by manually setting the v-if. +
+ + {{ $t('permission.tips') }}
e.g. - - Admin can see this - Editor can see this - Both admin or editor can see this + + + + Admin can see this + v-if="checkPermission(['admin'])" + + + + Editor can see this + v-if="checkPermission(['editor'])" + + + + Both admin or editor can see this + v-if="checkPermission(['admin','editor'])" +
@@ -57,14 +81,17 @@ export default{ .app-container { /deep/ .permission-alert { width: 320px; - margin-top: 30px; + margin-top: 15px; background-color: #f0f9eb; color: #67c23a; padding: 8px 16px; border-radius: 4px; - display: block; + display: inline-block; } - /deep/ .permission-tag{ + /deep/ .permission-sourceCode { + margin-left: 15px; + } + /deep/ .permission-tag { background-color: #ecf5ff; } }