vue商城红包雨抽奖活动代码

Vue移动端抽奖组件，用于vue商城红包雨抽奖场景，可以自定义图片等。下面web建站小编给大家简单介绍一下具体实现代码！

vue组件安装

复制代码import { createApp } from "vue";
// vue
import { GiftRain } from "@nutui/nutui-bingo";
// taro
import { GiftRain } from "@nutui/nutui-bingo-taro";

const app = createApp();
app.use(GiftRain);
1
2
3
4
5
6
7
8

vue基础用法

复制代码<template>
  <nutbig-giftrain
    ref="rain"
    width="100%"
    height="580px"
    @gameOver="gameOver"
    @start="start"
    @click="click"
  >
  </nutbig-giftrain>
  <div v-if="!isStart" class="start" @click="onStart">开始</div>
</template>
<script>
  import { ref } from "vue";
  export default {
    setup() {
      const rain = ref();
      const isStart = ref(false);
      const gameOver = () => {
        isStart.value = false;
      };
      const start = () => {
        isStart.value = true;
      };
      const click = () => {
        console.log("点击");
      };
      const onStart = () => {
        rain.value.startRain();
      };
      return { gameOver, isStart, start, click, onStart, rain };
    },
  };
</script>
<style>
  .nutbig-giftrain .nutbig-giftrain-content {
    background: url("背景图片.png")
      no-repeat;
    background-size: 100% 100%;
    position: relative;
  }
  .start {
    width: 100px;
    height: 30px;
    background: linear-gradient(
      135deg,
      rgba(114, 60, 255, 1) 0%,
      rgba(111, 58, 255, 1) 63.49938195167575%,
      rgba(150, 110, 255, 1) 87.35307751528254%,
      rgba(149, 117, 241, 1) 100%
    );
    border-radius: 10px;
    display: flex;
    justify-content: center;
    align-items: center;
    color: rgba(255, 255, 255, 1);
    position: absolute;
    bottom: 0;
    left: 40%;
  }
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61