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

OK，兄弟们！

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

效果图

代码

index.vue

<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

<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"><divclass="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>