30 lines
828 B
TypeScript
30 lines
828 B
TypeScript
|
//在需要的页面单独引入，不然会影响全局
|
||
|
|
import { onMounted, onBeforeUnmount } from 'vue'
|
||
|
|
|
||
|
|
export function useFlexibleRem() {
|
||
|
|
let originFontSize = ''
|
||
|
|
let resizeHandler: (() => void) | null = null
|
||
|
|
|
||
|
|
const setRemBase = () => {
|
||
|
|
const html = document.documentElement
|
||
|
|
const width = window.innerWidth
|
||
|
|
html.style.fontSize = (width / 1920) * 16 + 'px'
|
||
|
|
}
|
||
|
|
|
||
|
|
onMounted(() => {
|
||
|
|
// 记录原始 font-size
|
||
|
|
originFontSize = document.documentElement.style.fontSize
|
||
|
|
setRemBase()
|
||
|
|
resizeHandler = setRemBase
|
||
|
|
window.addEventListener('resize', resizeHandler)
|
||
|
|
})
|
||
|
|
|
||
|
|
onBeforeUnmount(() => {
|
||
|
|
// 离开页面时恢复原始 font-size
|
||
|
|
document.documentElement.style.fontSize = originFontSize
|
||
|
|
if (resizeHandler) {
|
||
|
|
window.removeEventListener('resize', resizeHandler)
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|