zhouchijian
/
fe-drone-ci
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

perf[v-permission]: refine v-permission demo

This commit is contained in:
Pan 2018-12-27 18:19:11 +08:00
parent deb6840174
commit cc7572820e
4 changed files with 55 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
src/lang/en.js
View File

@ -87,7 +87,8 @@ export default {
}, },
permission: { permission: {
roles: 'Your roles', 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: { 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 ', 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 ',

3
src/lang/es.js
View File

@ -87,7 +87,8 @@ export default {
}, },
permission: { permission: {
roles: 'Tus permisos', 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: { 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 ', 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 ',

3
src/lang/zh.js
View File

@ -87,7 +87,8 @@ export default {
}, },
permission: { permission: {
roles: '你的权限', roles: '你的权限',
switchRoles: '切换权限' switchRoles: '切换权限',
tips: '在某些情况下，不适合使用 v-permission。例如：Element-UI 的 Tab 组件或 el-table-column 以及其它动态渲染 dom 的场景。你只能通过手动设置 v-if 来实现。'
}, },
guide: { guide: {
description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于', description: '引导页对于一些第一次进入项目的人很有用，你可以简单介绍下项目的功能。本 Demo 是基于',

71
src/views/permission/directive.vue
View File

@ -2,29 +2,53 @@
<div class="app-container"> <div class="app-container">
<switch-roles @change="handleRolesChange" /> <switch-roles @change="handleRolesChange" />
<div :key="key" style="margin-top:30px;"> <div :key="key" style="margin-top:30px;">
<span v-permission="['admin']" class="permission-alert"> <div>
Only <span v-permission="['admin']" class="permission-alert">
<el-tag class="permission-tag" size="small">admin</el-tag> can see this Only
</span> <el-tag class="permission-tag" size="small">admin</el-tag> can see this
<span v-permission="['editor']" class="permission-alert"> </span>
Only <el-tag v-permission="['admin']" class="permission-sourceCode" type="info">v-permission="['admin']"</el-tag>
<el-tag class="permission-tag" size="small">editor</el-tag> can see this </div>
</span>
<span v-permission="['admin','editor']" class="permission-alert"> <div>
Both <span v-permission="['editor']" class="permission-alert">
<el-tag class="permission-tag" size="small">admin</el-tag> and Only
<el-tag class="permission-tag" size="small">editor</el-tag> can see this <el-tag class="permission-tag" size="small">editor</el-tag> can see this
</span> </span>
<el-tag v-permission="['editor']" class="permission-sourceCode" type="info">v-permission="['editor']"</el-tag>
</div>
<div>
<span v-permission="['admin','editor']" class="permission-alert">
Both
<el-tag class="permission-tag" size="small">admin</el-tag> and
<el-tag class="permission-tag" size="small">editor</el-tag> can see this
</span>
<el-tag v-permission="['admin','editor']" class="permission-sourceCode" type="info">v-permission="['admin','editor']"</el-tag>
</div>
</div> </div>
<div :key="'checkPermission'+key" style="margin-top:30px;"> <div :key="'checkPermission'+key" style="margin-top:60px;">
<code>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. <code>
{{ $t('permission.tips') }}
<br> e.g. <br> e.g.
</code> </code>
<el-tabs type="border-card" style="width:500px;">
<el-tab-pane v-if="checkPermission(['admin'])" label="Admin">Admin can see this</el-tab-pane> <el-tabs type="border-card" style="width:550px;">
<el-tab-pane v-if="checkPermission(['editor'])" label="Editor">Editor can see this</el-tab-pane> <el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
<el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">Both admin or editor can see this</el-tab-pane> Admin can see this
<el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['admin'])"</el-tag>
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['editor'])" label="Editor">
Editor can see this
<el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['editor'])"</el-tag>
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin','editor'])" label="Admin-OR-Editor">
Both admin or editor can see this
<el-tag class="permission-sourceCode" type="info">v-if="checkPermission(['admin','editor'])"</el-tag>
</el-tab-pane>
</el-tabs> </el-tabs>
</div> </div>
</div> </div>
@ -57,14 +81,17 @@ export default{
.app-container { .app-container {
/deep/ .permission-alert { /deep/ .permission-alert {
width: 320px; width: 320px;
margin-top: 30px; margin-top: 15px;
background-color: #f0f9eb; background-color: #f0f9eb;
color: #67c23a; color: #67c23a;
padding: 8px 16px; padding: 8px 16px;
border-radius: 4px; border-radius: 4px;
display: block; display: inline-block;
} }
/deep/ .permission-tag{ /deep/ .permission-sourceCode {
margin-left: 15px;
}
/deep/ .permission-tag {
background-color: #ecf5ff; background-color: #ecf5ff;
} }
} }