Vue3 + TS 百叶窗效果组件封装

OK,兄弟们!

今日忙里偷闲,我们来封装一个百叶窗效果组件,这个也是非常简单啊,我们简单写一下。

效果图

百叶窗

代码

index.vue

html 复制代码
<script setup lang="ts">
import Persiennes from "@/components/PersiennesView.vue";
// 导入图片
const webImgs = Object.keys(import.meta.glob("@/assets/images/web/*.jpg"), { eager: true }));
</script>

<template>
  <Persiennes :list="webImgs" />
</template>

PersiennesView.vue

html 复制代码
<script lang="ts" setup>
const props = defineProps<{ list: string[] }>();
const options = reactive({
  containerWidth: 1050, // 窗口宽度
  leaf: [192 * 3, 108 * 3], // 叶片尺寸 宽 高
});
const open = reactive({
  inx: -1, // 开叶
  show: false, // 叶开合
});
const leafLeft = (inx: number) => {
  // 开
  if (open.show) {
    // 剩余合叶宽度
    let gap = (options.containerWidth - options.leaf[0]) / (props.list.length - 1);
    // 开叶右侧的每叶 left + 一开叶宽度
    if (inx > open.inx) return gap * (inx - 1) + options.leaf[0];
    else return gap * inx;
  }
  // 合
  else return (options.containerWidth / props.list.length) * inx;
};
const mouseEnter = (inx: number) => {
  open.inx = inx;
  open.show = true;
};
const mouseLeave = () => (open.show = false);
</script>

<template>
  <div class="persiennes">
    <div class="persiennes-container">
      <div
        class="persiennes-leaf"
        v-for="(leaf, inx) in list"
        :key="inx"
        :style="{ left: `${leafLeft(inx)}px` }"
        @mouseenter="mouseEnter(inx)"
        @mouseleave="mouseLeave"
      >
        <img class="leaf" :src="leaf" alt="" />
        <div class="index">{{ inx + 1 }}</div>
      </div>
    </div>
  </div>
</template>

<style lang="scss" scoped>
.persiennes {
  display: flex;
  flex-direction: column;
  height: 100vh;
  background: linear-gradient(
    to bottom right,
    #ffc09c,
    #fef0cd,
    #acfdee,
    #ecbcbc,
    #a6a0c0,
    #7098bb
  );
  .persiennes-container {
    position: relative;
    width: v-bind("options.containerWidth + 20 + 'px'");
    height: v-bind("options.leaf[1] + 20 + 'px'");
    margin: 200px auto;
    border: 10px dotted white;
    border-radius: 8px;
    box-shadow: 0 0 60px rgba($color: orangered, $alpha: 0.5);
    background-color: #fff;
    overflow: hidden;
    .persiennes-leaf {
      position: absolute;
      height: v-bind("options.leaf[1] + 'px'");
      border-radius: 4px;
      overflow: hidden;
      transition: 0.3s ease-in-out;
      .leaf {
        height: 100%;
      }
      .index {
        position: absolute;
        top: 10px;
        left: 10px;
        width: 36px;
        height: 36px;
        color: #fff;
        font-size: 24px;
        font-weight: 600;
        line-height: 28px;
        text-align: center;
        border: 4px solid #fff;
        border-radius: 50%;
      }
    }
  }
}
</style>
相关推荐
YongGit4 分钟前
探索 AI + MCP 渲染前端 UI
前端·后端·node.js
慧一居士41 分钟前
<script setup>中的setup作用以及和不带的区别对比
前端
RainbowSea1 小时前
NVM 切换 Node 版本工具的超详细安装说明
java·前端
读书点滴1 小时前
笨方法学python -练习14
java·前端·python
Mintopia1 小时前
四叉树:二维空间的 “智能分区管理员”
前端·javascript·计算机图形学
Mintopia1 小时前
Three.js 深度冲突:当像素在 Z 轴上玩起 "挤地铁" 游戏
前端·javascript·three.js
Penk是个码农2 小时前
web前端面试-- MVC、MVP、MVVM 架构模式对比
前端·面试·mvc
markyankee1012 小时前
Vue.js 入门指南:从零开始构建你的第一个应用
vue.js
MrSkye2 小时前
🔥JavaScript 入门必知:代码如何运行、变量提升与 let/const🔥
前端·javascript·面试
白瓷梅子汤2 小时前
跟着官方示例学习 @tanStack-form --- Linked Fields
前端·react.js