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="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>
複製代碼