cione-comp-lib
Version:
`$ yarn add cione-comp-lib` 或者 `$ npm i cione-comp-lib -S`
263 lines (262 loc) • 7.06 kB
JavaScript
import { defineComponent, ref, computed, onMounted, onUnmounted, watch, toRefs, nextTick, openBlock, createElementBlock, createElementVNode, Fragment, renderList, normalizeStyle, toDisplayString } from "vue";
import "./index.vue_vue_type_style_index_0_scoped_true_lang.mjs";
import _export_sfc from "../../_virtual/plugin-vue_export-helper.mjs";
const _sfc_main = defineComponent({
name: "CoLabelDealer",
props: {
starValue: {
type: String,
default: "00000"
},
endValue: {
type: Number
},
time: {
type: Number,
String,
default: () => {
}
},
fontSize: {
type: [Number, String],
default: 16
},
fontWeight: {
type: String,
default: "normal"
},
fontFamily: {
type: String,
default: "\u5FAE\u8F6F\u96C5\u9ED1"
},
letterSpacing: {
type: Number,
defalt: 2
},
lineHeight: {
type: Number,
default: 0
},
textAlign: {
type: String,
default: "center"
},
color: {
type: String,
default: "rgba(255,255,255,1)"
},
backgroundColor: {
type: String,
default: ""
},
interval: {
type: Boolean,
default: false
},
intervalTime: {
type: Number,
default: 1
},
src: {
type: String
},
refreshTime: {
type: Number,
default: 0.3
},
timeInterval: {
type: Number,
default: 1e3
}
},
setup(props) {
const listDom = ref([]);
const list = ref([]);
const listStar = ref([]);
const listValue = ref(props.starValue);
const listContent = ref();
const numberGrowRef = ref();
const timer = ref();
ref();
ref(true);
const intervalTime = ref(props.intervalTime * 1e3);
const refreshTimeRef = ref();
const textScollTime = ref(props.timeInterval / 100);
ref(props.timeInterval * 1e3);
const imgSrc = ref(props.src);
ref();
const timerArray = ref([]);
const numberScrolling = () => {
listStar.value = [];
list.value = [];
if (String(props.endValue) != "00000") {
listValue.value = String(props.endValue);
}
for (let valueIndex = 0; valueIndex < listValue.value.length; valueIndex++) {
listContent.value = listValue.value.split("");
listStar.value.push(Number(listContent.value[valueIndex]));
}
list.value = listStar.value;
nextTick(() => {
listDom.value = numberGrowRef.value;
refresh();
});
};
const numberInterval = () => {
timer.value = setInterval(() => {
timerArray.value.forEach((element) => {
clearInterval(Number(element));
});
refresh();
}, intervalTime.value);
};
const attrs = computed(() => {
return {
fontSize: props.fontSize + "px",
fontWeight: props.fontWeight,
fontFamily: props.fontFamily,
letterSpacing: props.letterSpacing + "px",
textAlign: props.textAlign,
color: props.color,
backgroundColor: props.backgroundColor,
backgroundImage: `url(${props.src})`,
lineHeight: props.lineHeight + "px"
};
});
const numberGrow = (ele) => {
timerArray.value = [];
list.value.forEach((element, index) => {
const step = element / (element * 10);
let current = 0;
let start = 0;
let t = setInterval(() => {
start += step;
if (start > element) {
clearInterval(Number(t));
start = element;
t = null;
}
if (current === start) {
return;
}
current = start;
ele[index].innerHTML = current.toFixed(0).toString().replace(/(\d)(?=(?:\d{3}[+]?)+$)/g, "$1,");
}, textScollTime.value);
timerArray.value.push(t);
});
};
const refresh = () => {
refreshTimeRef.value && clearInterval(refreshTimeRef.value);
numberGrow(listDom.value);
};
onMounted(() => {
listValue.value = props.endValue;
numberScrolling();
if (props.interval) {
numberInterval();
}
});
onUnmounted(() => {
clearInterval(timer.value);
timerArray.value.forEach((element) => {
clearInterval(Number(element));
});
});
const updataSrc = (url) => {
imgSrc.value = url;
};
watch(
() => props.endValue,
() => {
listValue.value = props.endValue;
list.value = [];
timerArray.value.forEach((element) => {
clearInterval(Number(element));
});
numberScrolling();
}
);
watch(
() => props.interval,
() => {
timer.value && clearInterval(timer.value);
refreshTimeRef.value && clearInterval(refreshTimeRef.value);
if (props.interval) {
numberScrolling();
numberInterval();
}
}
);
watch(
() => props.intervalTime,
() => {
timer.value && clearInterval(timer.value);
refreshTimeRef.value && clearInterval(refreshTimeRef.value);
if (props.intervalTime != 0 && props.interval) {
intervalTime.value = props.intervalTime * 1e3;
numberInterval();
}
}
);
watch(
() => props.timeInterval,
() => {
timer.value && clearInterval(timer.value);
refreshTimeRef.value && clearInterval(refreshTimeRef.value);
if (props.intervalTime != 0 && props.timeInterval != 0 && props.interval) {
textScollTime.value = props.timeInterval / 100;
numberInterval();
}
}
);
watch(
() => props.src,
() => {
imgSrc.value = props.src;
}
);
return {
list,
attrs,
listValue,
listContent,
numberGrowRef,
imgSrc,
numberScrolling,
numberInterval,
numberGrow,
updataSrc,
refresh,
...toRefs(props)
};
}
});
const _hoisted_1 = {
class: "co-label-dealer",
ref: "dealerRef"
};
const _hoisted_2 = { class: "label-dealer__box" };
const _hoisted_3 = {
class: "label-dealer__box__content",
key: "index"
};
function _sfc_render(_ctx, _cache, $props, $setup, $data, $options) {
return openBlock(), createElementBlock("div", _hoisted_1, [
createElementVNode("div", _hoisted_2, [
(openBlock(true), createElementBlock(Fragment, null, renderList(_ctx.list, (item) => {
return openBlock(), createElementBlock("div", _hoisted_3, [
createElementVNode("div", {
class: "label-dealer__box__data",
ref_for: true,
ref: "numberGrowRef",
style: normalizeStyle(_ctx.attrs)
}, [
createElementVNode("span", null, toDisplayString(item), 1)
], 4)
]);
}), 128))
])
], 512);
}
var CoLabelDealer = /* @__PURE__ */ _export_sfc(_sfc_main, [["render", _sfc_render], ["__scopeId", "data-v-91ff614e"]]);
export { CoLabelDealer as default };