vue2.x自定义指令的使用
此处举一个表格高度自适应的例子
1.新建一个js文件
import Vue from 'vue';
let resize = null;
resize = Vue.directive('resize', {
inserted(el, binding) {
// eslint-disable-next-line no-param-reassign
el.style.height = `calc(100% - ${binding.value}px`;
},
});
export default { resize };
2.注册到全局
import './common/tableResize.js';
3 使用
//在Dom上加上v-resize即可
<div v-resize="100">
<el-table>
</el-table01>
</div>
指令定义函数提供了几个钩子函数(可选):
bind: 只调用一次,指令第一次绑定到元素时调用,可以定义一个在绑定时执行一次的初始化动作。
inserted: 被绑定元素插入父节点时调用(父节点存在即可调用,不必存在于 document 中)。
update: 被绑定元素所在的模板更新时调用,而不论绑定值是否变化。通过比较更新前后的绑定值。
componentUpdated: 被绑定元素所在模板完成一次更新周期时调用。
unbind: 只调用一次, 指令与元素解绑时调用。(绑定的事件可以在此函数中进行解绑操作)
分享几个实用的Vue自定义指令
博文地址:https://www.cnblogs.com/lzq035/p/14183553.html