红包雨（待整理）

从容器上方随机降落不同种类的红包，用户点击红包，触发红包拆开回调事件。

引入

import Vue from 'vue'
import { GiftRain } from '@tuia/market-ui'

Vue.use(GiftRain)

代码演示

<div class="gift_rain_wrap">
  <mk-gift-rain
    :imgSource="sourceImgs"
    :giftOpenFrame="giftFrame"
    @openGift="handleOpenGift"
    ref="giftRain"
  ></mk-gift-rain>
</div>
<button class="common-button primary positionfix" @click="handleStartRain">
  <span>开始红包雨</span>
</button>
<button class="common-button primary stopfix" @click="handleStopRain">
  <span>停止红包雨</span>
</button>

点击展开完整代码

export default {
  data() {
    return {
      sourceImgs: [
        "//yun.tuisnake.com/h5-mami/dist/normal1.cca5bdfdc574870aaea6510b3b271323.png",
        "//yun.tuisnake.com/h5-mami/dist/update-first-1.6fbfca78758ec31dc6d906e7c10aec0c.png",
        "//yun.tuisnake.com/h5-mami/dist/update-second-1.e5fbfc30fa509bad85dfb496f22beb4f.png",
      ],
      giftFrame: {
        url:
          "//yun.tuisnake.com/h5-mami/dist/redpacket-split-light.d2d071e706c7616dc659cebaaf2ce796.png",
        amount: 6,
      },
      isStopState: true, // 是否先关闭
    };
  },
  methods: {
    handleStartRain() {
      if (this.isStopState) {
        this.$refs["giftRain"].start();
        this.isStopState = false;
      } else {
        this.$mkToast.show("请先停止红包🌧️ ~");
      }
    },

    handleStopRain() {
      this.isStopState = true;
      this.$refs["giftRain"].stop();
    },

    handleOpenGift(amount) {
      this.$mkToast.show(`恭喜您已经拆开${amount}个红包`);
    },
  },
};

API

type ImageSourceType = Array<string>

type GiftOpenFrameType = {
  // 帧动画图片的资源地址
  url: string
  // 帧动画的帧数,静态图片则默认是一帧
  amount: number
}

Props

参数	说明	类型	是否是必须参数	默认值
imgSource	用于渲染成红包雨图片的资源列表, ImageSourceType	array	是	无
giftOpenFrame	用于渲染成红包打开之后爆炸的帧动画图片资源信息, GiftOpenFrameType	object	是	无

Events

名称	说明
openGift	红包拆开事件, (amount) => void, 返回参数是总共拆开的红包个数

方法

• 通过ref可以获取到GiftRain实例并调用实例方法

方法名	说明
start	用于开启红包雨
stop	用于停止红包雨