vue中纯CSS3 实现转盘样式

tips：

1.可以根据奖品数量进行转盘等分（可以做到通用性，不需要写很多套样式）；

2.主要用到transform中的rotate和skewY;

3.这个转盘至少是4等分的，否则样式会错乱；

最终效果：

1.html（主要是计算底部等分块状的旋转角度和倾斜角度）

<template>

<div class="luckBg">

    <div class="luckWhellBg">

        <div class="luckWhellBgMain">

            <div  :class="['luckWhellSector']" v-for='(item,index) in prize_List' :key="index" :style="{transform:'rotate('+index*360/prize_List.length+'deg) skewY(-'+(prize_List.length-4)*90/prize_List.length+'deg)'}"> 

            </div>

        </div>

        <div class="wheel-main">

            <div class="prize-list" >

                <div class="prize-item" v-for='(item,index) in prize_List' :key="index" :style="item.style">

                    <div>

                        {{item.prize_name}}

                    </div>

                    <div style="padding-top:5px;">

                        <img :src="https://juejin.cn/post/item.img" style="width:55%"/>

                    </div>

                </div>

            </div>

            <div  class="prize_point">

            </div>

        </div>

    </div>

</div>

</template>
复制代码

2.js部分（放入转盘列表以及计算每个文字区域的旋转角度及其他样式）

<script>

const CIRCLE_ANGLE = 360;

const BIGSIZE = 24;

export default {

    data() {

        return {

            list: [{

                id:1,

                img:'https://img01.yzcdn.cn/vant/cat.jpeg',

                prize_name:"乐豆10"

                },{

                id:2,

                img:'https://img01.yzcdn.cn/vant/cat.jpeg',

                prize_name:"乐豆20"

                },{

                id:3,

                img:'https://img01.yzcdn.cn/vant/cat.jpeg',

                prize_name:"乐豆30"

                },{

                id:4,

                img:'https://img01.yzcdn.cn/vant/cat.jpeg',

                prize_name:"乐豆200"

                },{

                id:5,

                img:'https://img01.yzcdn.cn/vant/cat.jpeg',

                prize_name:"乐豆5"

                },{

                id:6,

                img:'https://img01.yzcdn.cn/vant/cat.jpeg',

                prize_name:"乐豆100"

                } ,{

                id:7,

                img:'https://img01.yzcdn.cn/vant/cat.jpeg',

                prize_name:"乐豆500"

                },{

                id:8,

                img:'https://img01.yzcdn.cn/vant/cat.jpeg',

                prize_name:"乐豆800"

                }

                ],//奖品列表

                   prize_List:[],

        }

    },

    mounted() {

        this.prize_List=this.formatPrizeList(this.list);

    },

    methods: {

        //每个奖增加style

        formatPrizeList(list) {

          // 记录每个奖的位置

          const angleList = [];

          const l = list.length;

          // 计算单个奖项所占的角度

          const average = CIRCLE_ANGLE / l; //60

          const half = average / 2; //30

          // 循环计算给每个奖项添加style属性

          list.forEach((item, i) => {

                // 每个奖项旋转的位置为 当前 i * 平均值 + 平均值 / 2

                const angle = -(i * average + half);

                // 增加 style

                item.style = `-webkit-transform: rotate(${-angle}deg);transform: rotate(${-angle}deg); width:${100/l*2}%; margin-left: -${100/l}%;font-size:${BIGSIZE-l}px;`;

             // 记录每个奖项的角度范围

            angleList.push(angle);

          });

          this.angleList = angleList;

          return list;

        },

    }

}

</script>
复制代码

3.css部分

<style lang="scss">

.luckBg{

    background: #ffcf49;

    width: 20rem;

    height:20rem;

    border-radius: 50%;

    margin:0 auto;

    padding:5px;

    .luckWhellBg,.luckWhellBgMain{

        background: #fff;

        width: 100%;

        height:100%;

        border-radius: 50%;

        position:relative;

        overflow: hidden;

    }

    .luckWhellSector{

        position:absolute;

        width: 0;

        height:  0;

        top: 0;

        right: 0;

        width: 50%;

        height: 50%;

        transform-origin: 0% 100%;

        border:1px solid #facd89;

        border-right:0;

        border-top:0;

        box-sizing: border-box;

    }

    .luckWhellSector:nth-child(2n){

        position:absolute;

        background: #fff3d8;

    }

    .wheel-main{

        position:absolute;

        left:0;

        right:0;

        top:0;

        bottom:0;

        width: 100%;

        height:100%;

        z-index: 2;

    }

    .prize-list {

        width: 100%;

        height: 100%;

        position: relative;

        .prize-item {

          position: absolute;

          left:50%;

          height:50%;

          padding-top:15px;

          box-sizing: border-box;

          text-align: center;

          transform-origin: 50% 100%; 

          color:#F83C0E;

        }

    }

    .prize_point{

        position:absolute;

        left:50%;

        background: #ff3a60;

        width: 4rem;

        height:4rem;

        top:50%;

        margin-left:-2rem;

        margin-top:-2rem;

        border-radius: 50%;

    }

    .prize_point::after{

        position:absolute;

        left:50%;

        top:-1.5rem;

        width:0;

        height:0;

        margin-left:-1rem;

        border: 1rem solid;

        border-color: transparent transparent #ff3a60;

        content: '';

    }

}

</style>
复制代码