多项卡片展示组件

青旬

前端开发时遇到一个比较特殊的需求，花了点时间写出来这组件，效果如下

该组件支持多张图片显示，可以根据图片数量自适应宽度。

如果传入的数据没有标题简介的话，则图片下侧没有阴影

  1. <template>
  2.   <div class="container" :class="{ 'bg-transparent': bgFlag }">
  3.     <div class="content">
  4.       <div class="title">{{ moduleData.module.name }}</div>
  5.       <div class="carousel">
  6.         <div class="carousel-item"
  7.              v-for="(item, index) in moduleData.children"
  8.              :key="index"
  9.              @mouseover="expandItem(index)"
  10.              :style="{
  11.             backgroundImage: `linear-gradient(180deg, rgba(0, 17, 128, 0.00) 0%, rgba(0, 13, 54, 0.60) 100%), url(${initImgPath() + item.module.imgUrl})`,
  12.             width: activeIndex === index ? `calc(1200px - 160px * (${moduleData.children.length} - 1))` : '160px',
  13.           }"
  14.         >
  15.           <div class="carousel-item-content">
  16.             <transition name="fade">
  17.               <div v-if="item.module.title"
  18.                    class="carousel-item-content-title"
  19.                    :key="activeIndex === index ? 'visible' : 'hidden'"
  20.                    :style="{
  21.                      width: activeIndex !== index ? '150px' : '100%',
  22.                      justifyContent: activeIndex !== index ? 'center' : 'left',
  23.                    }">
  24.                 {{ item.module.title }}
  25.               </div>
  26.             </transition>
  27.             <transition name="fade">
  28.               <div v-if="item.module.profile"
  29.                    v-show="activeIndex === index"
  30.                    class="carousel-item-content-profile">
  31.                 {{ item.module.profile }}
  32.               </div>
  33.             </transition>
  34.           </div>
  35.         </div>
  36.       </div>
  37.     </div>
  38.   </div>
  39. </template>
  40.  
  41. <script>
  42. import initImgPath from "@/myHooks/initImgPath.js";
  43.  
  44. export default {
  45.   props: {
  46.     moduleData: {
  47.       type: Object,
  48.       required: true,
  49.     },
  50.     bgFlag: {
  51.       type: Boolean,
  52.       default: true,
  53.     },
  54.   },
  55.   data() {
  56.     return {
  57.       activeIndex: 0, // 当前激活的页面索引
  58.     };
  59.   },
  60.   methods: {
  61.     initImgPath,
  62.     expandItem(index) {
  63.       this.activeIndex = index; // 记录当前展开的图片索引
  64.     },
  65.   },
  66. };
  67. </script>
  68.  
  69. <style scoped>
  70. .container {
  71.   position: relative;
  72.   background: url("@/assets/images/9bed669d7b993dc75ead81d19db9fdaf.png") lightgray 50% / cover no-repeat;
  73.   box-shadow: 0px 2px 35.686px 0px rgba(5, 42, 68, 0.04), 0px 4px 12.907px 0px rgba(5, 42, 68, 0.03);
  74.   display: flex;
  75.   flex-direction: column;
  76.   padding: 20px 360px 100px 360px;
  77.   justify-content: center;
  78.   align-items: center;
  79. }
  80.  
  81. .container::before {
  82.   content: "";
  83.   position: absolute;
  84.   top: 0;
  85.   left: 0;
  86.   right: 0;
  87.   bottom: 0;
  88.   background: rgba(244, 247, 251, 0.95);
  89.   z-index: 1;
  90. }
  91.  
  92. .bg-transparent::before {
  93.   background: rgba(255, 255, 255, 0.95); /* 半透明的白色背景 */
  94. }
  95.  
  96. .content {
  97.   position: relative;
  98.   z-index: 2;
  99.   width: 1200px;
  100. }
  101.  
  102. .title {
  103.   color: #222635;
  104.   text-align: center;
  105.   font-size: 32px;
  106.   font-style: normal;
  107.   font-weight: 700;
  108.   line-height: normal;
  109.   letter-spacing: 1.6px;
  110.   padding: 60px;
  111. }
  112.  
  113. .carousel {
  114.   width: 1200px; /* 整体宽度 */
  115.   height: 600px; /* 整体高度 */
  116.   display: flex;
  117.   justify-content: center;
  118.   overflow: hidden;
  119.   gap: 4px;
  120. }
  121.  
  122. .carousel-item {
  123.   display: inline-flex;
  124.   width: 160px; /* 未展开状态宽度 */
  125.   height: 600px;
  126.   padding: 534px 38px 40px 38px;
  127.   flex-direction: column;
  128.   justify-content: flex-end;
  129.   align-items: center;
  130.   flex-shrink: 0;
  131.   border-radius: 4px;
  132.   transition: width 0.3s ease; /* 动画效果 */
  133.   background-size: cover;
  134.   background-position: center;
  135. }
  136.  
  137. .carousel-item-content {
  138.   width: 100%;
  139.   position: relative;
  140.   display: flex;
  141.   justify-content: center;
  142.   align-items: center;
  143.   flex-direction: column;
  144.   bottom: -20px;
  145.   padding: 0;
  146. }
  147.  
  148. .carousel-item-content-title {
  149.   width: 100%;
  150.   color: #FFF;
  151.   display: flex;
  152.   font-size: 20px;
  153.   font-style: normal;
  154.   font-weight: 600;
  155.   line-height: normal;
  156.   letter-spacing: 1px;
  157.   margin-bottom: 10px;
  158. }
  159.  
  160. .carousel-item-content-profile {
  161.   width: 100%;
  162.   color: #D9DDEB;
  163.   font-size: 16px;
  164.   font-style: normal;
  165.   font-weight: 400;
  166.   line-height: normal;
  167.   letter-spacing: 0.8px;
  168.   overflow: hidden; /* 隐藏超出部分 */
  169.   display: -webkit-box; /* 使用 flexbox */
  170.   -webkit-box-orient: vertical; /* 垂直排列 */
  171.   -webkit-line-clamp: 2;
  172.   text-align: left;
  173.   opacity: 1;
  174. }
  175.  
  176. .fade-enter-from {
  177.   opacity: 0;
  178. }
  179.  
  180. .fade-leave-from, .fade-leave-to {
  181.   display: none;
  182. }
  183.  
  184. .fade-enter-active, .fade-leave-active {
  185.   transition: opacity 0.5s ease;
  186. }
  187. .fade-enter, .fade-enter-to /* .fade-enter-active below version <2.1.8 */ {
  188.   opacity: 1;
  189. }
  190.  
  191. @font-face {
  192.   font-family: 'OPPOSans';
  193.   src: url('@/assets/fonts/OPPOSans-R.ttf') format('truetype'); /* 确保路径正确 */
  194.   font-style: normal; /* 如果有斜体，可以添加 */
  195. }
  196. </style>
html

这个组件的动画比较特殊，首先给carousel-item设置一个0.3秒的width变化动画，因为需要做鼠标光标悬停在当前图片的展开动画。

然后这里并没有使用:hover做鼠标悬停的样式，因为涉及到图片自适应，需要根据当前图片数量来计算出展开后的大小。（未展开默认宽度为160px）

width: activeIndex === index ? `calc(1200px - 160px * (${图片数量} - 1))` : '160px',
html

这样图片的样式就算写好了，接下来开始写标题和简介的样式

图片组件内的标题组件不管是展开还是未展开的状态都是一定会显示的（当传入的数据里面有title的情况），简介组件只有在图片展开的情况才会展示。所以要添加 v-show="activeIndex === index"  这个条件。

然后根据展开和未展开的情况给标题组件添加不同的样式

  1. :style="{
  2.   width: activeIndex !== index ? '150px' : '100%',
  3.   justifyContent: activeIndex !== index ? 'center' : 'left',
  4. }"
html

因为title没有v-show，所以在使用<transition>前要添加 :key="activeIndex === index ? 'visible' : 'hidden'"  来强制 Vue 重新渲染该组件

接着就是动画的处理了，我设计的是在每次展开图片时，将标题简介设置为完全透明，再通过动画将其渐变为可见状态。

  1. .fade-enter-from {
  2.   opacity: 0; // 设置组件在进入动画的始状态为透明
  3. }
  4.  
  5. .fade-leave-from, .fade-leave-to {
  6.   display: none; // 设置组件在离开动画的始末状态为不可见
  7. }
  8.  
  9. .fade-enter-active, .fade-leave-active {
  10.   transition: opacity 0.5s ease; // 透明度渐变的设置
  11. }
  12. .fade-enter, .fade-enter-to /* .fade-enter-active below version <2.1.8 */ {
  13.   opacity: 1; // 设置组件在动画进入动画、进入动画的末状态时可见
  14. }
html

最后在最外层元素carousel组件上添加样式

  1. display: flex;
  2. justify-content: center;
html

一个非常简单的多项卡片展示组件就算做好了