1.1 钩子函数
一个指令定义对象可以提供如下几个钩子函数 (均为可选):
- bind
只调用一次,指令第一次绑定到元素时调用。在这里可以进行一次性的初始化设置。 - inserted
被绑定元素插入父节点时调用 (仅保证父节点存在,但不一定已被插入文档中)。 - update
所在组件的 VNode 更新时调用,但是可能发生在其子 VNode 更新之前。指令的值可能发生了改变,也可能没有。 - componentUpdated
指令所在组件的 VNode 及其子 VNode 全部更新后调用。 - unbind
只调用一次,指令与元素解绑时调用。
Vue.directive('gqs',{ bind() { // 当指令绑定到 HTML 元素上时触发.**只调用一次** console.log('bind triggerd') }, inserted() { // 当绑定了指令的这个HTML元素插入到父元素上时触发(在这里父元素是 `div#app`)**.但不保证,父元素已经插入了 DOM 文档.** console.log('inserted triggerd') }, updated() { // 所在组件的`VNode`更新时调用. console.log('updated triggerd') }, componentUpdated() { // 指令所在组件的 VNode 及其子 VNode 全部更新后调用。 console.log('componentUpdated triggerd') }, unbind() { // 只调用一次,指令与元素解绑时调用. console.log('unbind triggerd') } })
1.2 钩子函数参数
指令钩子函数会被传入以下参数:
- el 指令所绑定的元素,可以用来直接操作 DOM
- binding 一个对象,包含以下属性:
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 钩子中可用。
除了 el 之外,其它参数都应该是只读的,切勿进行修改。如果需要在钩子之间共享数据,建议通过元素的 dataset 来进行。
1.3 指令简写
当绑定指令的元素的状态发生改变时(这里主要是指元素绑定的vue数据发生改变时),仍然会触发指令中的 update 函数.
那么我们可以利用指令的简写形式,来做一些有意思的事情.
核心思想就是:
当一个HTML元素设置了指令,那么在这个元素的状态发生改变时(由vue数据变化带来的带来的监控),我们可以利用update()钩子函数监控到这个元素的变化,然后根据需要做一些其他的事情.
案例:使用官方指定的指令简写模式:
Vue.directive('color-swatch', function (el, binding) { el.style.backgroundColor = binding.value })
当元素的状态发生改变时,就会触发 update
1.4 小结几点
- 使用 Vue.directive() 来新建一个全局指令,(指令使用在HTML元素属性上的)
- Vue.directive(‘focus’) 第一个参数focus是指令名,指令名在声明的时候,不需要加 v-
- 在使用指令的HTML元素上,我们需要加上 v-.
<input type="text" v-focus placeholder="我有v-focus,所以,我获取了焦点"/>
Vue.directive(‘focus’,{}) 第二个参数是一个对象,对象内部有个 inserted() 的函数,函数有 el 这个参数.
- el 这个参数表示了绑定这个指令的 DOM元素,在这里就是后面那个有 placeholder 的 input
- el 就等价于 document.getElementById(‘el.id’)…
- 可以利用 $(el) 无缝连接 jQuery
2. vue-cli中定义全局指令
2.1 main.js
import Vue from 'vue' import App from './App.vue' import router from './router' import store from './store' // 如果你只需要执行绑定的 bind 和 update 两个事件,vue指令定义也配置了简写方式. Vue.directive('my-color',(el) => { el.style.color = 'red' el.style.backgroundColor = 'yellow' }) new Vue({ router, store, render: h => h(App) }).$mount('#app')
2.2 相应组件
3. vue-cli中定义局部指令
3.1 相应组件
<template> <input type="text" v-model="text" placeholder="仅可填入正整数数字" v-my-text="{key:'text',maxval:'1000'}"> </template> <script> export default { data(){ return { text:'', } }, directives:{ myText:{ bind(el,binding,vnode) { el.handler = function() { el.value = el.value.replace(/\D+/g, '') //根据设置的规则,进行判断处理 if(binding.value.maxval && el.value > parseInt(binding.value.maxval)){ el.value = parseInt(binding.value.maxval); } //根据指令调取位置设置的规则Key,进行全局上文赋值 vnode['context'][binding.value.key] = el.value; } el.addEventListener('input', el.handler) }, }, } } </script>
3.2 简写模式
<template> <input type="text" v-model="text" placeholder="仅可填入正整数数字" v-my-text="{key:'text',maxval:'1000'}"> </template> <script> export default { data(){ return { text:'', } }, directives:{ myText:(el,binding,vnode) => { el.handler = function() { el.value = el.value.replace(/\D+/g, '') //根据设置的规则,进行判断处理 if(binding.value.maxval && el.value > parseInt(binding.value.maxval)){ el.value = parseInt(binding.value.maxval); } //根据指令调取位置设置的规则Key,进行全局上文赋值 vnode['context'][binding.value.key] = el.value; } el.addEventListener('input', el.handler) }, }, } </script>
4. 应用场景
传送门:指令在 Element-ui 中选择器(Select)中的使用
4.1 自动获取焦点(官方示例)
// 注册一个全局自定义指令 `v-focus` Vue.directive('focus', { // 当被绑定的元素插入到 DOM 中时…… inserted: function (el) { // 聚焦元素 el.focus() } })
4.2 一键 Copy的功能
- 首先建一个 js 文件(v-copy.js)。定义一个对象。( 指令实际就是一个对象 )
import { Message } from 'ant-design-vue'; const vCopy = { // 名字爱取啥取啥 /* bind 钩子函数,第一次绑定时调用,可以在这里做初始化设置 el: 作用的 dom 对象 value: 传给指令的值,也就是我们要 copy 的值 */ bind(el, { value }) { el.$value = value; // 用一个全局属性来存传进来的值,因为这个值在别的钩子函数里还会用到 el.handler = () => { if (!el.$value) { // 值为空的时候,给出提示,我这里的提示是用的 ant-design-vue 的提示,你们随意 Message.warning('无复制内容'); return; } // 动态创建 textarea 标签 const textarea = document.createElement('textarea'); // 将该 textarea 设为 readonly 防止 iOS 下自动唤起键盘,同时将 textarea 移出可视区域 textarea.readOnly = 'readonly'; textarea.style.position = 'absolute'; textarea.style.left = '-9999px'; // 将要 copy 的值赋给 textarea 标签的 value 属性 textarea.value = el.$value; // 将 textarea 插入到 body 中 document.body.appendChild(textarea); // 选中值并复制 textarea.select(); // textarea.setSelectionRange(0, textarea.value.length); const result = document.execCommand('Copy'); if (result) { Message.success('复制成功'); } document.body.removeChild(textarea); }; // 绑定点击事件,就是所谓的一键 copy 啦 el.addEventListener('click', el.handler); }, // 当传进来的值更新的时候触发 componentUpdated(el, { value }) { el.$value = value; }, // 指令与元素解绑的时候,移除事件绑定 unbind(el) { el.removeEventListener('click', el.handler); }, }; export default vCopy;
- 到这里,一键 Copy 的功能就实现了,最后再说一嘴怎么将自定义指令注册到全局:再新建一个 js ( directives.js )文件来注册所有的全局指令。
import copy from './v-copy'; // 自定义指令 const directives = { copy, }; // 这种写法可以批量注册指令 export default { install(Vue) { Object.keys(directives).forEach((key) => { Vue.directive(key, directives[key]); }); }, };
3.最后,在 main.js 中这样引入
import Vue from 'vue'; import Directives from './directives'; Vue.use(Directives);
4.3 按钮级别权限控制
权限控制分为页面级别和按钮级别,这两种思路基本是一致的。
页面级别:用户登录后,获取用户role,将role和路由表每个页面的需要的权限作比较,生成最终用户可访问的路由表。最后通过router.addRoutes动态挂载。现在是通过获取到用户的role之后,在前端用v-if手动判断来区分不同权限对应的按钮的。。
按钮级别:用户登录后,获取用户role,在前端用 v-if 或者封装一个自定义指令,手动判断来区分不同权限对应的按钮的。
思路:
登录:当用户填写完账号和密码后向服务端验证是否正确,验证通过之后,服务端会返回一个token,拿到token之后(将token存贮到sessionStorage中,保证刷新页面后能记住用户登录状态),前端会根据token再去拉取一个 user_info 的接口来获取用户的详细信息(如用户角色,用户权限,用户名等等信息)。
权限验证:通过token获取用户对应的role,自定义指令,获取路由meta属性里btnPermissions(注:meta.btnPermissions是存放按钮权限的数组,在路由表里配置),然后判断role是否在btnPermissions数组里,若不在即删除该按钮DOM。
路由配置:
path: '/permission', component: Layout, name: '权限测试', meta: { btnPermissions: ['admin','supper','normal'] }, //页面需要的权限 children: [ { path: 'supper', component: _import('system/supper'), name: '权限测试页', meta: { btnPermissions: ['admin','supper'] } //页面需要的权限 }, { path: 'normal', component: _import('system/normal'), name: '权限测试页', meta: { btnPermissions: ['admin'] } //页面需要的权限 } ]
- 自定义指令:
import Vue from 'vue' /**权限指令**/ const has = Vue.directive('has', { bind: function (el, binding, vnode) { // 获取页面按钮权限 let btnPermissionsArr = vnode.context.$route.meta.btnPermissions; if (!Vue.prototype.$_has(btnPermissionsArr)) { el.parentNode.removeChild(el); } } }); // 权限检查方法 Vue.prototype.$_has = function (value) { let isExist = false; // 获取用户按钮权限 let btnPermissionsStr = sessionStorage.getItem("btnPermissions"); if (btnPermissionsStr == undefined || btnPermissionsStr == null) { return false; } if (value.indexOf(btnPermissionsStr) > -1) { isExist = true; } return isExist; }; export {has}
- 在main.js文件引入文件:
import has from './public/js/btnPermissions.js';
- 页面中按钮只需加v-has即可:
<el-button @click='editClick' type="primary" v-has>编辑</el-button>