vue 简单实现转盘样式组件

z1625000762

于 2022-10-21 12:47:58 发布

阅读量1k

点赞数 1

文章标签： css html vue

本文链接：https://blog.youkuaiyun.com/z1625000762/article/details/127443816

版权

这个博客展示了如何使用Vue.js创建一个旋转布局组件。通过`v-for`指令动态渲染8个区块，并应用CSS3变换实现3D旋转效果。组件包含一个主要区域和多个带有背景色的子项，子项通过`getItem`方法计算旋转角度。整体样式包括绝对定位、边框、内阴影和过渡动画，提供了一种视觉上吸引人的展示方式。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

<template>
    <div class="box">
        <div class="main"></div>
        <div class="item" v-for="i in 8" :style="getitem(i-1,0)" :key="i">
            <div class="area">
                <div class="show">
                    <slot></slot>
                </div>
            </div>
        </div>
    </div>
</template>

<script setup>
const getitem = (index,off)=>{
    return `transform: rotateZ(${index*45+off}deg);`
}
</script>

<style lang="scss" scoped>
    $width-base:300px;
    $height-base:300px;
    .box{
        display: flex;
        position: absolute;
        z-index: 10;
        left: 600px;
        top: 140px;
        justify-content: center;
        align-items: center;
        box-sizing: border-box;
        w