vue模拟娃娃机抽奖活动代码 - web建站教程手机端

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

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>

标签： vue娃娃机抽奖, 抽奖活动

上面是“vue模拟娃娃机抽奖活动代码”的全面内容，想了解更多关于 vuejs 内容，请继续关注web建站教程。

当前网址：https://m.ipkd.cn/webs_14329.html

声明：本站提供的所有资源部分来自互联网，如果有侵犯您的版权或其他权益，请发送到邮箱：admin@ipkd.cn，我们会在看到邮件的第一时间内为您处理！