[小尾巴 UI 组件库] 全屏响应式轮播背景图（基于 Vue 3 与 Element Plus）

文章归档于：https://www.yuque.com/u27599042/row3c6

组件库地址

• npm：https://www.npmjs.com/package/xwb-ui?activeTab=readme
• 小尾巴 UI 组件库源码 gitee：https://gitee.com/tongchaowei/xwb-ui
• 小尾巴 UI 组件库测试代码 gitee：https://gitee.com/tongchaowei/xwb-ui-test

组件的下载与配置

• [小尾巴 UI 组件库] 组件库配置与使用

组件说明

• 该组件基于 Vue 3 与 Element Plus 实现
• 该组件全屏显示背景图片，实现了响应式
• 该组件使用了粘滞定位，其中 z-index 的值为 -100
• 当需要显示的背景图片多于一张时，会开启背景图片的轮播，轮播图使用了 Element Plus 组件库中轮播图（走马灯）组件

组件属性说明

组件测试

<script setup lang="ts"></script><template><div><GoodsCardRowSmallclass="goods"v-for="i in 20":imgSrc="'/img/book-1.png_580x580q90.jpg_.webp'"></GoodsCardRowSmall></div><!-- 使用全屏响应式轮播背景图组件 --><Background:images="['/img/background-1.jpg', '/img/background-1.jpg', '/img/background-1.jpg']":interval="5000"></Background>
</template><style scoped lang="scss">
div {.goods {margin-bottom: 1rem;}
}
</style>

组件源码

<script setup lang="ts">
/* 接收参数 */
const props = defineProps({// 背景需要展示的图片images: {type: Array<string>, default: []},// 背景图片有多张时，每个背景图片轮播的事件间隔，单位“毫秒”interval: {type: Number, default: 5000}
})/** 处理图片响应式问题* 使用 vueuse 监听容器大小修改图片宽高显示* 修改为使用背景图片实现背景响应式*/
// import { vElementSize } from '@vueuse/components' // 获取元素大小的指令
// // 指令绑定的元素宽度改变时调用函数
// function onResize({ width, height }: { width: number; height: number }) {
//   // 获取所有图片
//   let imgs = document.querySelectorAll('img')
//   let wh = width/height // 宽高比
//   if (
//       wh < 1960/1080 ||
//       wh < 1760/990 ||
//       wh < 1690/1050 ||
//       wh < 1600/900 ||
//       wh < 1366/768 ||
//       wh < 1280/1024 ||
//       wh < 1280/720 ||
//       wh < 1128/634 ||
//       wh < 1024/768 ||
//       wh < 800/600
//   ) {
//     imgs.forEach(img => {
//       img.style.height = '100%'
//       img.style.width = 'auto'
//     })
//   } else {
//     imgs.forEach(img => {
//       img.style.height = 'auto'
//       img.style.width = '100%'
//     })
//   }
// }
/* 动态添加背景 */
import {onMounted} from 'vue'
onMounted(() => {document.querySelectorAll('.img').forEach((img, idx) => {img.style.backgroundImage = `url(${props.images[idx]})`})
})
</script><template><div class="background-container"><!-- 单个背景图片 --><divclass="background-img"v-if="images.length == 1"><!--<img :src="images[0]" alt="背景图片" ref="img">--><div class="img"></div></div><!-- 轮播图组件，展示多个背景图 --><div class="carousel" v-else-if="images.length > 1"><el-carousel height="100vh" :interval="interval"><el-carousel-item v-for="idx in images.length" :key="idx"><div class="img"></div></el-carousel-item></el-carousel></div></div>
</template><style scoped lang="scss">
// 图片变化过度
img {transition: all 0.5s;
}
// 背景组件容器
.background-container {// 粘滞定位position: fixed;top: 0;left: 0;z-index: -100;width: 100%;height: 100vh;// 单个背景图片.background-img {width: 100%;height: 100%;}// 轮播图展示多个背景图片.carousel {height: 100%;width: 100%;}// 图片盒子样式.img {width: 100%;height: 100%;background-size: cover;background-position: center;background-attachment: fixed; // 背景图片粘滞}
}
</style>