文章归档于：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 组件库中轮播图（走马灯）组件
组件属性说明
| 属性名 | 属性说明 | 类型 | 默认值 |
|---|---|---|---|
| images | 背景图片地址。注意：背景图片需要放置在 public 目录下，背景图片的路径需要以 / 开头，后面编写图片在 public 目录下的路径 | Array<string> 由图片地址字符串组成的数组 | [] |
| interval | 背景轮播切换背景图片的时间间隔，单位毫秒（ms） | Number | 5000 |
组件测试
<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>
