本文介绍如何在Vue3项目里搭配typescript封装一个动态计算表格高度的指令以及Vue3项目里如何构建合理规范的指令文件。

        在大多数的后台管理类web系统中，比较常见的就是表格类的页面，通过有一个公共的头部、面包屑导航栏，然后就是具体的表格页面，表格页面通常上面是搜索栏、搜索按钮这些，然后下面是表格，表格导航。大多数情况下我们设计成一屏的高度显示下这些内容，超出的滚动，然后合理的滚动应该是表格单元格在滚动，其他部分固定，那么就需要根据页面元素动态的计算表格究竟在各种屏幕下应该占据多少的高度，以下是一种实现的思路：

下图是计算表格高度的核心代码tableHeight.ts。

import { Directive, DirectiveBinding } from 'vue'

interface ExHTMLElement extends HTMLElement {
  resizeListener: EventListener
}

const tableHeight: Directive = {
  mounted: (el: ExHTMLElement, binding: DirectiveBinding) => {
    el.resizeListener = () => {
      setHeight(el, binding)
    }
    setHeight(el, binding)
    window.addEventListener('resize', el.resizeListener)
  },
  unmounted(el: ExHTMLElement) {
    window.removeEventListener('resize', el.resizeListener)
  },
  updated(el: ExHTMLElement, binding: DirectiveBinding) {
    setHeight(el, binding)
  }
}

function setHeight(el: ExHTMLElement, binding: DirectiveBinding) {
  const rect = el.getBoundingClientRect()
  const rectTop = rect.top + window.pageYOffset
  const bottom = binding?.value?.bottom || 16
  const pageHeight = window.innerHeight
  el.style.height = pageHeight - rectTop - bottom + 'px'
  el.style.overflowY = 'auto'  
}

export default tableHeight

下图是项目中指令存放的路径，在modules下存放各个功能的指令，最后在index.ts中引入，然后导出一个批量注册指令的插件

import type { App } from 'vue'
import tableHeight from './modules/tableHeight'

const directivesList: any = {
  tableHeight
}

const setDirectives = {
  install(app: App<Element>) {
    Object.keys(directivesList).forEach((key) => {
      app.directive(key, directivesList[key])
    })
  },
}

export default setDirectives

在main.ts里注册插件使用

import setDirectives from '@/directives/index.ts'
app.use(setDirectives)

使用示例：

     <el-table :show-overflow-tooltip="true" :data="tableData" border v-tableHeight="{ bottom: 88 }"
          v-loading="tableLoading">