ResizeObserver Polyfill 的的的的使用使用……

demo效果:https://que-etc.github.io/resize-observer-polyfill/

github地址:  https://github.com/que-etc/resize-observer-polyfill

我使用的场景,Header所在div发生高度变化,那么弹出的Drawer需要根据Header的高度吸附在其下方。

安装很简单:npm install resize-observer-polyfill --save-dev

官方示例使用方法:

import ResizeObserver from 'resize-observer-polyfill';

const ro = new ResizeObserver((entries, observer) => {
    for (const entry of entries) {
        const {left, top, width, height} = entry.contentRect;

        console.log('Element:', entry.target);
        console.log(`Element's size: ${ width }px x ${ height }px`);
        console.log(`Element's paddings: ${ top }px ; ${ left }px`);
        //在此处做你要做的事情,例如我得到了header的自身的高度,然后设置Drawer的margin-top为这个高度,那么,无论header如果变化,我的drawer都会紧紧吸附于header了

    }
});

ro.observe(document.body); //这里是你观察的对象,官方例子观察body,我观察的是header的容器 
  • 4
    点赞
  • 6
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在Vue3中使用ResizeObserver可以实现元素大小的动态监听。ResizeObserver是一个新的API,用于监听元素的大小变化,并且不会影响性能。它提供了一种方式,使开发人员能够监视DOM元素的大小,并在元素大小更改时得到通知。 使用ResizeObserver需要先创建一个实例,然后将需要监听的元素作为参数传入。当元素的大小发生变化时,实例会自动触发回调函数并将触发事件的元素和元素的新大小作为参数传入回调函数。 在Vue3中,可以通过自定义指令来使用ResizeObserver。具体步骤如下: 1. 创建一个ResizeObserver实例 ``` const observer = new ResizeObserver(entries => { // 处理元素大小变化的回调函数 }) ``` 2. 在自定义指令中将需要监听的元素传入ResizeObserver实例 ``` const resizeDirective = { mounted(el, binding) { observer.observe(el) }, unmounted(el) { observer.unobserve(el) } } ``` 3. 在模板中使用自定义指令 ``` <template> <div v-resize="handleResize">监听的元素</div> </template> <script> import { defineDirective } from 'vue' import ResizeObserver from 'resize-observer-polyfill' const observer = new ResizeObserver(entries => { // 处理元素大小变化的回调函数 }) const resizeDirective = { mounted(el, binding) { observer.observe(el) }, unmounted(el) { observer.unobserve(el) } } export default { directives: { resize: resizeDirective }, methods: { handleResize(entries) { // 处理元素大小变化的回调函数 } } } </script> ```

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值