vue实现抽奖转盘

最新推荐文章于 2025-02-21 17:52:08 发布

fansfanfan

最新推荐文章于 2025-02-21 17:52:08 发布

阅读量2.8k

点赞数 3

分类专栏： VUE 文章标签： vue.js elementui javascript

本文链接：https://blog.youkuaiyun.com/fansfanfan/article/details/123010812

版权

本文介绍了如何利用Vue.js和ElementUI框架创建一个抽奖转盘组件。通过详细步骤和代码实例，展示了如何在Vue项目中集成并使用这个组件。

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

转盘组件代码如下

<template>
  <div class="turntable" ref="turntable">
    <div class="myTurntable" :style="{transform: rotateAngle, transition: rotateTransition}">
      <canvas id="canvas" ref="canvas">
        当前浏览器版本过低,请使用其他浏览器尝试
      </canvas>
      <div class="prize-container">
        <div v-for="(item, index) in prizeData" :key="index" class="item" :style="getRotateAngle(index)">
          <slot name="item" :item="item"></slot>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    name: 'round-turntable',
    mounted() {
      this.init();
    },
    props: {
      prizeData: {
        required: true
      },
      rotateCircle: {
        default: 6
      },
      turntableStyleOption: {
        default: () => {
          return {
            // 背景色
            prizeBgColors: ['#ffdfd4', '#fffdfe', '#ffdfd4', '#fffdfe', '#ffdfd4', '#fffdfe', '#ffdfd4', '#fffdfe'],
            // 转盘的外边框颜色
            borderColor: '#f9dc84'
          };
        }
      },
      duringTime: {
        default: 4.5
      }
    },
    data() {
      return {
        // 开始转动的角度
        startRotateDegree: 0,
        rotateAngle: 0,
        rotateTransition: ''
      };
    },
    methods: {
      // 根据index计算每一格要旋转的角度的样式
      getRotateAngle(index) {
        const angle = 360 / this.prizeData.length * index + (180 / this.prizeData.length);
        return {
          transform: `rotate(${angle}deg)`
        };
      },
      // 初始化圆形转盘canvas
      init() {
        // 各种数据
        const data = this.turntableStyleOption;
        const prizeNum = this.prizeData.length;
        const { prizeBgColors, borderColor } = data;

最低0.47元/天解锁文章