From cc7572820e7cec835548bcc54e2728be4c466f97 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 656b746b1f8..2af355b1fc8 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 69218ad2106..1268f0835b5 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 021a5fa71ca..4371713fe4a 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 2817f1c5220..df277ddcffd 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-sourceCode { + margin-left: 15px; } - /deep/ .permission-tag{ + /deep/ .permission-tag { background-color: #ecf5ff; } }