什么是hook？
其本质是一个函数，通过Composition API（组合式api）可以把复杂或常用的逻辑封装成一个个hook来进行调用，简介优雅，方便维护。
通俗来讲：抽出一部分代码单独放一个js里，在setup里就可直接用hook中的函数，不是父子组件的关系，此外，hooks 复用率高，使setup中逻辑更清晰。
1、在 src 目录新增 hooks 文件夹，再新建 useRepairTableHeight.js 文件，如：/src/hooks/useRepairTableHeight.js
import { getCurrentInstance, onBeforeUnmount, onMounted, reactive } from 'vue'
/*
* @Title: 更正表格高度的 hook 公共函数
* @Description: 抽离与业务无关的公共代码，仅适用于某某管理页面的 el-table 表格，针对缩小和放大浏览器屏幕时进行自适应高度
* @Param: 目标对象的 ref 名称
* @Author: 帅龍之龍
* @Date: 2023-2-10 11:00:57
* @LastEditors: 帅龍之龍
* @LastEditTime: 2023-2-10 11:00:57
*/
export default function (targetRefName) {
// 当前实例
const currentInstance = getCurrentInstance()
// 更正结果
const repairRes = reactive({
targetRefName: targetRefName,
msg: ''
})
/**
* 更正表格高度方法
*/
async function repair() {
const targetRef = await currentInstance.refs[targetRefName]
console.log('repair =>', targetRef)
if (targetRef != null) {
repairTableHeight(targetRef)
} else {
repairRes.msg = '目标节点不存在'
}
}
/**
* 更正表格高度具体实现方法
*/
function repairTableHeight(targetRef) {
const clientWidth = document.body.clientWidth
const clientHeight = document.body.clientHeight
console.log('repairTableHeight =>', clientWidth, clientHeight)
if (clientWidth > 1184) {
targetRef.style.height = 'calc(100% - 72px)'
} else if((clientWidth <= 1184 && clientWidth > 800)) {
targetRef.style.height = 'calc(100% - 122px)'
} else {
targetRef.style.height = 'calc(100% - 159px)'
}
repairRes.msg = '更正表格高度成功'
}
onMounted(() => {
// 1、自动更正表格高度
repair()
// 2、动态更正表格高度
window.addEventListener('resize', repair) // 新增 resize 监听事件
})
onBeforeUnmount(() => {
window.removeEventListener('resize', repair) // 移除 resize 监听事件
})
return repairRes // 返回更正结果
}
2、在需要使用的页面引入该 hook 文件，然后在这个页面进行调用，位置在 created 或 setup 生命周期函数里面。
<script>
import useRepairTableHeight from '@/hooks/useRepairTableHeight'
export default {
data: () => ({
}),
created() {
console.info(useRepairTableHeight('taskTableContainerRef'))
},
}
</script>
<script setup lang="ts">
import useRepairTableHeight from '@/hooks/useRepairTableHeight'
console.info(useRepairTableHeight('taskTableContainerRef'))
</script>3、效果如下~
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/151155.html
