flamingo-ui/es/tiger-machine/index.js

火烈鸟UI组件库

import "./index-sfc.css";
import { ref, watch } from "vue";
const __vue_sfc__ = {
  name: "TigerMachine",
  props: {
    prizeList: {
      type: Array,
      default: () => []
    },
    turnsTime: {
      type: Number,
      default: 0
    },
    turnsNumber: {
      type: Number,
      default: 0
    },
    prizeIndex: {
      type: Number,
      default: -1
    }
  },
  emits: ["click", "start-turns", "end-turns"],
  setup(props, { emit }) {
    const prize = ref(props.prizeIndex);
    watch(
      () => props.prizeIndex,
      (val) => {
        prize.value = val;
      }
    );
    const list = ref([]);
    watch(
      () => props.prizeList,
      (val) => {
        list.value = val;
      },
      {
        immediate: true,
        deep: true
      }
    );
    const _window = window;
    const animationFun = _window.requestAnimationFrame || _window.webkitRequestAnimationFrame || _window.mozRequestAnimationFrame || _window.msRequestAnimationFrame || _window.oRequestAnimationFrame || function(cb) {
      _window.setTimeout(cb, 1e3 / 60);
    };
    const options = ref();
    const startTime = ref(null);
    const lock = ref(false);
    const animate = (timestamp) => {
      if (!options.value) {
        return false;
      }
      if (startTime.value == null) {
        startTime.value = timestamp;
      }
      const timeDiff = timestamp - startTime.value;
      options.value.forEach((item) => {
        if (item.isFinished) {
          return;
        }
        const time = Math.max(item.duration - timeDiff, 0);
        const power = 3;
        const offset = Math.pow(time, power) / Math.pow(item.duration, power) * item.rollTimes;
        const distance = -1 * Math.floor((offset + item.location) % item.height);
        item.el.style.transform = "translateY(" + distance + "px)";
        if (timeDiff > item.duration) {
          item.isFinished = true;
        }
      });
      if (options.value.every((m) => m.isFinished)) {
        emit("end-turns");
        lock.value = false;
        options.value = null;
        startTime.value = null;
      } else {
        animationFun(animate);
      }
    };
    const startRoll = () => {
      emit("start-turns");
      if (options.value) {
        options.value.forEach((item) => {
          item.isFinished = true;
          const v = -item.location;
          item.el.style.transform = "translateY(" + v + "px)";
        });
        return;
      }
      const _options = Array.from(
        document.getElementsByClassName("lotto-roll-wrap")
      ).map((data, i) => {
        const dom = document.getElementsByClassName("lotto-roll-wrap")[i];
        const itemHeight = document.getElementsByClassName("lotto-item")[0].offsetHeight;
        let prizeIdx = prize.value;
        if (prizeIdx < 0) {
          prizeIdx = Math.floor(Math.random() * list.value.length);
        }
        const opts = {
          el: dom.querySelector(".lotto-wrap"),
          //指向奖项元素的父级
          location: prizeIdx * itemHeight,
          // 奖品滚动到指定的位置
          rollTimes: 2e3 + Math.random() * 500 + i * 500 + 1e3 * props.turnsNumber,
          // 转圈数
          height: list.value.length * itemHeight,
          // 总的高度
          duration: 2e3 + i * 2e3 + props.turnsTime,
          // 动画时间，毫秒数
          isFinished: false
        };
        return opts;
      });
      options.value = _options;
      animationFun(animate);
    };
    const start = () => {
      if (lock.value) {
        return false;
      }
      lock.value = true;
      setTimeout(() => {
        startRoll();
      }, 300);
    };
    return {
      list,
      start
    };
  }
};
import { renderList as _renderList, Fragment as _Fragment, openBlock as _openBlock, createElementBlock as _createElementBlock, createCommentVNode as _createCommentVNode, toDisplayString as _toDisplayString, createElementVNode as _createElementVNode } from "vue";
const _hoisted_1 = { class: "fmg-table-machine" };
const _hoisted_2 = { class: "lotto-roll-content" };
const _hoisted_3 = { class: "lotto-wrap" };
const _hoisted_4 = {
  key: 0,
  class: "lotto-item-image"
};
const _hoisted_5 = ["src"];
const _hoisted_6 = {
  key: 1,
  class: "lotto-item-content"
};
function __vue_render__(_ctx, _cache) {
  return _openBlock(), _createElementBlock("div", _hoisted_1, [
    (_openBlock(), _createElementBlock(
      _Fragment,
      null,
      _renderList(3, (s, index) => {
        return _createElementVNode("div", {
          class: "lotto-roll-wrap",
          key: index
        }, [
          _createElementVNode("div", _hoisted_2, [
            _createElementVNode("div", _hoisted_3, [
              (_openBlock(true), _createElementBlock(
                _Fragment,
                null,
                _renderList([..._ctx.list, ..._ctx.list], (item, idx) => {
                  return _openBlock(), _createElementBlock("div", {
                    class: "lotto-item",
                    key: `'lotto'-${index}-${idx}`
                  }, [
                    item.imagePath ? (_openBlock(), _createElementBlock("div", _hoisted_4, [
                      item.imagePath ? (_openBlock(), _createElementBlock("img", {
                        key: 0,
                        class: "lotto-item-img",
                        src: item.imagePath
                      }, null, 8, _hoisted_5)) : _createCommentVNode("v-if", true)
                    ])) : _createCommentVNode("v-if", true),
                    item.text ? (_openBlock(), _createElementBlock(
                      "div",
                      _hoisted_6,
                      _toDisplayString(item.text),
                      1
                      /* TEXT */
                    )) : _createCommentVNode("v-if", true)
                  ]);
                }),
                128
                /* KEYED_FRAGMENT */
              ))
            ])
          ])
        ]);
      }),
      64
      /* STABLE_FRAGMENT */
    ))
  ]);
}
__vue_sfc__.render = __vue_render__;
__vue_sfc__._scopeId = "data-v-4188c537";
var stdin_default = __vue_sfc__;
export {
  stdin_default as default
};