vue自定义指令的使用

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