- El comando personalizado de Vue muestra y oculta los comandos según el control de permisos
- Vue instrucciones personalizadas registro global y registro local
- ciclo de vida del comando
Mostrar comandos ocultos basados en el control de permisos
Primero, cree un nuevo archivo power.js en la carpeta ==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
Luego introduce la directiva donde quieras usarla:
importar {poder} desde '@/directives/power.js'
Registre la directiva dentro del componente:
directivas: { poder },
calculado: {…
Finalmente, vincule la directiva en el código del componente que necesita controlar el permiso:
<el-button v-power="'save'" type="primary" plain @click="save">保存</el-button>
- Reponer:
Si desea registrar el comando globalmente, puede usar:
Vue.directive('focus', {
// el为dom元素
inserted: function (el) {
// 自动获取元素焦点
el.focus();
}
});
Ciclo de vida de la directiva personalizada:
- bind: function (el, binding, vnode) { el.style['color'] = binding.value }, // solo se llama una vez, cuando la instrucción está vinculada al elemento por primera vez, use este enlace para definir un vinculante La acción de inicialización se ejecuta una vez.
- insertado: función () {}, // Llamado cuando el elemento vinculado se inserta en el nodo principal (se puede llamar si el nodo principal existe y no es necesario que exista en el documento)
- actualización: función () {}, // Se llama cuando se actualiza la plantilla donde se encuentran el enlace y el elemento, e independientemente de si el valor del enlace cambia, las actualizaciones innecesarias de la plantilla se ignoran comparando el valor del enlace antes y después de la actualización
- componentUpdated: función () {}, // Llamado cuando la plantilla donde se encuentra el elemento vinculado completa un ciclo de actualización de actualización
- unbind: function () {} // solo se llama una vez, cuando el elemento de instrucción no está vinculado