vue3中自定义指令之动态根据页面高度设置元素的高度

自定义指令提供了一种强大的方法来封装对DOM的操作，并且可以响应数据的变化，以便可以在应用的任何组件内使用这些指令。这样做可以提高代码的可重用性，并且使得权限控制、文本复制和自动调整高度等常见功能在应用的不同部分中保持一致性。

Vue指令的钩子函数

bind: 当指令第一次绑定到元素上时调用。这是一次性的，只调用一次。可以用来执行一些初始设置，例如添加事件监听器。

inserted: 元素被插入到父节点时调用（此时父节点可能还没有在文档中）。

update: 被绑定元素所在的模板更新时调用，但仅当指令的绑定值发生变化时。可以用来响应值的变化。

componentUpdated: 指令绑定的组件更新时调用。

unbind: 只调用一次，当指令与元素解绑时。可以用来执行清理工作，例如移除在bind钩子中添加的事件监听器。

Vue 2.6.0+ 还引入了以下两个额外的钩子:

mounted: 当绑定的元素被插入到DOM中并且其父组件的mounted钩子被调用后调用。这可以用来执行依赖于DOM的操作

beforeUnmount: 在卸载绑定元素的钩子函数之前调用

1. src\directive\common\autoHeight.js 定义指令

/**
 * fixTableHeight
 * 动态根据页面高度设置table的高度
 */
export default {
  // mounted为指令钩子函数，el 是指令绑定的DOM元素，binding 包含了绑定的值和表达式
  mounted(el, binding) {
    // 定义windowChange函数用于处理窗口大小变化时的逻辑
    el.windowChange = () => {
      // 获取绑定值，如果绑定值不存在，则默认为0，用于指定底部高度的偏移量
      let bottomHeight = binding?.value || 0;
      // 以防止多个事件处理程序同时运行
      el.timer && clearTimeout(el.timer);
      // 300毫秒后执行元素高度的调整
      el.timer = setTimeout(() => {
        el.style.transition = 'height 0.3s';
        // window.innerHeight 获取视口的高度
        // el.getBoundingClientRect().top 获取元素顶部到视口顶部的距离
        el.style.height = `${
          window.innerHeight - el.getBoundingClientRect().top - 92 - bottomHeight
        }px`;
        // 用于在过渡效果完成后移除过渡样式
        setTimeout(() => {
          el.style.transition = '';
        }, 334);
      }, 300);
    };
    el.windowChange(); // 初始化元素的高度
    window.addEventListener('resize', el.windowChange); //在窗口resize调用函数
  },
  // 指令绑定的元素从DOM中移除之前被调用
  beforeUnmount(el) {
    window.removeEventListener('resize', el.windowChange);
    clearTimeout(el.timer);
    delete el.timer;
    delete el.windowChange;
  },
};

2. src\directive\index.js 指令注册

import hasRole from './permission/hasRole'
import hasPermi from './permission/hasPermi'
import copyText from './common/copyText'
import autoHeight from './common/autoHeight'
// 定义了一个默认导出的函数directive，它接收一个参数app，这个参数代表Vue应用的实例
export default function directive(app){
  // 使用Vue应用实例的directive方法注册指令。第一个参数是指令的名称（字符串），第二个参数是指令的定义（对象或函数）。
  app.directive('hasRole', hasRole)
  app.directive('hasPermi', hasPermi)
  app.directive('copyText', copyText)
  app.directive('autoHeight', autoHeight)
}

3. 模板中使用

在使用的元素上添加`v-autoHeight`即可