1.创建自定义指令
import {Directive, DirectiveBinding, nextTick} from 'vue'
interface ExHTMLElement extends HTMLElement {
resizeListener: EventListener
}
export const adaptive: Directive = {
mounted: (el: ExHTMLElement, binding: DirectiveBinding) => {
el.resizeListener = () => {
nextTick(() => {
setHeight(el, binding)
})
}
nextTick(() => {
setHeight(el, binding)
})
window.addEventListener('resize', el.resizeListener)
},
unmounted(el: ExHTMLElement) {
window.removeEventListener('resize', el.resizeListener)
},
updated(el: ExHTMLElement, binding: DirectiveBinding) {
nextTick(() => {
setHeight(el, binding)
})
},
}
// set el-table height
function setHeight(el: ExHTMLElement, binding: DirectiveBinding) {
const top = el