vue3自定义v-resize缩放指令

export const Resize = {
	mounted(el, binding) {
		const handler = binding.value
		const options = {
			passive: !binding.modifiers?.active
		}

		window.addEventListener('resize', handler, options)

		el._onResize = {
			handler,
			options
		}

		if (!binding.modifiers?.quiet) {
			handler()
		}
	},

	unmounted(el) {
		if (!el._onResize) return

		const { handler, options } = el._onResize
		window.removeEventListener('resize', handler, options)
		delete el._onResize
	}
}

export default Resize

import { Resize } from './resize'


// 自定义指令集合
const directives = {
	Resize,
}

export default {
	install(app) {
		Object.keys(directives).forEach((key) => {
			app.directive(key, directives[key])
		})
	}
}

在main 文件中注册
import directives from './directives'
app.use(directives)

<div v-resize="onResize"></div>

setup(){
    const onResize = () => {
        console.log(window.innerWidth, window.innerHeight)
    }
    return {
        onResize
    }
}

原创这里