- O comando personalizado Vue mostra e oculta comandos com base no controle de permissão
- Registro global de instrução personalizada Vue e registro local
- ciclo de vida do comando
Exibir comandos ocultos com base no controle de permissão
Primeiro, crie um novo arquivo power.js na pasta ==src/directives/==:
let authList = ['save','edit',......] // 可访问的权限列表
const power = {
// 指令的定义
inserted: function (el, binding) {
if (!binding.value) {
return }
let value = `${
binding.value}`
if (!authList.includes(value)) {
el.parentNode && el.parentNode.removeChild(el)
}
}
}
export default power
Em seguida, introduza a diretiva onde deseja usá-la:
importar {power} de '@/directives/power.js'
Registre a diretiva dentro do componente:
diretivas: { poder },
calculado: {…
Por fim, vincule a diretiva ao código do componente que precisa controlar a permissão:
<el-button v-power="'save'" type="primary" plain @click="save">保存</el-button>
- Reabastecimento:
Se você deseja registrar o comando globalmente, pode usar:
Vue.directive('focus', {
// el为dom元素
inserted: function (el) {
// 自动获取元素焦点
el.focus();
}
});
Ciclo de vida da diretiva personalizada:
- bind: function (el, binding, vnode) { el.style['color'] = binding.value }, // chamado apenas uma vez, quando a instrução é vinculada ao elemento pela primeira vez, use este gancho para definir um vinculação A ação de inicialização é executada uma vez.
- insert: function () {}, // Chamado quando o elemento vinculado é inserido no nó pai (pode ser chamado se o nó pai existir e não precisar existir no documento)
- update: function () {}, // Chamado quando o template onde o binding e o elemento estão localizados é atualizado, e independentemente de o valor do binding mudar, comparando o valor do binding antes e depois da atualização, atualizações desnecessárias do template são ignoradas
- componentUpdated: function () {}, // Chamado quando o template onde o elemento vinculado está localizado conclui um ciclo de atualização de atualização
- unbind: function () {} // chamado apenas uma vez, quando o elemento de instrução é desvinculado