vue红包摇一摇抽奖活动代码

Vue移动端抽奖组件，用于商城摇一摇抽奖活动，可配置图片、摇晃设备回调等。下面编程教程网小编给大家简单介绍一下具体实现代码！

vue组件安装

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

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

vue基础用法

<template>
  <div
    class="demo1"
    style="background: url('背景图片.png') no-repeat top center/100% 100%"
  >
    <nutbig-luckshake
      ref="luckshakePrize"
      :luck-width="luckWidth"
      :luck-height="luckheight"
      @shake-event="shakeEvent()"
      @click-shake="handelClick()"
    >
    </nutbig-luckshake>
  </div>
</template>
<script>
  import { ref, onMounted } from "vue";
  export default {
    setup() {
      // 红包大小
      const luckWidth = ref("200px");
      const luckheight = ref("160px");
      // 剩余抽奖次数
      let shakeNum = ref(3);

      const shakeEvent = () => {
        if (shakeNum.value == 0) {
          console.log(`无抽奖次数`);
        } else if (shakeNum.value == 1) {
          setTimeout(() => {
            console.log(`中奖啦`);
          }, 200);
          shakeNum.value -= 1;
        } else {
          setTimeout(() => {
            console.log(`抽奖次数还剩${shakeNum.value}次`); // Do something
          }, 200);
          shakeNum.value -= 1;
        }
      };
      const handelClick = () => {
        console.log("点击摇一摇");
        if (shakeNum.value == 0) {
          console.log(`无抽奖次数`);
        } else if (shakeNum.value == 1) {
          setTimeout(() => {
            console.log(`中奖啦`);
          }, 200);
          shakeNum.value -= 1;
        } else {
          setTimeout(() => {
            console.log(`抽奖次数还剩${shakeNum.value}次`); // Do something
          }, 200);
          shakeNum.value -= 1;
        }
      };
      return {
        luckWidth,
        luckheight,
        shakeNum,
        shakeEvent,
        handelClick,
      };
    },
  };
</script>