vue 简单实现转盘样式组件

<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;
        width: $width-base;
        height: $height-base;
        border: 3px inset #000;
        border-radius: 50%;
        overflow: hidden;
        transform: scale(1.3);
        transition: 1s;
    }
    .item{
        position: absolute;
        display: flex;
        justify-content: center;
        font-size: 0.5rem;
        text-align: center;
        width: 150px;
        height: $height-base;
        .area{
            padding: 5%;
            box-sizing: border-box;
            padding-top: 10%;
            width: 60%;
            height: 30%;
            background-color: rgba(249, 240, 104,0.5);
            transform:perspective(2em) rotateX(-8.5deg);
            overflow: hidden;
            border: 2px inset #ffffff;
            .show{
                transform:perspective(2em) rotateX(8.5deg);
            }
        }
    }

    .main{
        position: absolute;
        width: 140px;
        height: 140px;
        border: 10px inset brown;
        border-radius: 50%;
        z-index: 1;
    }
</style>

使用

<Control>
   <div>插槽</div> //插入想显示的元素
</Control>

效果