[小尾巴 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 组件库中轮播图（走马灯）组件

组件属性说明

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

组件测试

<script setup lang="ts">

script>

<template>
  <div>
    <GoodsCardRowSmall
        class="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">
    
    <div
        class="background-img"
        v-if="images.length == 1"
    >
      
      <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>