This is the 14th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Command permission to achieve button level permission judgment. V-permission, such that only the user with the specified permission can see the corresponding content.

<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>
Copy the code

Global permission judgment function,

In some cases, it is not appropriate to use V-Permission. Examples are el-Tab or El-Table-column of the Elent-UI and other scenarios that render the DOM dynamically. This can only be done by manually setting 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' // Permission determination function

Copy the code

Quick navigation, source in @ / layout/components/AppMain vue, with keep – the alive and the router – the view

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

@ / layout/components/TagesView/index in vue

We loop through the visitedViews and generate each tag. The visitedViews are taken from vuex. When mounted, we call the initTags method, This.$store.dispatch(‘tagsView/addVisitedView’, tag), executes the method in vuex to add visitedViews. Affix can fix a tagView so that it cannot be turned off.

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

I was surprised to find that there is also a right click function, it is too perfect.

Right-click tag-view to refresh, close others, close all. :style=”{left:left+’px’,top:top+’px’}” In the openMenu method, the offset between top and left is calculated. This logic can be reused later in the project.

In the end, I still don’t understand why the following code is a right-click event, showing the right-click menu. It seems to prevent the page from being able to right click events, adding and removing closeMenu click events by controlling visible changes. Specific details do not understand, hope to have front-end god can be confused

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

That’s basically all you need to know about Tag-View. We’ll move on to other components tomorrow