[Little tail UI 컴포넌트 라이브러리] 전체 화면 반응형 캐러셀 배경 이미지(Vue 3 및 Element Plus 기반)

기사는 https://www.yuque.com/u27599042/row3c6 에 제출되어 있습니다.

구성 요소 라이브러리 주소

• npm: https://www.npmjs.com/package/xwb-ui?activeTab=readme
• Small tail UI 구성 요소 라이브러리 소스 코드 gitee: https://gitee.com/tongchaowei/xwb-ui
• Small tail UI 구성 요소 라이브러리 테스트 코드 gitee: https://gitee.com/tongchaowei/xwb-ui-test

구성 요소 다운로드 및 구성

• [Little Tail UI 컴포넌트 라이브러리] 컴포넌트 라이브러리 구성 및 사용

구성요소 설명

• 이 구성 요소는 Vue 3 및 Element Plus를 기반으로 구현되었습니다.
• 컴포넌트는 배경 이미지를 전체 화면으로 표시하여 반응성을 구현합니다.
• 이 구성 요소는 고정 위치 지정을 사용합니다 z-index.-100
• 하나 이상의 배경 이미지를 표시해야 하는 경우 배경 이미지의 캐러셀이 활성화됩니다. 캐러셀 이미지는 Element Plus 컴포넌트 라이브러리의 캐러셀 이미지(carousel) 컴포넌트를 사용합니다.

구성 요소 속성 설명

속성 이름	속성 설명	유형	기본값
이미지	배경 이미지 주소입니다. 참고: 배경 이미지는 공용 디렉터리에 배치해야 하며, 배경 이미지 경로는 /로 시작해야 하며, 공용 디렉터리의 이미지 경로는 나중에 작성해야 합니다.	Array<string>이미지 주소 문자열로 구성된 배열	[]
간격	배경 캐러셀 스위치 배경 이미지 간격(밀리초(ms))	숫자	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"
    >
      <!--<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>