• "element-plus": "^2.2.26",
  • "@vueuse/components": "^9.7.0",
引入 vElementSize 返回响应性的监听值。

原理：ResizeObserver 接口监视 Element 内容盒或边框盒或者 SVGElement 边界尺寸的变化。！！！很棒的API。

例子是指令式的，完整项目

<template>

    <div>

        <el-carousel :interval="3000" type="card" :height="bannerHeight + 'px'">

            <el-carousel-item v-for="(item, index) in banners" :key="index" class="rounded-lg">

                <img v-element-size="onResize" :src="item.imageUrl" alt="" />

            </el-carousel-item>

        </el-carousel>

    </div>

</template>

<script setup lang="ts">

import { useCommonStore } from '@/stores/common'

import { storeToRefs } from 'pinia';

import { vElementSize } from '@vueuse/components'

const commonStore = useCommonStore();

const { banners } = storeToRefs(commonStore)

const { getBanners } = commonStore

const bannerHeight = ref(200)

onMounted(async () => {

    await getBanners();

})

function onResize({ width, height }: { width: number; height: number }) {

    bannerHeight.value = height

}

</script></style>

vElementSize的原理是ResizeObserverAPI，可以监视元素的大小更改，并且每次大小更改时都会向观察者传递通知。

以下是一个简单的例子：

    <style>

        * {

            box-sizing: border-box;

            padding: 0;

            margin: 0;

        }

        div {

            height: 100px;

            width: 100%;

            background-color: yellowgreen;

        }

    </style>

<body>

    <div></div>

    <script lang="ts">

        let value = {

            width: 0

        }

        function elementSizeObserver(target) {

            const resizeObserver = new ResizeObserver(entries => {

                for (const entry of entries) {

                    value = entry.contentRect

                }

            })

            const element = document.querySelector(target)

            resizeObserver.observe(element)

        }

        elementSizeObserver('div')

    </script>

</body>

这个API的优点：

  • 响应特定元素的尺寸改变
  • 相较于传统解决方案window.resize(()=>{ Element.getBoundingClientRect... })，不依赖视口改变，不需要多次重新获取元素以得到尺寸信息

用法：（原文）

用法很简单，并且与其他观察者（例如 Performance Observer 或者 Intersection Observer）几乎相同——你可以使用 ResizeObserver() 构造函数创建一个新的 ResizeObserver，然后使用 ResizeObserver.observe() 使其寻找特定元素大小的更改。每次更改大小时，构造函数中设置的回调函数便会运行，从而提供对新尺寸的访问，并允许你根据需要执行任何操作。

解决elementplus carousel固定高度问题/ResizeObserverAPI介绍的更多相关文章

  1. Vue3解决ElementPlus Drawer或弹出对话框不生效的问题

    第一时间检查你是否还在使用 :visible.sync="drawer" 来绑定事件框的隐藏和显示,vue3.0 已经更改为通过 v-model 来绑定事件框的显示与隐藏.

  2. Android权限管理之Android 6.0运行时权限及解决办法

    前言: 今天还是围绕着最近面试的一个热门话题Android 6.0权限适配来总结学习,其实Android 6.0权限适配我们公司是在今年5月份才开始做,算是比较晚的吧,不过现在Android 6.0以 ...

  3. 介绍Unreal Engine 4中的接口(Interface)使用C++和蓝图

    这个教程是从UE4 Wiki上整理而来. 在C++中直接使用Interface大家应该很熟悉.只是简单先定义一个个有虚函数的基类,然后在子类中实现相应的虚函数.像这样的虚函数的基类一般概念上叫接口.那 ...

  4. 【故障处理】ORA-30012的解决过程

    [故障处理]ORA-30012的解决过程 1  BLOG文档结构图 2  前言部分 2.1  导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~O ...

  5. struts2漏洞原理及解决办法

    1.原理 Struts2的核心是使用的webwork框架,处理action时通过调用底层的getter/setter方法来处理http的参数,它将每个http参数声明为一个ONGL(这里是ONGL的介 ...

  6. ios固定高度禁止惯性滚动

    最近测试pad改H5的项目时,固定高度的div,超出部分滚动,但在ios下滑动特别卡顿,安卓上没问题.搜索找到解决办法 固定高度的div设置超出页面滚动,ios会出现卡顿,非常不爽.通过下面css就可 ...

  7. 解决Android单个dex文件不能超过65536个方法问题

    当我们的项目代码过大时,编译运行时会报Unable to execute dex: method ID not in[0, 0xffff]: 65536)错误.当出现这个错误时说明你本身自己的工程代码 ...

  8. 解决百度BMR的spark集群开启slaves结点的问题

    前言 最近一直忙于和小伙伴倒腾着关于人工智能的比赛,一直都没有时间停下来更新更新我的博客.不过在这一个过程中,遇到了一些问题,我还是记录了下来,等到现在比较空闲了,于是一一整理出来写成博客.希望对于大 ...

  9. Flex内存泄露解决方法和内存释放优化原则

    Flex内存泄露解决方法和内存释放优化原则 你对Flex内存泄露的概念是否了解,这里和大家分享一下Flex内存释放优化原则和Flex内存泄露解决方法,希望本文的介绍能让你有所收获. Flex内存释放优 ...

  10. 如何解决代码中if…else 过多的问题

    前言 if...else 是所有高级编程语言都有的必备功能.但现实中的代码往往存在着过多的 if...else.虽然 if...else 是必须的,但滥用 if...else 会对代码的可读性.可维护 ...

随机推荐

  1. Gitee + Sourcetree 配置公钥 SSH

    设置前提 安装Git Git下载 安装sourceTree sourceTree下载 gitee账号 gitee官网 Git设置公钥 1.在安装好 sourcetree 后 点击操作选择在终端中打开 ...

  2. 如何通过C#/VB.NET代码在Word中更改字体颜色

    在日常工作中,我们有时会需要修改字体的颜色来突出文本重点,让读者更容易抓住文章要点.在今天这篇文章中,我将为大家介绍如何以编程方式,在Word更改字体颜色.本文将分为两部分分别介绍如何实现此操作.以下 ...

  3. 真·生产力「GitHub 热点速览」

    这些工具真的能极大提高生产力,节约你的时间来自(摸)我(鱼)增(划)值(水).先别提 style2paints,你给它随意画个草图,就能给你一个能交付给甲方爸爸的成品插画.如果提升 30%-40% 传 ...

  4. 题解 P5072 【[Ynoi2015] 盼君勿忘】

    在太阳西斜的这个世界里,置身天上之森.等这场战争结束之后,不归之人与望眼欲穿的众人, 人人本着正义之名,长存不灭的过去.逐渐消逝的未来.我回来了,纵使日薄西山,即便看不到未来,此时此刻的光辉,盼君勿忘 ...

  5. PostGIS之空间索引

    1. 概述 PostGIS 是PostgreSQL数据库一个空间数据库扩展,它添加了对地理对象的支持,允许在 SQL 中运行空间查询 PostGIS官网:About PostGIS | PostGIS ...

  6. 一次线上OOM问题分析

    现象 线上某个服务有接口非常慢,通过监控链路查看发现,中间的 GAP 时间非常大,实际接口并没有消耗很多时间,并且在那段时间里有很多这样的请求. 原因分析 先从监控链路分析了一波,发现请求是已经打到服 ...

  7. vue前端实现将页面显示内容生成pdf文件的几种方法，html2canvas、dom-to-image、jspdf（带分页）基本使用以及介绍

    实际开发需求:vue项目中,根据数据结构生成echarts图表组件,生成带有样式的图表以后,点击下载按钮,把图表以pdf格式的文件下载到本地 实现思路:将vue界面的echarts组件生成图片,然后使 ...

  8. Angular ngx-translate中英文切换

    1.安装包 npm install @ngx-translate/core --save npm install @ngx-translate/http-loader --save 2.根模块app. ...

  9. 【6】java之数组的定义和使用

    一.数组的定义与使用 1.1 数组的基本概念 数组指的就是一组相关变量的集合. 数组的定义: 声明并开辟数组 数据类型 数组名称 [] = new 数据类型[长度]: 数据类型 [] 数组名称 = n ...

  10. 10base-t的数据发送

    功能 数据流(NIC) pin码 发送信号 发送回路 1 2 接收信号 接收回路 3 不使用   4 不使用   5 接收信号 接收回路 6 不使用   7 不使用   8 上图是基于10BASE-T ...