vue年会跑马灯抽奖活动代码

Vue移动端抽奖组件，用于跑马灯抽奖场景，可配置奖品、图片等。下面web建站小编给大家简单介绍一下具体实现代码！

vue组件安装

import { createApp } from "vue";
// vue
import { Marquee } from "@nutui/nutui-bingo";
// taro
import { Marquee } from "@nutui/nutui-bingo-taro";

const app = createApp();
app.use(Marquee);

vue基础用法

<template>
  <nutbig-marquee
    :prize-list="prizeList"
    :prize-index="prizeIndex"
    :speed="100"
    :circle="40"
    @start-turns="startTurns"
    @end-turns="endTurns"
  >
  </nutbig-marquee>
</template>
<script>
  import { ref, reactive } from "vue";
  export default {
    setup() {
      // 转盘上要展示的奖品数据
      const prizeList = ref([
        {
          id: "xiaomi",
          prizeName: "小米手机",
          prizeImg: "小米手机图片.jpg",
        },
        {
          id: "huawei",
          prizeColor: "rgb(251, 219, 216)",
          prizeName: "华为手机",
          prizeImg: "华为手机图片.jpg",
        },
		{
          id: "thanks",
          prizeName: "谢谢参与",
          prizeImg: "谢谢参与.jpg",
        },
        {
          id: "apple",
          prizeName: "apple watch",
          prizeImg: "apple watch.jpg",
        },
        {
          id: "shubiao",
          prizeColor: "rgba(246, 142, 46, 0.5)",
          prizeName: "鼠标",
          prizeImg: "鼠标.jpg",
        },
		{
          id: "thanks",
          prizeName: "谢谢参与",
          prizeImg: "谢谢参与.jpg",
        },
        {
          id: "jianpan",
          prizeName: "键盘.jpg",
          prizeImg:
            "",
        },
        {
          id: "thanks",
          prizeName: "谢谢参与",
          prizeImg: "谢谢参与.jpg",
        },
      ]);
      // 转盘样式的选项
      const styleOpt = reactive({
        prizeItem: {},
        startStyle: {},
        contentBg: {
          background: "rgb(255, 231, 149)",
        },
      });
      // 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
      const prizeIndex = ref(0);
      const startTurns = () => {
        const index = Math.floor(Math.random() * prizeList.value.length);
        prizeIndex.value = index;
      };
      const endTurns = () => {
        console.log("中奖了");
      };
      return {
        prizeList,
        styleOpt,
        prizeIndex,
        startTurns,
        endTurns,
      };
    },
  };
</script>