th-lucky-plate

一个大转盘逻辑@Vue2.x

Install

# install dependencies
npm install th-lucky-plate --save

Usage

main.js中引入

import NameCustom from 'th-lucky-plate'

Vue.use(NameCustom)

Api

list(Array): slot传入转盘的奖品列表

list: [{awardId: 1, img: ''}]

id: 奖品对应的id 根据list中awardId对比

getPrize(Function): 点击指针触发的自定义方法

例: getPrize () {
      // 对应逻辑-弹窗-获取id接口-给id赋值
    }

getAward(Function): 回传的奖品列表index值

例: getAward (index) {
      console.log(index)
    }

rotate(Number): 旋转角度 默认7200

time(Number): 时间 默认 5000

示例

  <template>
    <div id="app">
      <wheel
        class="lucky"
        :list="list"
        :id="id"
        :getPrize="getPrize"
        @getAward="getAward"
      >
        <!-- 转盘 -->
        <div slot="plate" class="lucky-plate">
          <div
            :class="['level', `level-${index + 1}`]"
            v-for="(item, index) in list"
            :key="index"
          >
            <figure>
              <img :src="item.img" />
            </figure>
          </div>
        </div>
        <!-- 指针 -->
        <div slot="pointer" class="pointer"></div>
      </wheel>
    </div>
  </template>

  <script>
  export default {
    name: 'App',
    data () {
      return {
        id: 0,
        list: [
          {
            awardId: 1,
            img:
              'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192817-2699.png'
          },
          {
            awardId: 2,
            img:
              'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192805-5779.png'
          },
          {
            awardId: 3,
            img:
              'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192750-8935.png'
          },
          {
            awardId: 4,
            img:
              'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192738-5669.png'
          },
          {
            awardId: 5,
            img:
              'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192725-9317.png'
          },
          {
            awardId: 6,
            img:
              'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192710-9475.png'
          },
          {
            awardId: 7,
            img:
              'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192656-4393.png'
          },
          {
            awardId: 8,
            img:
              'https://img8.kcimg.cn/HW_Image/Turntable/2020/1011/20201011192120-7118.png'
          }
        ]
      }
    },
    methods: {
      getPrize () {
        this.id = 2
      },
      getAward (index) {
        console.log(index)
      }
    }
  }
  </script>

  <style lang="less">
  #app {
    height: 100%;
    width: 100%;
    overflow: hidden;
  }
  .plate {
    position: relative;
    width: 700px;
    height: 700px;
    background-image: url(http://s.kcimg.cn/topic/images/2020-autumnSeason/scale_bg.png);
    background-size: 100% 100%;
    margin: 0px auto;
    figure {
      max-width: 200px;
      margin: 0;
      img {
        position: relative;
        width: 105px;
        display: block;
        object-fit: contain;
        overflow: hidden;
        margin: 0px auto;
      }
    }
    .level {
      position: absolute;
    }
    .level-1 {
      top: 82px;
      left: 50%;
      transform: translateX(-50%) rotate(0deg);
    }
    .level-2 {
      top: 147px;
      left: 55%;
      transform: translateX(30%) rotate(45deg);
    }
    .level-3 {
      top: 295px;
      left: 62%;
      transform: translateX(64%) rotate(91deg);
    }
    .level-4 {
      top: 447px;
      left: 57%;
      transform: translateX(22%) rotate(136deg);
    }
    .level-5 {
      top: 508px;
      left: 50%;
      transform: translateX(-50%) rotate(180deg);
    }
    .level-6 {
      top: 451px;
      left: 102px;
      transform: translateX(31%) rotate(225deg);
    }
    .level-7 {
      top: 295px;
      left: 80px;
      transform: translateX(0px) rotate(-90deg);
    }
    .level-8 {
      top: 145px;
      left: 13%;
      transform: translateX(53%) rotate(-46deg);
    }
  }
  .pointer {
    cursor: pointer;
    width: 300px;
    height: 234px;
    position: absolute;
    top: -40px;
    bottom: 0px;
    left: 0px;
    right: 0px;
    margin: auto;
    background: url(http://s.kcimg.cn/topic/images/2020-autumnSeason/gift_center_btn.png)
      50% center / 192px 234px no-repeat;
  }
  </style>

可以进行交流、指导。QQ:546534045（注明 npm、谢谢）