vue3自定义v-resize缩放指令

最新推荐文章于 2024-12-26 14:21:50 发布

转载最新推荐文章于 2024-12-26 14:21:50 发布 · 1.3k 阅读

1 ·

CC 4.0 BY-SA版权

原文链接：https://blog.youkuaiyun.com/qq_42783273/article/details/117773354

文章标签：

#vue.js #javascript #前端

该文章展示了如何在Vue.js中创建一个名为`Resize`的自定义指令，用于监听窗口的resize事件。当组件挂载和卸载时，它会相应地添加和移除事件监听器。如果指定了`active`修饰符，则使用被动事件处理，否则在组件挂载时立即触发事件处理函数。文章还提供了在Vue应用中注册并使用这个自定义指令的方法。

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
    }
}

原创这里