组件库地址

组件的下载与配置

组件说明

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

组件属性说明

属性名 属性说明 类型 默认值
images 背景图片地址
注意：背景图片需要放置在 public 目录下，背景图片的路径需要以 / 开头，后面编写图片在 public 目录下的路径		 Array
由图片地址字符串组成的数组		 []
interval 背景轮播切换背景图片的时间间隔，单位毫秒（ms） Number 5000

组件测试

  1. <script setup lang="ts">
  3. </script>
  5. <template>
  6.   <div>
  7.     <GoodsCardRowSmall
  8.         class="goods"
  9.         v-for="i in 20"
  10.         :imgSrc="'/img/book-1.png_580x580q90.jpg_.webp'"
  11.     ></GoodsCardRowSmall>
  12.   </div>
  13.   <!-- 使用全屏响应式轮播背景图组件 -->
  14.   <Background
  15.       :images="['/img/background-1.jpg', '/img/background-1.jpg', '/img/background-1.jpg']"
  16.       :interval="5000"
  17.   ></Background>
  18. </template>
  20. <style scoped lang="scss">
  21. div {
  22.   .goods {
  23.     margin-bottom: 1rem;
  24.   }
  25. }
  26. </style>
  • 全屏响应式轮播背景图（基于 Vue 3 与 Element Plus） - 图1

组件源码

  1. <script setup lang="ts">
  2. /* 接收参数 */
  3. const props = defineProps({
  4.   // 背景需要展示的图片
  5.   images: {type: Array<string>, default: []},
  6.   // 背景图片有多张时，每个背景图片轮播的事件间隔，单位“毫秒”
  7.   interval: {type: Number, default: 5000}
  8. })
  10. /*
  11.  * 处理图片响应式问题
  12.  * 使用 vueuse 监听容器大小修改图片宽高显示
  13.  * 修改为使用背景图片实现背景响应式
  14.  */
  15. // import { vElementSize } from '@vueuse/components' // 获取元素大小的指令
  16. // // 指令绑定的元素宽度改变时调用函数
  17. // function onResize({ width, height }: { width: number; height: number }) {
  18. //   // 获取所有图片
  19. //   let imgs = document.querySelectorAll('img')
  20. //   let wh = width/height // 宽高比
  21. //   if (
  22. //       wh < 1960/1080 ||
  23. //       wh < 1760/990 ||
  24. //       wh < 1690/1050 ||
  25. //       wh < 1600/900 ||
  26. //       wh < 1366/768 ||
  27. //       wh < 1280/1024 ||
  28. //       wh < 1280/720 ||
  29. //       wh < 1128/634 ||
  30. //       wh < 1024/768 ||
  31. //       wh < 800/600
  32. //   ) {
  33. //     imgs.forEach(img => {
  34. //       img.style.height = '100%'
  35. //       img.style.width = 'auto'
  36. //     })
  37. //   } else {
  38. //     imgs.forEach(img => {
  39. //       img.style.height = 'auto'
  40. //       img.style.width = '100%'
  41. //     })
  42. //   }
  43. // }
  44. /* 动态添加背景 */
  45. import {onMounted} from 'vue'
  46. onMounted(() => {
  47.   document.querySelectorAll('.img').forEach((img, idx) => {
  48.     img.style.backgroundImage = `url(${props.images[idx]})`
  49.   })
  50. })
  51. </script>
  53. <template>
  54.   <div class="background-container">
  55.     <!-- 单个背景图片 -->
  56.     <div
  57.         class="background-img"
  58.         v-if="images.length == 1"
  59.     >
  60.       <!--<img :src="images[0]" alt="背景图片" ref="img">-->
  61.       <div class="img"></div>
  62.     </div>
  63.     <!-- 轮播图组件，展示多个背景图 -->
  64.     <div class="carousel" v-else-if="images.length > 1">
  65.       <el-carousel height="100vh" :interval="interval">
  66.         <el-carousel-item v-for="idx in images.length" :key="idx">
  67.           <div class="img"></div>
  68.         </el-carousel-item>
  69.       </el-carousel>
  70.     </div>
  71.   </div>
  72. </template>
  74. <style scoped lang="scss">
  75. // 图片变化过度
  76. img {
  77.   transition: all 0.5s;
  78. }
  79. // 背景组件容器
  80. .background-container {
  81.   // 粘滞定位
  82.   position: fixed;
  83.   top: 0;
  84.   left: 0;
  85.   z-index: -100;
  86.   width: 100%;
  87.   height: 100vh;
  89.   // 单个背景图片
  90.   .background-img {
  91.     width: 100%;
  92.     height: 100%;
  93.   }
  95.   // 轮播图展示多个背景图片
  96.   .carousel {
  97.     height: 100%;
  98.     width: 100%;
  99.   }
  101.   // 图片盒子样式
  102.   .img {
  103.     width: 100%;
  104.     height: 100%;
  105.     background-size: cover;
  106.     background-position: center;
  107.     background-attachment: fixed; // 背景图片粘滞
  108.   }
  109. }
  110. </style>