No.14 vue-element-admin 学习使用（九）指令权限，快捷导航tag-view

这是我参与8月更文挑战的第14天，活动详情查看：8月更文挑战

指令权限，实现按钮级别的权限判断。v-permission，像这样，只有指定权限的用户，才能看到对应的内容。

<div>
        <span v-permission="['editor']" class="permission-alert">
          Only
          <el-tag class="permission-tag" size="small">editor</el-tag> can see this
        </span>
        <el-tag v-permission="['editor']" class="permission-sourceCode" type="info">
          v-permission="['editor']"
        </el-tag>
      </div>

全局权限判断函数，

在某些情况下，不适合使用 v-permission。例如：Element-UI 的 el-tab 或 el-table-column 以及其它动态渲染 dom 的场景。只能通过手动设置 v-if 来实现。

<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>
        
import checkPermission from '@/utils/permission' // 权限判断函数

快捷导航，源码在@/layout/components/AppMain.vue，用keep-alive 和router-view实现

<keep-alive :include="cachedViews">
        <router-view :key="key" />
      </keep-alive>

@/layout/components/TagesView/index.vue中

循环visitedViews，生成每一个tag， visitedViews是从vuex中取的，mounted的时候，调用initTags方法，this.$store.dispatch('tagsView/addVisitedView', tag)，执行vuex中的方法，添加visitedViews，Affix可以固定某个tagview，使他无法被关闭。

visitedViews() {
      return this.$store.state.tagsView.visitedViews
    }

意外的发现居然还有右键点击的相关功能，也太完善了吧。

右键tag-view可以刷新，关闭其它，关闭所有。 看一下右键菜单的实现方式，:style="{left:left+'px',top:top+'px'}" 是用left和top的偏移量来控制menu的显示位置的。openMenu方法中，计算了top和left的偏移量。这段逻辑之后项目里也可以复用上。

到最后还是不太明白下面这段代码为什么是右键点击事件，显示右键菜单。好像是阻止了页面本事的右键事件，通过控制visible的变化，来增加，删除closeMenu的点击事件。具体的细节不太理解，希望有前端大神可以解惑

@contextmenu.prevent.native="openMenu(tag,$event)"

基本上tag-view相关的知识就这些了，明天会继续学习别的组件