directives
- 类型：
Object - vue3中自定义指令的办法
directives的应用办法
在组件中应用
<tempalte></template>export default { data() { return { }; }, directives:{ 'local-test':function(el,binding,vnode){ /** el能够获取以后dom节点，并且进行编译，也能够操作事件 **/ /** binding指的是一个对象，个别不必 **/ /** vnode 是 Vue 编译生成的虚构节点 **/ el.style.border="1px solid red"; //操作style所有款式 console.log(el.value); //获取v-model的值 console.log(el.dataset.name) //data-name绑定的值，须要el.dataset来获取 console.log(vnode.context.$route); //获取以后路由信息 } }, components:{ }, filters:{ },}自定义指令在全局中的利用
钩子函数的参数
el：指令所绑定的元素，能够用来间接操作 DOM。binding：一个对象，蕴含以下property：name：指令名，不包含v-前缀。value：指令的绑定值，例如：v-my-directive="1 + 1"中，绑定值为2。oldValue：指令绑定的前一个值，仅在update和componentUpdated钩子中可用。无论值是否扭转都可用。expression：字符串模式的指令表达式。例如v-my-directive="1 + 1"中，表达式为1 + 1。arg：传给指令的参数，可选。例如v-my-directive:foo中，参数为"foo"。modifiers：一个蕴含修饰符的对象。例如v-my-directive.foo.bar中，修饰符对象为{ foo: true, bar: true }。
vnode：Vue 编译生成的虚构节点。oldVnode：上一个虚构节点，仅在update和componentUpdated钩子中可用
自定义指令在全局的利用，写一个v-has-permissions指令管制按钮的显示
<template> <Button type="primary" @click="changedatabaseModel" v-has-permissions="['admin','a']">增加用户</Button></tempalte>//haspermissions.js，该文件需在main.js引入能力在全局应用import Vue from 'vue'import storage from '@/js/helper/storage';Vue.directive('has-permissions',function(el,binding,vnode){ let permissions = binding.value const currentUserPerms = storage.get('GAUSS').split(','); if(permissions){ let isShow = permissions.every(item=>{ return currentUserPerms.includes(item) }) if(!isShow){ el && el.parentElement && el.parentElement.removeChild(el) } }})- 通过权限管制按钮的显示，上面通过路由配置权限 的例子不太适合，但仅作为一种思维的传播
//router.js 通过meta中的permissions配置页面须要权限{ path: "/user-manage", name: "userManage", component: Layout, redirect: { name: "UserManage" }, meta: { title: "XXX治理", publicPage: true }, children: [ { path: "/", name: "UserManage", meta: { title: "用户治理", childMenu: 'databaseMenu', publicPage: true , permissions: ['admin','user_edit'] }, component: () => import( "@/view/user/index.vue" ) }, ]}在组件中的配置一个v-has的指令
<template> <Button type="primary" @click="changedatabaseModel" v-has>增加用户</Button></tempalte><script>export default{ data(){ return{ } }, directives: { 'has'(el,binding,vnode){ let { permissions } = vnode.context.$route.meta const currentUserPerms = storage.get('GAUSS').split(','); if(permissions){ let isShow = permissions.every(item=>{ return currentUserPerms.includes(item) }) if(!isShow){ el && el.parentElement && el.parentElement.removeChild(el) } } } },}</script>