解决elementplus carousel固定高度问题/ResizeObserverAPI介绍
- "element-plus": "^2.2.26",
- "@vueuse/components": "^9.7.0",
原理：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介绍的更多相关文章
- Vue3解决ElementPlus Drawer或弹出对话框不生效的问题
第一时间检查你是否还在使用 :visible.sync="drawer" 来绑定事件框的隐藏和显示,vue3.0 已经更改为通过 v-model 来绑定事件框的显示与隐藏.
- Android权限管理之Android 6.0运行时权限及解决办法
前言: 今天还是围绕着最近面试的一个热门话题Android 6.0权限适配来总结学习,其实Android 6.0权限适配我们公司是在今年5月份才开始做,算是比较晚的吧,不过现在Android 6.0以 ...
- 介绍Unreal Engine 4中的接口(Interface)使用C++和蓝图
这个教程是从UE4 Wiki上整理而来. 在C++中直接使用Interface大家应该很熟悉.只是简单先定义一个个有虚函数的基类,然后在子类中实现相应的虚函数.像这样的虚函数的基类一般概念上叫接口.那 ...
- 【故障处理】ORA-30012的解决过程
[故障处理]ORA-30012的解决过程 1 BLOG文档结构图 2 前言部分 2.1 导读和注意事项 各位技术爱好者,看完本文后,你可以掌握如下的技能,也可以学到一些其它你所不知道的知识,~O ...
- struts2漏洞原理及解决办法
1.原理 Struts2的核心是使用的webwork框架,处理action时通过调用底层的getter/setter方法来处理http的参数,它将每个http参数声明为一个ONGL(这里是ONGL的介 ...
- ios固定高度禁止惯性滚动
最近测试pad改H5的项目时,固定高度的div,超出部分滚动,但在ios下滑动特别卡顿,安卓上没问题.搜索找到解决办法 固定高度的div设置超出页面滚动,ios会出现卡顿,非常不爽.通过下面css就可 ...
- 解决Android单个dex文件不能超过65536个方法问题
当我们的项目代码过大时,编译运行时会报Unable to execute dex: method ID not in[0, 0xffff]: 65536)错误.当出现这个错误时说明你本身自己的工程代码 ...
- 解决百度BMR的spark集群开启slaves结点的问题
前言 最近一直忙于和小伙伴倒腾着关于人工智能的比赛,一直都没有时间停下来更新更新我的博客.不过在这一个过程中,遇到了一些问题,我还是记录了下来,等到现在比较空闲了,于是一一整理出来写成博客.希望对于大 ...
- Flex内存泄露解决方法和内存释放优化原则
Flex内存泄露解决方法和内存释放优化原则 你对Flex内存泄露的概念是否了解,这里和大家分享一下Flex内存释放优化原则和Flex内存泄露解决方法,希望本文的介绍能让你有所收获. Flex内存释放优 ...
- 如何解决代码中if…else 过多的问题
前言 if...else 是所有高级编程语言都有的必备功能.但现实中的代码往往存在着过多的 if...else.虽然 if...else 是必须的,但滥用 if...else 会对代码的可读性.可维护 ...
随机推荐
- springcloud 08 Hystrix图形化DashBoard
#1.构建一个服务监控模块 ##1.1创建模块cloud-consumer-hystrix-dashboard9001 ##1.2pom文件依赖 <dependencies> <!- ...
- mysql19-锁
1.什么是锁 锁是计算机协调多个进程或线程并发访问某一资源的机制.在数据库中,除传统的计算资源(如CPU.RAM.I/O等)的争用以外,数据也是一种供许多用户共享的资源.如何保证数据并发访问的一致性. ...
- 无法加载 DLL“*******.dll”: 找不到指定的模块。 (异常来自 HRESULT:0x8007007E)。
无法加载 DLL"Lib\WeWorkFinanceSdk.dll": 找不到指定的模块. (异常来自 HRESULT:0x8007007E). 网上查找了一大堆,没找到是什么问题 ...
- P3_注册小程序账号&安装开发者工具
注册小程序账号 点击注册按钮 使用浏览器打开 https://mp.weixin.qq.com/ 网址,点击右上角的"立即注册"即可进入到小程序开发账号的注册流程,主要流程截图如下 ...
- ROS创建一个基本功能包
1.mkdir catkin_ws/src 2.cd catkin_ws/src 3.catkin_init_workspace 4.cd ~/catkin_ws/ 5.catkin_make 6.在 ...
- 自己动手从零写桌面操作系统GrapeOS系列教程——6.电脑启动过程介绍
学习操作系统原理最好的方法是自己写一个简单的操作系统. 按一下电脑上的电源按钮,电脑就启动了,不一会儿电脑屏幕上就出现了登录界面或直接进入了桌面. 这是一个很日常的场景,但有时候会有个疑问:电脑内部是 ...
- WGCMS 奇迹网站系统 介绍[V2023.2.2]
智鹏网站系统,请勿用作非法用途 权利和义务: 程序仅限学习技术使用,未经官方许可不得用于商业! 程序售价500元一套,绑定域名,不限制端口.如绑定:xx.com,则www.xx.com.mu.xx.c ...
- spring 事务不生效
1.方法自身(this)调用问题,导致事务失效 非事务方法seckillVoucher()中调用的自身类的事务方法createVoucherOrder(). 解决办法: ps:要加aspj依赖,同时在 ...
- mybatis处理一对多的映射关系
实体类 package org.example.entity; import java.util.List; public class Dept { private Integer deptId; p ...
- Mybatis-Plus学习
mybatis-plus 学习 系统环境 jdk8+mysql5.7+springBoot+mybatis最新版本+系统编码UTF-8 文件配置 application.properties # 应用 ...