directive.vue
3.16 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
<template>
<div class="app-container">
<switch-roles @change="handleRolesChange" />
<div :key="key" style="margin-top:30px;">
<div>
<span v-permission="['admin']" class="permission-alert">
Only
<el-tag class="permission-tag" size="small">admin</el-tag> can see this
</span>
<el-tag v-permission="['admin']" class="permission-sourceCode" type="info">
v-permission="['admin']"
</el-tag>
</div>
<div>
<span v-permission="['runner']" class="permission-alert">
Only
<el-tag class="permission-tag" size="small">runner</el-tag> can see this
</span>
<el-tag v-permission="['runner']" class="permission-sourceCode" type="info">
v-permission="['runner']"
</el-tag>
</div>
<div>
<span v-permission="['admin','shoper']" class="permission-alert">
Both
<el-tag class="permission-tag" size="small">admin</el-tag> and
<el-tag class="permission-tag" size="small">shoper</el-tag> can see this
</span>
<el-tag v-permission="['admin','shoper']" class="permission-sourceCode" type="info">
v-permission="['admin','shoper']"
</el-tag>
</div>
</div>
<div :key="'checkPermission'+key" style="margin-top:60px;">
<aside>
{{ $t('permission.tips') }}
<br> e.g.
</aside>
<el-tabs type="border-card" style="width:550px;">
<el-tab-pane v-if="checkPermission(['admin'])" label="Admin">
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(['shoper'])" label="Shoper">
Shoper can see this
<el-tag class="permission-sourceCode" type="info">
v-if="checkPermission(['shoper'])"
</el-tag>
</el-tab-pane>
<el-tab-pane v-if="checkPermission(['admin','runner'])" label="Admin-OR-Runner">
Both admin or runner can see this
<el-tag class="permission-sourceCode" type="info">
v-if="checkPermission(['admin','runner'])"
</el-tag>
</el-tab-pane>
</el-tabs>
</div>
</div>
</template>
<script>
import permission from '@/directive/permission/index.js' // 权限判断指令
import checkPermission from '@/utils/permission' // 权限判断函数
import SwitchRoles from './components/SwitchRoles'
export default {
name: 'DirectivePermission',
components: { SwitchRoles },
directives: { permission },
data() {
return {
key: 1 // 为了能每次切换权限的时候重新初始化指令
}
},
methods: {
checkPermission,
handleRolesChange() {
this.key++
}
}
}
</script>
<style lang="scss" scoped>
.app-container {
/deep/ .permission-alert {
width: 320px;
margin-top: 15px;
background-color: #f0f9eb;
color: #67c23a;
padding: 8px 16px;
border-radius: 4px;
display: inline-block;
}
/deep/ .permission-sourceCode {
margin-left: 15px;
}
/deep/ .permission-tag {
background-color: #ecf5ff;
}
}
</style>