Vue.js学习笔记（五）抽奖组件封装——转盘抽奖

原创 已于 2024-08-20 15:38:13 修改 · 2.1k 阅读 ·
本内容遵循CC 4.0 BY-SA版权协议
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
cknow-ai 你看我像是会的样子吗？

cknow-ai 关注

标签
#vue.js #学习 #笔记
分类 前端开发
于 2024-07-11 10:51:03 首次发布

基于VUE2转盘组件的开发

文章目录

前言

因为之前的转盘功能是图片做的，每次活动更新都要重做UI和前端，为了解决这一问题进行动态配置转盘组件开发，可以减少一些UI和前端的工作量。项目使用vue脚手架+vant组件库进行开发。

一、开发步骤

1.组件布局

 <van-row class="container">
 	  <!-- turntableBox 为整个转盘容器，为正方形，大小由里面元素决定 -->
      <van-col span="24" class="turntableBox">
      	<!-- turntableMain 为转盘底座，比里面的内容大，显示为效果图灰色外圈，但不是空心圆 -->
        <div class="turntableMain" :style="`height:${window.innerWidth * 0.8}px;width:${window.innerWidth * 0.8}px;`">
         <!-- turntable 为转动区域，作用是为了不让外圈一起转动 -->
          <div ref="turntable" class="turntable"
            :style="`height:${window.innerWidth * 0.8}px;width:${window.innerWidth * 0.8}px;`">
           <!-- Canvas 转盘饼图背景，具体划分多少块由奖项决定 -->
            <Canvas />
            <!-- prizeBox 奖项，高为饼图的半径，宽为饼图半径里面有多少块就多少分之一 -->
            <div class="prizeBox">
              <div class="prizeItem" :style="`width:${perPrize.width}px;height:${perPrize.height}px;transform:translateX(-50%) rotate(-${(perPrize.degree * (index + 1)) - (perPrize.degree / 2)}deg);left:calc(50%)`"
                v-for="(item, index) in activeInfo.prizeList" :key="index">
                <p class="title">{{ item.name }}</p>
                <p class="describe">{{ item.describe }}</p>
                <img :src="item.img" style="width: 38%;" />
              </div>
            </div>
          </div>
          <!-- 启动按钮 -->
          <van-image class="go" fit="cover" width="42px" :src="goPointer" @click="go" />
        </div>
      </van-col>
      <!-- 结果展示列表 -->
      <van-col span="24">
        <div id="result"></div>
      </van-col>
    </van-row>

2.布局样式

.turntableBox {
 
  margin-top: 10%;

  .turntableMain {
    margin: 0 auto;
    position: relative;
    border: 10px solid #E5E5E5;
    border-radius: 100%;
  }

  .turntable {
    transition: all 4s;
    margin: 0 auto;
  }

  .go {
    position: absolute;
    top: calc(50% - 31px);
    left: calc(50% - 21px);
  }

  .prizeBox {
    position: absolute;
    width: 80%;
    top: 0;
    left: calc(50% - 40%);

    .prizeItem {
      text-align: center;
      position: absolute;
      top: 0;
      overflow: hidden;
      text-align: center;
      transform-origin: center bottom;
      transform: translateX(-50%);
      color: #2c3e50;

      p {
        margin: 0;
        padding: 0;
      }

      .title {
        font-size: 18px;
        margin-top: 12px;
      }

      .describe {
        font-size: 14px;
        line-height: 28px;
        white-space: break-spaces;
      }

      img {
        margin-top: 6px;
      }
    }
  }
}

3.数据准备

data 代码如下：包含页面功能所需要的变量

  data() {
    return {
      window,
       /** 活动设置 */
      activeInfo: {
        /** 中奖概率 */
        probabilities: {
          "一等奖": 10,
          "二等奖": 10,
          "三等奖": 10,
          "四等奖": 10,
        },
        /** 奖品信息 */
        prizeList: [
          {
            name: '一等奖',
            describe: '一等奖',
            img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
          },
          {
            name: '未中奖',
            describe: '未中奖',
            img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
          },
          {
            name: '二等奖',
            describe: '二等奖',
            img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
          },
          {
            name: '未中奖',
            describe: '未中奖',
            img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
          },
          {
            name: '三等奖',
            describe: '三等奖',
            img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
          },
          {
            name: '四等奖',
            describe: '四等奖',
            img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
          },

        ]
      },
      /** 是否正在执行动画 */
      isGo: false,
      /** 执行动画的对象 */
      oTurntable: '',
      /** 即将旋转的度数 */
      randomDeg: 0,
      /** 上一次旋转的度数 */
      lastDeg: 0,
      /** 抽奖次数 */
      goTimes: 3,
      /** 奖品图片 */
      perPrize: {
        degree: null,
        width: null,
        height: null
      }
     }
   }

created 代码如下：主要处理角度、宽、高

  created() {
    const params = getAllParams();
    if (params) {
      this.params = params;
    };
    /** 奖品 */
    const angle = (360 / this.activeInfo.prizeList.length) / 2; // 对角角度
    const ratio = Number(Math.sin(angle * (Math.PI * 2 / 360)).toFixed(2)); // 与半径的比率
    this.perPrize = {
      degree: (360 / this.activeInfo.prizeList.length),
      width: Math.floor((window.innerWidth * ratio)) / 2,
      /** 高度是直径的一半 */
      height: window.innerWidth * 0.8 / 2
    }
  },

mounted 代码如下：获取转盘区域DOM元素，方便后面操作

  mounted() {
    this.oTurntable = this.$refs.turntable;
  },

methods 代码如下：主要操作方法

 /** 点击抽奖 */
    go() {
      /** 正在抽奖，未结束继续点击无效 */
      if (!this.isGo && this.goTimes > 0) {
      	/** 获取中奖结果，再根据结果去转动转盘 */
        const result = this.generatePrize();
        /** 
         * 获取奖项下标
         * 奖项名字可能会重复，所以需要找到奖项的所有下标保存到数组里
         * 根据下标数组随机生成一个数字来决定选择哪个下标成为最终结果的下标
         *  */
        const resultIndexArray = this.activeInfo.prizeList.reduce((acc, item, index) => {
          if (item.name === result) {
            acc.push(index);
          }
          return acc;
        }, []);
        const randomResultIndex = Math.floor(Math.random() * resultIndexArray.length);
        const index = resultIndexArray[randomResultIndex];
        /** 奖项总和数量 */
        const length = this.activeInfo.prizeList.length;
        /** 调用旋转方法 */
        this.ratating((360 / length * index) + (360 / length / 2), result);
      }
      else if (!this.isGo && this.goTimes <= 0) {
        this.$toast({
          message: '抱歉，您的抽奖次数用完了',
          duration: 3000,
        });
      }
      else {
        this.$toast('请勿重复点击')
        return
      }
    },
    /** 获取抽奖结果 */
    generatePrize() {
      /** 生成一个 0 到 99 之间的随机数 */
      const randomNum = Math.floor(Math.random() * 100);
      let cumulativeProbability = 0;
      /** 如果概率落在奖项范围内 */
      for (const prize in this.activeInfo.probabilities) {
        cumulativeProbability += this.activeInfo.probabilities[prize];
        if (randomNum < cumulativeProbability) {
          /** 返回中奖内容 */
          return prize;
        }
      }
      // 默认返回未中奖
      return "未中奖";
    },

    /** 该方法能产生[n,m]之间随机数,决定转盘转多少圈 */
    getRandom(n, m) {
      let result = Math.floor(Math.floor(Math.random() * (m - n + 1) + n))
      return result;
    },
    
    /** 旋转 */
    ratating(deg, text) {
      this.goTimes--;
      this.isGo = true;
      /** 旋转圈数 */
      let turnNumber = this.getRandom(3, 6);
      /** 记录这次要旋转的度数(传来的度数+圈数) */
      this.randomDeg = deg + 360 * turnNumber;
      /*上次指针离初始状态的度数 + 上次的度数 + 这次要旋转的度数
      (这样的目的是为了每次旋转都从原点开始，保证数据准确)*/
      let realDeg = (360 - this.lastDeg % 360) + this.lastDeg + this.randomDeg;
      /** 为对象添加执行动画 */
      this.oTurntable.style.transform = `rotate(${realDeg}deg)`;
      setTimeout(() => {
        this.isGo = false;
        var list = document.getElementById('result');
        list.innerHTML += /未中奖/.test(text) ? `<p>很遗憾，您${text}！</p>` : `<p>恭喜您，获得${text}！</p>`;
        /** 把这次度数存储起来，方便下一次获取 */
        this.lastDeg = realDeg;
      }, 4000);
    }

canvas 组件代码如下：主要使用canvas标签根据奖项长度进行角度划分绘画，


<template>
  <canvas class="canvas" id="canvasImg" :style="`width:${perimeter}px;height: ${perimeter}px;`">您的浏览器不支持canvas！</canvas>
</template>

<script>


export default {
  name: 'Canvas',
  components: {

  },
  data() {
    return {
      /** 直径 */
      perimeter: 320,
    }
  },
  created() {

  },
  mounted() {
    this.perimeter = window.innerWidth * 0.8;
    this.drawPie();
  },
  methods: {
    /** 画饼图 */
    drawPie() {
      const PI = Math.PI;
      /** 获取画布并获取2d上下文对象 */
      const canvas = document.getElementById('canvasImg');
      const ctx = canvas.getContext('2d');
      /** 假设周长为500 */
      const perimeter = this.perimeter;
      /** 半径 */
      const radius = perimeter * 0.5;
      /** 总奖品数，需要根据实际数据长度从父组件传入 */
      const prizeTotal = 6;
      /** 每个扇形的角度=360度 / 总奖品数 */
      const degree = 360 / prizeTotal;
      /** 画布宽高 */
      canvas.width = perimeter;
      canvas.height = perimeter;
      /** 根据奖品数把圆形分成等份的扇形 */
      for (let i = 0; i < prizeTotal; i++) {
        /** 奇偶颜色 */
        const color = i % 2 === 0 ? "#F8D383" : "#F8E2BC";
        /** 设置边框颜色 */ 
        const borderColor = "#fff"; 
         /** 设置边框宽度 */
    	const borderWidth = 2;
        /** 开始一条新路径 */
        ctx.beginPath();
        /** 设置路径起点 */
        ctx.moveTo(radius, radius);
        /** 填充颜色 */ 
        ctx.fillStyle = color;
        /** 绘制扇形 （圆心坐标，圆心坐标，半径，扇形起始角度，扇形终止角度） */
        ctx.arc(radius, radius, radius, (270 - degree  + (degree * i)) * PI / 180, (270 - degree  + degree + (degree * i)) * PI / 180);
        /** 自动绘制一条当前点到起点的直线，形成一个封闭图形，省却使用一次moveTo方法。 */
        ctx.closePath();
        /** 闭合路径 */
        ctx.fill();
        /** 绘制边框 */
    	ctx.lineWidth = borderWidth;
    	ctx.strokeStyle = borderColor;
    	ctx.stroke();
      }
    }
  },
}
</script>

<style lang="less">

</style>

二、最后效果

在这里插入图片描述

基于VUE3转盘组件的开发

该版本与vue2版本的差别在该版本于基于vue3进行开发，并且绘制扇形规则不同，该版本增加扇形border不会给圆弧增加border，而是在扇形的左右增加border，并增加了弹幕播报。额外注意的是，vue3不支持行内使用widow对象。

1.H5布局

<template>
  <div :class="device" ref="container">
    <!-- 导航 -->
    <!-- <VantNav /> -->
    <!-- 内容 -->
    <van-row class="container">
      <van-col span="24" class="turntableBox">
        <van-barrage class="barrage" v-model="barrageList" :auto-play="true" :duration="8000" :delay="1000">
        </van-barrage>
        <div class="turntableMain" :style="`height:${windowWidth * 0.8}px;width:${windowWidth * 0.8}px;`">
          <div ref="oTurntable" class="turntable"
            :style="`height:${windowWidth * 0.8}px;width:${windowWidth * 0.8}px;`">
            <div>
              <Canvas :windowWidth="windowWidth" :prizeTotal="activeInfo.prizeList.length" />
            </div>
            <div class="prizeBox">
              <div class="prizeItem"
                :style="`width:${perPrize.width}px;height:${perPrize.height}px;transform:translateX(-50%) rotate(-${(perPrize.degree * (index + 1)) - (perPrize.degree / 2)}deg);left:calc(50%)`"
                v-for="(item, index) in activeInfo.prizeList" :key="index">
                <p class="title">{{ item.name }}</p>
                <!-- <p class="describe">{{ item.describe }}</p> -->
                <img :src="item.img"/>
              </div>
            </div>
          </div>
          <van-image class="go" fit="cover" width="42px" :src="goPointer" @click="go" />
        </div>
      </van-col>
      <van-col span="24">
        <div id="result"></div>
      </van-col>
    </van-row>
  </div>
</template>

<script setup>
import Canvas from "./myCanvas.vue";
import { activityQuestions, verifyLottery, verifyWin, failAnswer } from "@/api/index";
import { getAllParams } from "@/utils/tools";
import Highlight from "@/assets/images/Highlight.png";
import gift from "@/assets/images/gift.png";
import goPointer from "@/assets/images/goPointer.png";
import { ref, reactive, onMounted, onBeforeUnmount, computed } from 'vue';
import { useRouter } from 'vue-router';
import { showFailToast, showToast } from 'vant';
/** url携带参数 */
const router = useRouter();
const params = reactive(router.currentRoute.value.query);
const windowWidth = ref(0);
const isUrl = /^(http|https):\/\/[^ " ]+$/;
const device = window.localStorage.getItem('device');
let container = ref();
/** 活动设置 */
const activeInfo = reactive({
  /** 中奖概率 */
  probabilities: {
    "一等奖": 10,
    "二等奖": 10,
    "三等奖": 10,
    "四等奖": 10,
  },
  /** 奖品信息 */
  prizeList: [
    {
      name: '一等奖',
      describe: '一等奖',
      img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },
    {
      name: '未中奖',
      describe: '未中奖',
      img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },
    {
      name: '二等奖',
      describe: '二等奖',
      img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },
    {
      name: '未中奖',
      describe: '未中奖',
      img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },
    {
      name: '三等奖',
      describe: '三等奖',
      img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },
    {
      name: '四等奖',
      describe: '四等奖',
      img: 'https://img01.yzcdn.cn/vant/cat.jpeg'
    },

  ]
});

/** 是否正在执行动画 */
let isGo = ref(false);
/** 执行动画的对象 */
let oTurntable = ref();
/** 即将旋转的度数 */
let randomDeg = ref(0);
/** 上一次旋转的度数 */
let lastDeg = ref(0);
/** 抽奖次数 */
let goTimes = ref(3);
/** 奖品图片 */
let perPrize = reactive({
  degree: null,
  width: null,
  height: null
});

/** 弹幕 */
let defaultList = ref([
  { text: '轻量' },
  { text: '可定制的' },
  { text: '移动端' },
  { text: 'Vue' },
  { text: '组件库' },
  { text: 'VantUI' },
  { text: '666' },
]);
const barrageList = ref([...defaultList.value]);

onMounted(() => {
  windowWidth.value = window.innerWidth;
  /** 奖品 */
  const angle = (360 / activeInfo.prizeList.length) / 2; // 对角角度
  const ratio = Number(Math.sin(angle * (Math.PI * 2 / 360)).toFixed(2)); // 与半径的比率
  perPrize = {
    degree: (360 / activeInfo.prizeList.length),
    width: Math.floor((windowWidth.value * ratio)) / 2,
    /** 高度是直径的一半 */
    height: windowWidth.value * 0.8 / 2
  }
});

/** 点击抽奖 */
const go = () => {
  /** 正在抽奖，未结束继续点击无效 */
  if (!isGo.value && goTimes.value > 0) {
    const result = generatePrize();
    /** 
     * 获取奖项下标
     * 奖项名字可能会重复，所以需要找到奖项的所有下标保存到数组里
     * 根据下标数组随机生成一个数字来决定选择哪个下标成为最终结果的下标
     *  */
    const resultIndexArray = activeInfo.prizeList.reduce((acc, item, index) => {
      if (item.name === result) {
        acc.push(index);
      }
      return acc;
    }, []);
    const randomResultIndex = Math.floor(Math.random() * resultIndexArray.length);
    const index = resultIndexArray[randomResultIndex];
    /** 奖项总和数量 */
    const length = activeInfo.prizeList.length;
    ratating((360 / length * index) + (360 / length / 2), result);
  }
  else if (!isGo.value && goTimes.value <= 0) {
    showToast('抱歉，您的抽奖次数用完了');
  }
  else {
    showToast('请勿重复点击');
    return
  }
};

/** 获取抽奖结果 */
const generatePrize = () => {
  /** 生成一个 0 到 99 之间的随机数 */
  const randomNum = Math.floor(Math.random() * 100);
  let cumulativeProbability = 0;
  for (const prize in activeInfo.probabilities) {
    cumulativeProbability += activeInfo.probabilities[prize];
    if (randomNum < cumulativeProbability) {
      /** 返回中奖内容 */
      return prize;
    }
  }
  // 默认返回未中奖
  return "未中奖";
};

/** 该方法能产生[n,m]之间随机数,决定转盘转多少圈 */
const getRandom = (n, m) => {
  let result = Math.floor(Math.floor(Math.random() * (m - n + 1) + n))
  return result;
};

/** 旋转 */
const ratating = (deg, text) => {
  goTimes.value--;
  isGo.value = true;
  /** 旋转圈数 */
  let turnNumber = getRandom(3, 6);
  /** 记录这次要旋转的度数(传来的度数+圈数) */
  randomDeg.value = deg + 360 * turnNumber;
  /*上次指针离初始状态的度数 + 上次的度数 + 这次要旋转的度数
  (这样的目的是为了每次旋转都从原点开始，保证数据准确)*/
  let realDeg = (360 - lastDeg.value % 360) + lastDeg.value + randomDeg.value;
  /** 为对象添加执行动画 */
  oTurntable.value.style.transform = `rotate(${realDeg}deg)`;
  setTimeout(() => {
    isGo.value = false;
    var list = document.getElementById('result');
    list.innerHTML += /未中奖/.test(text) ? `<p>很遗憾，您${text}！</p>` : `<p>恭喜您，获得${text}！</p>`;
    barrageList.value.push({ text: /未中奖/.test(text) ? `很遗憾，您${text}！` : `恭喜您，获得${text}！` });
    /** 把这次度数存储起来，方便下一次获取 */
    lastDeg.value = realDeg;
  }, 4000);
};

</script>

<style lang="less" scoped>
::v-deep {
  .van-barrage__item {
    text-shadow: none;
    color: #fff;
    display: inline-block;
    background-color: rgba(0, 0, 0, .5);
    height: 28px;
    border-radius: 28px;
    line-height: 28px;
    padding: 0 20px;
    margin-bottom: 12px;
    font-size: 14px;
  }
}

.container {
  min-height: 100vh;
  width: 100%;
  overflow: hidden;
}

.barrage {
  height: 150px;
  width: 100%;
}

.turntableBox {

  .turntableMain {
    margin: 0 auto;
    position: relative;
    border: 10px solid #E5E5E5;
    border-radius: 100%;
  }

  .turntable {
    transition: transform 4s;
    margin: 0 auto;
  }

  .go {
    position: absolute;
    top: calc(50% - 31px);
    left: calc(50% - 21px);
  }

  .prizeBox {
    position: absolute;
    width: 80%;
    top: 0;
    left: calc(50% - 40%);

    .prizeItem {
      display: flex;
      justify-content: center;
      flex-direction: column;
      align-items: center;
      text-align: center;
      position: absolute;
      top: 0;
      overflow: hidden;
      text-align: center;
      transform-origin: center bottom;
      transform: translateX(-50%);
      color: #2c3e50;

      p {
        margin: 0;
        padding: 0;
      }

      .title {
        font-size: 18px;
        margin-top: 12px;
      }

      .describe {
        font-size: 14px;
        line-height: 28px;
        white-space: break-spaces;
      }

      img {
        margin-top: 16px;
        margin-bottom: 58px;
        width: 50%;
      }
    }
  }
}
</style>

2.饼图绘制

<template>

  <canvas class="canvas" id="canvasImg" :style="`width:${perimeter}px;height: ${perimeter}px;`">您的浏览器不支持canvas！</canvas>

</template>

<script setup>
import { ref, reactive, onMounted, onBeforeUnmount, defineProps } from 'vue';
/** 直径 */
let perimeter = ref(0);
let container = ref();

const props = defineProps({
  prizeTotal: Number,

});


onMounted(() => {
  perimeter.value = window.innerWidth * 0.8;
  drawPie();

});

/** 画饼图 */
const drawPie = () => {
  const PI = Math.PI;
  /** 获取画布并获取2d上下文对象 */
  const canvas = document.getElementById('canvasImg');
  const ctx = canvas.getContext('2d');
  /** 假设周长为500 */
  const perimeterValue = perimeter.value;
  /** 半径 */
  const radius = perimeterValue * 0.5;
  /** 总奖品数 */
  const prizeTotal = props.prizeTotal;
  /** 每个扇形的角度=360度 / 总奖品数 */
  const degree = 360 / prizeTotal;
  /** 画布宽高 */
  canvas.width = perimeterValue;
  canvas.height = perimeterValue;
  /** 根据奖品数把圆形分成等份的扇形 */
  for (let i = 0; i < prizeTotal; i++) {
    /** 奇偶颜色 */
    const fillColor = i % 2 === 0 ? "#F8D383" : "#F8E2BC";
    /** 设置边框颜色 */
    const borderColor = "#fff";
    /** 设置边框宽度 */
    const borderWidth = 0.5; 

    /** 计算扇形起始角度和终止角度 */
    const startAngle = (270 - degree + (degree * i)) * PI / 180;
    const endAngle = (270 - degree + degree + (degree * i)) * PI / 180;

    /** 开始一条新路径 */
    ctx.beginPath();
    /** 设置路径起点 */
    ctx.moveTo(radius, radius);
    /** 填充颜色 */
    ctx.fillStyle = fillColor;
    /** 绘制扇形 */
    ctx.arc(radius, radius, radius, startAngle, endAngle);
    /** 自动绘制一条当前点到起点的直线，形成一个封闭图形 */
    ctx.closePath();
    /** 填充扇形 */
    ctx.fill();

    /** 绘制边框的左右两个边 */
    ctx.beginPath();
    ctx.lineWidth = borderWidth;
    ctx.strokeStyle = borderColor;

    /** 计算起始边框的坐标 */
    const x1 = radius + radius * Math.cos(startAngle);
    const y1 = radius + radius * Math.sin(startAngle);
    ctx.moveTo(radius, radius);
    ctx.lineTo(x1, y1);

    /** 计算结束边框的坐标 */ 
    const x2 = radius + radius * Math.cos(endAngle);
    const y2 = radius + radius * Math.sin(endAngle);
    ctx.moveTo(radius, radius);
    ctx.lineTo(x2, y2);

    ctx.stroke();
  }
}

</script>

<style lang="less" scoped>
.canvas {
  margin: 0 auto;
}
</style>

二、最后效果

在这里插入图片描述

总结

本文仅仅简单记录了转盘组件的基本实现，仅供学习参考。

点赞 点赞 8
评论 0
书签 书签 8
vue手写转盘抽奖
qq_47111583的博客
08-08 1203
目前抽奖最常见的两种：九宫格抽奖 和，但转盘抽奖的大多是采用的是将做好的图放在页面上，如果需要变动奖池里面的奖品或数量，就会让设计师重新出一张图片。整个转盘抽奖布局分为两部分：底部转盘背景图 和 奖品内容布局。
vue 转盘抽奖功能，可控制抽奖概率
qq_43532275的博客
08-23 2217
vue 转盘抽奖功能，可控制抽奖概率
如何利用awesome-jellyfin提升媒体服务器性能：终极指南
最新发布
gitblog_00573的博客
03-27 800
awesome-jellyfin是一个汇集Jellyfin插件、主题、指南和配套软件的开源项目，能帮助用户打造更强大、个性化的媒体服务器体验。无论是优化播放性能、增强视觉效果还是添加实用功能，这个项目都能提供丰富的资源和工具。 awesome-jellyfin项目banner ## 为什么选择awesome-jellyfin？ Jellyfin作为一款开源媒体服务器，虽然功能强大，但通过aw
vue3+ts 实现转盘抽奖 组件
PhoenixGuangyu的博客
08-07 1078
封装一个Spinner.vue组件。
vue实现大转盘抽奖
热门推荐
Candy_mi的博客
09-24 1万+
效果图如下 中奖提示 代码如下 <template> <div class="dial" v-wechat-title="$route.meta.title"> <div class="times">抽奖次数{{LuckyClick}}</div> <!-- 转盘包裹 --> &lt...
【H5】封装抽奖大转盘组件
qq_38212421的博客
11-05 1023
<template> <div class="largeTurntable"> <div class="turntable_back"> <img :style="{ transform: 'rotate(' + change_angle + 'deg)' }" :src="turntable" /> </div> <div class="turntable_
VUE 简单转盘抽奖实现
jiyuchengzhou的博客
10-30 1704
VUE 简单转盘抽奖 样式请大家忽略（自己调），主要看JS代码实现，点击按钮后调用start方法，判断是否在转动状态，如果没转动则调用go方法，go方法主要封装了一次性定时器，是个递归函数，调用go函数后即可实现抽奖转盘的效果了，详细代码如下： 注释清晰哦 <template> <div class="home"> <button @click="start">开始</button> <div class="grid"
vue 移动端h5项目使用 vue-luck-draw 插件实现大转盘抽奖
weixin_43848571的博客
06-07 6668
文档地址： https://100px.net/docs/wheel/blocks.html 实现效果如下： 使用： 1.安装插件：npm install vue-luck-draw。 2.引入插件：在 main.js 文件中全局加载插件；或者在组件中按需引入插件。 // 完整加载 import LuckDraw from 'vue-luck-draw' Vue.use(LuckDraw) // 按需引入 import { LuckyWheel, LuckyGrid } from 'vue-luck-d
Vue.js学习笔记（四）抽奖组件封装——九宫格抽奖
summer_gf的博客
03-04 1423
由于业务需求，需要手动开发九宫格抽奖组件，特此记录学习宫格组件开发。以上就是今天要讲的内容，本文仅仅简单介绍了九宫格抽奖组件的基本实现，仅供学习参考。
实现自定义大转盘抽奖
weixin_45416252的博客
05-19 5570
实现自定义大转盘抽奖
Vue笔记_插件组件_lucky-canvas抽奖转盘
qq_43260366的博客
10-18 5918
中使用，在此以vue2.x作为示例进行说明。两种抽奖界面，UI 精美，功能强大且专业可靠，只需要通过简单配置即可实现自由定制，快速完成产品需求。在进行渲染时，为了使页面能够等比放大/缩小，会进行配置将所有单位为px的值转换为rem单位。因此 若是想要转盘随着页面等比缩放 => 在给配置项设置数据时单位需要设置为。此时点击 “点击领取” 按钮转盘无任何反应，因为我们还没有设置事件进行抽奖。height: ‘300px’ // 默认300px。width: ‘300px’ // 默认300px。
【lucky-canvas插件】在Vue3实现大转盘&九宫格&老虎机抽奖
有事儿私信。
09-01 9950
平时做项目时常会遇到抽奖需求。如果一个一个原生手敲的话，很费时间。所以找到了一款抽奖插件——lucky-canvas，一个基于 JavaScript 的跨平台 ( 大转盘 / 九宫格 / 老虎机 ) 抽奖插件。可以满足绝大部分的项目需求。（定制化高的话仍需原生手写）。本文将介绍该插件的使用方法，并以vue3项目举例。
vue3手写抽奖转盘
weixin_52663662的博客
03-21 2727
设置你想要的装盘样式，旋转停止在你想要停的位置，当然也可以设置随机旋转停止位置，你可以根据自己想要的样式需求任意调整css
vue3 实现转盘抽奖
ranshakalove的博客
06-05 1654
【代码】vue3 实现转盘抽奖。
抽奖转盘(扇形)vue
ROYHJW040208_的博客
02-21 1009
抽奖转盘
vue2 封装的一个抽奖组件
weixin_43299180的博客
11-10 1071
年底了，公司开始各种优惠券抽取活动，在 H5 页面实现一个点击抽奖活动，中奖是后端控制，根据接口返回最终抽中接口返回的奖项；
uniapp抽奖组件实战：从almost-lottery到自定义宫格转盘的实现对比
weixin_29290379的博客
03-14 216
本文深度对比了在uni-app中实现抽奖功能的两种主流方案：使用成熟的almost-lottery组件与手写自定义宫格转盘。详细分析了两种方案在开发成本、灵活性、性能及适用场景上的优劣，为开发者提供了清晰的决策指南和实战代码参考，帮助快速选择最适合项目需求的实现路径。
如何用 Vue 打造高转化抽奖活动？vue-lucky-draw 终极指南
gitblog_01049的博客
10-23 530
**vue-lucky-draw** 是一款专为移动端设计的 Vue 九宫格转盘抽奖组件，通过灵活配置即可实现奖品展示、转盘动画和中奖逻辑，让开发者快速搭建互动性强的抽奖功能。无论是电商促销、节日活动还是用户运营，这款轻量级插件都能帮你提升用户参与度！ ## ???? 核心功能亮点 - **零门槛集成**：支持 npm 一键安装，Vue2/Vue3 项目无缝兼容 - **全自定义样式**：奖品图标...
基于svg绘制抽奖大转盘
一出好剧
05-16 924
svg绘制抽奖大转盘
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值