ARTICLE DETAIL

建站实战干货

来自一线的建站与推广经验沉淀,每一条都经过真实交付验证。

element+vue 之 v-limit 按钮操作权限

2026/9/11 8:45:21 拓冰建站 浏览量
element+vue 之 v-limit 按钮操作权限

1.新建一个permission.js文件

在这里插入图片描述

import store from '@/store'export default {inserted: function (el, binding) {const { perms: limits } = store.state.userconst { value: params } = bindingif (!limits.length) returnif (params && Array.isArray(params)) {if (!limits.some(limit => params.includes(limit))) {el.parentNode && el.parentNode.removeChild(el)}} else {throw new Error(` format: v-limit="[ 'system:user:resetPwd' ]"`)}}
}

2.新建一个user.js 文件 存储用户权限标识集合

在这里插入图片描述

export default {state: {perms: JSON.parse(localStorage.getItem("perms")) || [], // 用户权限标识集合messageList: [], // 站内信header列表显示total: 0 // 站内信header显示},getters: {},mutations: {setPerms (state, perms) { // 用户权限标识集合localStorage.setItem("perms",JSON.stringify(perms))state.perms = perms},SET_MESSAGE_TOTAL (state, val) {state.total = val},SET_MESSAGE_LIST (state, val) {state.messageList = val}},actions: {GET_MESSAGE_LIST ({commit}, Form) {// selectMessage(Form).then(res => {//   // //   // if (res.data.code === 200) {//   //   commit('SET_MESSAGE_LIST', res.data.data.list)//   //   commit('SET_MESSAGE_TOTAL', res.data.data.total)//   // }// })}}
}
3.在store文件下的index.js进行引入
import Vue from 'vue'
import vuex from 'vuex'
import user from './modules/user'
Vue.use(vuex)
const store = new vuex.Store({modules: {user: user,}
})export default store
4.使用
 v-limit="['ForUnloading.CombinedOrder:Programme']"