解决elementplus carousel固定高度问题/ResizeObserverAPI介绍
2024-09-08 19:21:03
- "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()
使其寻找特定元素大小的更改。每次更改大小时,构造函数中设置的回调函数便会运行,从而提供对新尺寸的访问,并允许你根据需要执行任何操作。
最新文章
- DataTable DataRow DataColumn DataSet
- ActionBarSherlock环境搭建
- 用scrollTop制作一个自动滚动公告栏
- 利用反射将Datatable、SqlDataReader转换成List模型
- SQL搜索下划线,like中不能匹配下划线的问题
- Java每日一则-002
- jquery 多级无限分类
- Android ActivityManagerService 基本构架详解
- MS SQL 性能优化
- Iphone6 LightBlue测试BT4GMD-Q25P透传模块
- BS常用方法备忘
- SQL 常用基础语句
- Python全栈开发——Linux命令学习
- Mego开发文档 - 复杂查询
- rematch:当你受不了redux繁琐写法的时候,是时候了解一波rematch了
- 编写自己的composer项目
- Django框架(三)
- 自定义textview
- MySQL: Building the best INDEX for a given SELECT
- UNIX网络编程 第6章 I/O复用:select和poll函数