cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
163 lines (162 loc) • 6.63 kB
JavaScript
import { defineComponent, ref, computed, watch, onMounted, onUnmounted, toRefs, openBlock, createElementBlock, createElementVNode, normalizeStyle, toDisplayString, Fragment, renderList, normalizeClass, createCommentVNode } from "vue";
import "./index3.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const TITLECONTAINERSTYLE = { width: 50, height: 100, margin: 10, paddingTop: 0, background: "" };
const TITLESTYLE = { fontSize: 30, fontWeight: "normal", color: "rgba(255, 255, 255, 1)", fontFamily: "\u5FAE\u8F6F" };
const PRESTYLE = { value: "", fontSize: 26, fontWeight: "normal", color: "rgba(255, 255, 255, 1)", fontFamily: "\u5FAE\u8F6F", margin: 2, top: 2 };
const SUFSTYLE = { value: "", fontSize: 26, fontWeight: "normal", color: "rgba(255, 255, 255, 1)", fontFamily: "\u5FAE\u8F6F", margin: 2, top: 2 };
const SEPASTYLE = { value: " - ", fontSize: 26, fontWeight: "normal", color: "rgba(255, 255, 255, 1)", fontFamily: "\u5FAE\u8F6F", bottom: 0, right: -10 };
const _sfc_main = defineComponent({
name: "CoFlopper",
components: {},
props: {
data: { type: Object, default: { value: "93578" } },
time: { type: Number, default: 10 },
titleContainerProps: { type: Object, default: TITLECONTAINERSTYLE },
titleProps: { type: Object, default: TITLESTYLE },
prefixProps: { type: Object, default: PRESTYLE },
suffixProps: { type: Object, default: SUFSTYLE },
sepaProps: { type: Object, default: SEPASTYLE }
},
setup(props) {
let timer = 0;
const isAnimate = ref(false);
const prefixStyle = computed(() => {
return {
"--value": `${props.prefixProps.value}`,
"--fontSize": `${props.prefixProps.fontSize}px`,
"--fontWeight": props.prefixProps.fontWeight,
"--color": props.prefixProps.color,
"--fontFamily": props.prefixProps.fontFamily,
"--margin": `${props.prefixProps.margin}px`,
"--top": `${props.prefixProps.top}px`
};
});
const suffixStyle = computed(() => {
return {
"--value": `${props.suffixProps.value}`,
"--fontSize": `${props.suffixProps.fontSize}px`,
"--fontWeight": props.suffixProps.fontWeight,
"--color": props.suffixProps.color,
"--fontFamily": props.suffixProps.fontFamily,
"--margin": `${props.suffixProps.margin}px`,
"--top": `${props.suffixProps.top}px`
};
});
const sepaStyle = computed(() => {
return {
"--value": props.sepaProps.value,
"--fontSize": `${props.sepaProps.fontSize}px`,
"--fontWeight": props.sepaProps.fontWeight,
"--color": props.sepaProps.color,
"--fontFamily": props.sepaProps.fontFamily,
"--bottom": `${props.sepaProps.bottom}%`,
"--right": `${props.sepaProps.right}px`
};
});
const titleContainerStyle = computed(() => {
return {
"--width": `${props.titleContainerProps.width}px`,
"--height": `${props.titleContainerProps.height}px`,
"--margin": `${props.titleContainerProps.margin}px`,
"--paddingTop": `${props.titleContainerProps.paddingTop}px`,
"--background": `url(${props.titleContainerProps.background})`,
"--transformZ": `${props.titleContainerProps.height * 1.5}px`
};
});
const titleStyle = computed(() => {
return {
"--fontSize": `${props.titleProps.fontSize}px`,
"--fontWeight": props.titleProps.fontWeight,
"--color": props.titleProps.color,
"--fontFamily": props.titleProps.fontFamily
};
});
function defineTimer() {
timer = setInterval(() => {
isAnimate.value = false;
setTimeout(() => {
isAnimate.value = true;
}, 2e3);
}, props.time * 1e3);
}
function clearTimer() {
clearInterval(timer);
}
watch(
() => props.time,
() => {
clearTimer();
defineTimer();
}
);
onMounted(() => {
defineTimer();
});
onUnmounted(() => {
clearTimer();
});
return {
...toRefs(props),
isAnimate,
titleStyle,
titleContainerStyle,
prefixStyle,
suffixStyle,
sepaStyle
};
}
});
const _hoisted_1 = { class: "co-flopper-container" };
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", {
class: "prefix-container",
style: normalizeStyle({ ..._ctx.prefixStyle })
}, [
createElementVNode("p", null, toDisplayString(_ctx.prefixStyle["--value"]), 1)
], 4),
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.data.value, (it, index) => {
return openBlock(), createElementBlock("div", {
class: "co-flopper-main-container",
style: normalizeStyle({ ..._ctx.titleContainerStyle })
}, [
createElementVNode("div", {
class: "co-flopper-wrap",
style: normalizeStyle({ ..._ctx.titleContainerStyle, ..._ctx.titleStyle })
}, [
createElementVNode("div", {
class: normalizeClass(["co-flopper-item-container", [_ctx.isAnimate ? `co-flopper-item-container-${it}` : null]])
}, [
(openBlock(), createElementBlock(Fragment, null, renderList(10, (i) => {
return createElementVNode("div", {
class: "co-flopper-content-container",
style: normalizeStyle({ ..._ctx.titleContainerStyle, transform: `rotateX(${36 * (i - 1)}deg) translateZ(var(--transformZ))` })
}, [
createElementVNode("span", {
class: "co-flopper-text",
style: normalizeStyle({ ..._ctx.titleStyle })
}, toDisplayString(i - 1), 5)
], 4);
}), 64))
], 2)
], 4),
(_ctx.data.value.length - index) % 3 === 1 && _ctx.data.value.length - index != 1 ? (openBlock(), createElementBlock("div", {
key: 0,
class: "co-flopper-sign",
style: normalizeStyle({ ..._ctx.sepaStyle })
}, [
createElementVNode("span", null, toDisplayString(_ctx.sepaStyle["--value"]), 1)
], 4)) : createCommentVNode("", true)
], 4);
}), 256)),
createElementVNode("div", {
class: "prefix-container",
style: normalizeStyle({ ..._ctx.prefixStyle })
}, [
createElementVNode("p", null, toDisplayString(_ctx.suffixStyle["--value"]), 1)
], 4)
]);
}
var Flopper = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render]]);
export { Flopper as default };