flamingo-ui/es/red-rain/index.js

火烈鸟UI组件库

import "./index-sfc.css";
import { ref, onMounted, onBeforeUnmount } from "vue";
const __default__ = {
  name: "RedRain"
};
const __vue_sfc__ = /* @__PURE__ */ Object.assign(__default__, {
  props: {
    redPackage: {
      type: String,
      default: "https://gres.guopan.cn/png/20230309/red_package.png"
    },
    bomb: {
      type: String,
      default: "https://gres.guopan.cn/png/20230309/bomb.png"
    },
    // 定义红包雨最长时间
    duration: {
      type: Number,
      default: 6e3
    },
    // 密度
    density: {
      type: Number,
      default: 400
    },
    // 红包角度, 不指定固定角度则随机
    rotate: {
      type: Number,
      default: 15
    },
    // 速度
    speed: {
      type: Number,
      default: 4.5
    },
    // 缩放
    scale: {
      type: Number,
      default: 7
    }
  },
  emits: ["firstEnd", "over"],
  setup(__props, { expose, emit }) {
    expose();
    const props = __props;
    const redbagId = ref(1);
    const liParams = ref([]);
    const timer = ref(null);
    const redNum = ref(0);
    const isFirstClick = ref(true);
    const startRedPacket = () => {
      const win = document.documentElement.clientWidth || document.body.clientWidth;
      const left = Math.random() * (win - 50) + 0;
      const rotate = (props.rotate || props.rotate === 0 ? props.rotate : Math.random() * (45 - -45) - 45) + "deg";
      const scales = (Math.random() * props.scale + 8) * 0.1;
      const durTime = Math.random() * props.speed + 1.2 + "s";
      liParams.value.push({
        id: redbagId.value,
        left: left + "px",
        cls: "move_1",
        transforms: "rotate(" + rotate + ") scale(" + scales + ") translateZ(0)",
        durTime
      });
      redbagId.value++;
      timer.value = setTimeout(() => {
        startRedPacket();
      }, props.density);
    };
    const handleClick = (e) => {
      redNum.value++;
      const { target } = e;
      target.parentNode.style.animationPlayState = "paused";
      target.parentNode.style.webkitAnimationPlayState = "paused";
      if (!target.classList.contains("hit")) {
        target.classList.add("hit");
        target.src = props.bomb;
      }
      if (isFirstClick.value) {
        isFirstClick.value = false;
        emit("firstEnd");
      }
    };
    const removeDom = (index) => {
      liParams.value.splice(index, 1);
    };
    onMounted(() => {
      startRedPacket();
      setTimeout(() => {
        clearTimeout(timer.value);
        emit("over", redNum.value);
      }, props.duration);
    });
    onBeforeUnmount(() => {
      clearTimeout(timer.value);
    });
    const __returned__ = { props, redbagId, liParams, timer, redNum, isFirstClick, emit, startRedPacket, handleClick, removeDom, ref, onMounted, onBeforeUnmount };
    Object.defineProperty(__returned__, "__isScriptSetup", { enumerable: false, value: true });
    return __returned__;
  }
});
import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, normalizeStyle as _normalizeStyle, createElementVNode as _createElementVNode, normalizeClass as _normalizeClass, withModifiers as _withModifiers, Transition as _Transition, withCtx as _withCtx, createBlock as _createBlock } from "vue";
const _hoisted_1 = ["data-index", "on:animationEnd", "on:webkitAnimationEnd"];
const _hoisted_2 = ["src"];
function __vue_render__(_ctx, _cache, $props, $setup, $data, $options) {
  return _openBlock(), _createBlock(_Transition, {
    name: "fade",
    class: "fmg-red-rain"
  }, {
    default: _withCtx(() => [
      _createElementVNode(
        "div",
        {
          class: "mask",
          id: "mask",
          onTouchmove: _cache[1] || (_cache[1] = _withModifiers(() => {
          }, ["prevent", "stop"])),
          onMousewheel: _cache[2] || (_cache[2] = _withModifiers(() => {
          }, ["prevent"]))
        },
        [
          _createElementVNode(
            "ul",
            {
              class: "red_packet",
              id: "red_packet",
              onTouchmove: _cache[0] || (_cache[0] = _withModifiers(() => {
              }, ["prevent", "stop"]))
            },
            [
              (_openBlock(true), _createElementBlock(
                _Fragment,
                null,
                _renderList($setup.liParams, (item, index) => {
                  return _openBlock(), _createElementBlock("li", {
                    style: _normalizeStyle({ left: item.left, animationDuration: item.durTime, webkitAnimationDuration: item.durTime }),
                    class: _normalizeClass(item.cls),
                    "data-index": index,
                    "on:animationEnd": ($event) => $setup.removeDom(index),
                    "on:webkitAnimationEnd": ($event) => $setup.removeDom(index),
                    key: item.id
                  }, [
                    _createElementVNode("img", {
                      style: _normalizeStyle({ transform: item.transforms, webkitTransform: item.transforms }),
                      src: $props.redPackage,
                      onTouchstart: $setup.handleClick
                    }, null, 44, _hoisted_2)
                  ], 46, _hoisted_1);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ],
            32
            /* HYDRATE_EVENTS */
          )
        ],
        32
        /* HYDRATE_EVENTS */
      )
    ]),
    _: 1
    /* STABLE */
  });
}
__vue_sfc__.render = __vue_render__;
__vue_sfc__._scopeId = "data-v-7dd28d4f";
var stdin_default = __vue_sfc__;
export {
  stdin_default as default
};