flamingo-ui
Version:
火烈鸟UI组件库
218 lines (217 loc) • 7.34 kB
JavaScript
var __defProp = Object.defineProperty;
var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
var __getOwnPropNames = Object.getOwnPropertyNames;
var __hasOwnProp = Object.prototype.hasOwnProperty;
var __export = (target, all) => {
for (var name in all)
__defProp(target, name, { get: all[name], enumerable: true });
};
var __copyProps = (to, from, except, desc) => {
if (from && typeof from === "object" || typeof from === "function") {
for (let key of __getOwnPropNames(from))
if (!__hasOwnProp.call(to, key) && key !== except)
__defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
}
return to;
};
var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
var stdin_exports = {};
__export(stdin_exports, {
default: () => stdin_default
});
module.exports = __toCommonJS(stdin_exports);
var import_index_sfc = require("./index-sfc.css");
var import_vue = require("vue");
var import_vue2 = require("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 = (0, import_vue.ref)(props.prizeIndex);
(0, import_vue.watch)(
() => props.prizeIndex,
(val) => {
prize.value = val;
}
);
const list = (0, import_vue.ref)([]);
(0, import_vue.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 = (0, import_vue.ref)();
const startTime = (0, import_vue.ref)(null);
const lock = (0, import_vue.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
};
}
};
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 (0, import_vue2.openBlock)(), (0, import_vue2.createElementBlock)("div", _hoisted_1, [
((0, import_vue2.openBlock)(), (0, import_vue2.createElementBlock)(
import_vue2.Fragment,
null,
(0, import_vue2.renderList)(3, (s, index) => {
return (0, import_vue2.createElementVNode)("div", {
class: "lotto-roll-wrap",
key: index
}, [
(0, import_vue2.createElementVNode)("div", _hoisted_2, [
(0, import_vue2.createElementVNode)("div", _hoisted_3, [
((0, import_vue2.openBlock)(true), (0, import_vue2.createElementBlock)(
import_vue2.Fragment,
null,
(0, import_vue2.renderList)([..._ctx.list, ..._ctx.list], (item, idx) => {
return (0, import_vue2.openBlock)(), (0, import_vue2.createElementBlock)("div", {
class: "lotto-item",
key: `'lotto'-${index}-${idx}`
}, [
item.imagePath ? ((0, import_vue2.openBlock)(), (0, import_vue2.createElementBlock)("div", _hoisted_4, [
item.imagePath ? ((0, import_vue2.openBlock)(), (0, import_vue2.createElementBlock)("img", {
key: 0,
class: "lotto-item-img",
src: item.imagePath
}, null, 8, _hoisted_5)) : (0, import_vue2.createCommentVNode)("v-if", true)
])) : (0, import_vue2.createCommentVNode)("v-if", true),
item.text ? ((0, import_vue2.openBlock)(), (0, import_vue2.createElementBlock)(
"div",
_hoisted_6,
(0, import_vue2.toDisplayString)(item.text),
1
/* TEXT */
)) : (0, import_vue2.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__;