vue3 封装自定义指令,监听元素宽高的变化

这篇具有很好参考价值的文章主要介绍了vue3 封装自定义指令,监听元素宽高的变化。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

最近做一个项目,涉及到echart图,要去根据父元素去自适应宽高,所以需要监听到元素的宽高变化、

因为是监听某一元素的宽高变化,所以这里用的是ResizeObserver.

ResizeObserver是可以监听到DOM元素,宽高的变化,需要注意的一点就是监听出变化结果是contentBox的宽度和高度。

以下为浏览器兼容性

vue3 封装自定义指令,监听元素宽高的变化,javascript,vue.js,前端

第一步:封装自定义指令

在directive文件夹下创建一个resizeObserver.js文件
内容如下

// 监听元素大小变化的指令
const map = new WeakMap()
const ob = new ResizeObserver((entries) => {
    for (const entry of entries) {
        // 获取dom元素的回调
        const handler = map.get(entry.target)
        //存在回调函数
        if (handler) {
            // 将监听的值给回调函数
            handler({
                width: entry.borderBoxSize[0].inlineSize,
                height: entry.borderBoxSize[0].blockSize
            })
        }
    }
})


export const Resize = {

    mounted(el, binding) {
        //将dom与回调的关系塞入map
        map.set(el, binding.value)
        //监听el元素的变化
        ob.observe(el)
    },
    unmounted(el) {
        //取消监听
        ob.unobserve(el)
    }
}

export default Resize


第二步:在directive文件夹再创建一个index.js文件,目的是为了集中注册自定义指令

import { Resize } from "./resizeObserver"


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

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


第三步:在main.js文件进行全局注册

import directives from "@/util/directive/index"
app.use(directives)

第四步:使用方法

<template>
<div style="height: 100%; width: 100%" v-resize="onResize"></div>
</template>
<script setup>
// 当元素宽高发生变化时,触发下面的方法
const onResize = (dom) => {
    console.log(dom) // dom为元素变化后的宽高
}
</script>



以上,希望大家一键三连哇~~ 感谢文章来源地址https://www.toymoban.com/news/detail-726449.html

到了这里,关于vue3 封装自定义指令,监听元素宽高的变化的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 【Vue】vue3 v-draggable 拖拽指令封装

    需求:实现一个拖拽指令,可在父元素区域任意拖拽元素,同时如果传入的值为 father,则拖拽的时候以父元素为拖拽对象 思路: 1、设置需要拖拽的元素为absolute,其父元素为relative。 2、鼠标按下(onmousedown)时记录目标元素当前的 left 和 top 值。 3、鼠标移动(onmousemove)时计算每

    2024年02月16日
    浏览(32)
  • Vue自定义指令- v-loading封装

    01-自定义指令 什么是自定义指令? 自定义指令:自己定义的指令,可以 封装一些dom操作 ,扩展额外功能。 1、例如:完成自动聚焦的功能: 自定义指令的两种注册语法: 全局注册-语法:

    2024年02月11日
    浏览(33)
  • vue3自定义指令

    在 Vue 3 中,我们可以通过使用 app.directive 方法来定义自定义指令。下面是一个简单的例子: 在上面的例子中,我们定义了一个名为 highlight 的自定义指令,它在元素被挂载时将其背景颜色设置为黄色,并在元素被卸载时将背景颜色重置为空。 在 mounted 和 unmounted 方法中,我们

    2024年01月18日
    浏览(39)
  • Vue3: 自定义指令

    vue 官方提供了 v-for、v-model、v-if 等常用的内置指令。除此之外vue 还允许开发者自定义指令。 vue 中的自定义指令分为两类,分别是: ⚫ 私有自定义指令 ⚫ 全局自定义指令 在每个 vue 组件中,可以在 directives 节点下声明私有自定义指令。示例代码如下: 在使用自定义指令时

    2024年02月15日
    浏览(30)
  • vue3自定义指令之防抖

    我们使用 vue 时,有时候需要用到自定义指令,例如一个防抖指令 现在有一个需求,用户在点击某个按钮时,我不希望用户在疯狂点击后,每次点击都会触发事件,像服务器发送请求,这并不是我们预期的,所以我们需要在用户点击是做防抖处理。那么怎么做到方便复用的解

    2024年02月16日
    浏览(37)
  • 【学习记录24】vue3自定义指令

    1、html部分  2、js部分 3、实现效果 1、html部分 2、js部分 在components下创建loading文件夹,在loading文件夹里创建directive.js  在main.js中全局注册指令 1、在components下创建loading文件夹,在loading文件夹里创建directive.js 2、在loading文件夹里创建loading.vue 3、在loading文件夹里放入一张G

    2024年01月19日
    浏览(40)
  • VUE3实现拖拽功能自定义指令

    1.首先创建一个js文件,命名为drag.js    注意看注释部分,对操作DOM块进行了不同需求的支持     可以只在移动头部时操作整个DOM,或者是否允许DOM元素移出屏幕都能实现 2.在main.js中引入drag.js 3.在你想使用的标签中添加 v-drag 即可实现拖动了  

    2024年02月14日
    浏览(45)
  • vue3 图片放大缩小、拖拽功能(自定义指令)

    效果 自定义 拖拽指令 vDrag.js 参考来源 https://github.com/sunzsh 使用 自定义 拖拽指令 写法二 (带传参及回调写法) vDrag.js 使用 自定义 缩放指令 vWheelScale.js 根据项目需要 我指令加了 动态参数 及 回调函数 不需要自行修改 使用 自定义 缩放指令 写法二(带传参及回调写法)

    2024年02月01日
    浏览(52)
  • vue去掉所有输入框两边空格,封装指令去空格,支持Vue2和Vue3,ElementUI Input去空格

    就是页面很多表单输入框,期望在提交的时候,都要把用户两边的空格去掉 ❌使用 vue 的指令 .trim 去掉空格 中间会输入不了空格, 比如我想输入 你好啊 中国 , 这中间的空格输入不了,只能变成 你好啊中国 ❌在提交的时候使用 trim() 方法去两边空格 需要一个个字段的添加,

    2024年02月14日
    浏览(49)
  • 两周掌握Vue3(五):自定义指令、路由、ajax

    代码仓库:跳转 当前分支:05 自定义指令是Vue.js框架提供的一个非常强大的特性,它允许开发者直接操作DOM,扩展Vue.js的能力。自定义指令的主要作用包括: 封装常用操作 :当你发现在多个组件中需要重复执行相同的DOM操作时,可以将这些操作封装成一个自定义指令,以提

    2024年01月15日
    浏览(38)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包