vue模拟娃娃机抽奖活动代码

Vue移动端抽奖组件，用于模拟娃娃机抽奖活动，可配置图片、开始结束回调等。下面编程教程网小编给大家简单介绍一下具体实现代码！

vue组件安装

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

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

vue基础用法

<template>
  <nutbig-doll-machine
    ref="lottoRollDom"
    :prize-list="prizeList"
    :prize-index="prizeIndex"
    @start-turns="startTurns"
    @end-turns="endTurns"
  >
  </nutbig-doll-machine>
</template>

<script lang="ts">
  import { ref, reactive } from "vue";
  export default {
    props: {},
    setup() {
      const lottoRollDom: any = ref(null);
      const prizeList = reactive([
        {
          imagePath:"华为手机.png",
          text: "华为手机",
        },
        {
          imagePath:"小米手机.png",
          text: "小米手机",
        },
        {
          imagePath:"vip.png",
          text: "VIP",
        },
        {
          imagePath:"手环.png",
          text: "手环",
        },
      ]);

      // 中奖的奖品的index(此数据可根据后台返回的值重新赋值)
      const prizeIndex = ref(3);
      const startTurns = () => {
        console.log("开始抽奖");
      };

      const endTurns = () => {
        console.log("抽奖结束");
      };

      return {
        lottoRollDom,
        prizeList,
        prizeIndex,
        startTurns,
        endTurns,
      };
    },
  };
</script>