【Element plus】走马灯高度自适应 |
您所在的位置:网站首页 › 走马灯的制作图片 › 【Element plus】走马灯高度自适应 |
elemen plus走马灯高度有固定值,做pc端轮播图无法根据窗口的宽度,实现高度自适应 解决办法:监听页面缩放 在走马灯外先给一个容器方便处理样式,给走马灯一个响应高度,用ref获取图片节点 每次缩放都会触发监听事件,拿到图片高度的值,然后把图片高度的值给到走马灯,但是刚加载,不会触发监听事件,所以需要先给newHeight一个初始值,我这里是估了图片撑满时高度的值。 js: // 轮播图图片数据 const bannerPic = reactive([ { url: require("../assets/images/1654155115s6JpXe2Kew.png") }, { url: require("../assets/images/1645781194NbHxdhxzYr.png") }, { url: require("../assets/images/1636446752RtKZ5hRhKw.png") } ]); // 获取轮播图片的节点 const bannerImg = ref() // 轮播图自适应高度 const newHeight = ref('315px') //监听屏幕缩放事件, onMounted(() => { window.onresize = () => { newHeight.value = bannerImg.value[0].clientHeight + 'px' } css: .swiper { margin: 0 0 40px 0; min-width: 1210px; overflow: hidden; .el-carousel { width: 100%; overflow: hidden; :deep(.el-carousel__container) { height: v-bind(newHeight); } :deep(.el-carousel__item) { height: auto !important; } }这个方法感觉并不是很完美,但是也能勉强解决问题,如果大家有更好的办法,欢迎来指教! |
今日新闻 |
点击排行 |
|
推荐新闻 |
图片新闻 |
|
专题文章 |
CopyRight 2018-2019 实验室设备网 版权所有 win10的实时保护怎么永久关闭 |