<template>
? <div class="chartNum">
? ? <div class="box-item">
? ? ? <li
? ? ? ? :class="{ 'number-item': !isNaN(item), 'mark-item': isNaN(item) }"
? ? ? ? v-for="(item, index) in orderNum"
? ? ? ? :key="index"
? ? ? >
? ? ? ? <span v-if="!isNaN(item)">
? ? ? ? ? <i ref="numberItem">0123456789</i>
? ? ? ? </span>
? ? ? ? <span class="comma" v-else>{{ item }}</span>
? ? ? </li>
? ? </div>
? </div>
</template>
<script>
export default {
? props: {
? ? // 顯示的數(shù)字
? ? number: {
? ? ? type: Number,
? ? },
? ? // 顯示的長度
? ? length: {
? ? ? type: Number,
? ? },
? },
? data() {
? ? return {
? ? ? orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默認(rèn)總數(shù)
? ? };
? },
? mounted() {
? ? setTimeout(() => {
? ? ? this.toOrderNum(this.number); // 這里輸入數(shù)字即可調(diào)用
? ? }, 500);
? },
? watch: {
? ? number: {
? ? ? handler(val) {
? ? ? ? this.toOrderNum(val);
? ? ? },
? ? ? deep: true,
? ? },
? },
? methods: {
? ? // 設(shè)置文字滾動(dòng)
? ? setNumberTransform() {
? ? ? const numberItems = this.$refs.numberItem; // 拿到數(shù)字的ref，計(jì)算元素?cái)?shù)量
? ? ? // eslint-disable-next-line no-restricted-globals
? ? ? const numberArr = this.orderNum.filter(item => !isNaN(item));
? ? ? console.log(numberItems.length, numberArr);
? ? ? // 結(jié)合CSS 對(duì)數(shù)字字符進(jìn)行滾動(dòng),顯示數(shù)量
? ? ? for (let index = 0; index < numberItems.length; index += 1) {
? ? ? ? const elem = numberItems[index];
? ? ? ? elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
? ? ? }
? ? },
? ? // 處理總數(shù)字
? ? toOrderNum(num) {
? ? ? const numtext = num.toString();
? ? ? if (this.length) {
? ? ? ? if (numtext.length < this.length) {
? ? ? ? ? const numlist = `0${numtext}`; // 如未滿固定數(shù)，添加"0"補(bǔ)位
? ? ? ? ? this.toOrderNum(numlist); // 遞歸添加"0"補(bǔ)位
? ? ? ? } else if (numtext.length === num.length) {
? ? ? ? ? this.orderNum = numtext.split(''); // 將其便變成數(shù)據(jù)，渲染至滾動(dòng)數(shù)組
? ? ? ? }
? ? ? } else {
? ? ? ? this.orderNum = numtext.split('');
? ? ? }
? ? ? // 數(shù)字中加入逗號(hào)
? ? ? // const length = numtext.length / 3;
? ? ? // let count = '';
? ? ? // for (let i = 0; i < length; i += 1) {
? ? ? // ? if (i === 0) {
? ? ? // ? ? count += `${numtext.slice(i, i + 3)},`;
? ? ? // ? ? console.log(count);
? ? ? // ? } else if (i === length - 1) {
? ? ? // ? ? count += numtext.slice(i * 3, i * 3 + 3);
? ? ? // ? ? console.log(count);
? ? ? // ? } else {
? ? ? // ? ? count += `${numtext.slice(i * 3, i * 3 + 3)},`;
? ? ? // ? ? console.log(count);
? ? ? // ? }
? ? ? // }
? ? ? // this.orderNum = count.split('');
? ? ? this.setNumberTransform();
? ? },
? },
};
</script>
<style scoped lang="scss">
/*總量滾動(dòng)數(shù)字設(shè)置*/
.box-item {
? position: relative;
? height: 34px;
? font-size: 20px;
? font-family: AzonixRegular;
? color: #021c25;
? line-height: 41px;
? text-align: center;
? list-style: none;
? writing-mode: vertical-lr;
? text-orientation: upright;
}
/* 默認(rèn)逗號(hào)設(shè)置 */
.mark-item {
? width: 28px;
? height: 34px;
? position: relative;
? /* 背景圖片 */
? background: url('~@/assets/images/overview/bg-chartNum.svg') no-repeat center
? ? center;
? background-size: 100% 100%;
? list-style: none;
? margin-right: 1px;
? & > span {
? ? position: absolute;
? ? width: 100%;
? ? height: 100%;
? ? bottom: 2px;
? ? left: 20%;
? ? font-size: 20px;
? ? writing-mode: vertical-rl;
? ? text-orientation: upright;
? }
}
/*滾動(dòng)數(shù)字設(shè)置*/
.number-item {
? width: 28px;
? height: 34px;
? /* 背景圖片 */
? background: url('~@/assets/images/overview/bg-chartNum.svg') no-repeat center
? ? center;
? background-size: 100% 100%;
? // background: #ccc;
? list-style: none;
? margin-right: 1px;
? & > span {
? ? position: relative;
? ? display: inline-block;
? ? margin-right: 10px;
? ? width: 100%;
? ? height: 100%;
? ? writing-mode: vertical-rl;
? ? text-orientation: upright;
? ? overflow: hidden;
? ? display: flex;
? ? align-items: center;
? ? justify-content: center;
? ? & > i {
? ? ? font-style: normal;
? ? ? position: absolute;
? ? ? top: 8px;
? ? ? left: 50%;
? ? ? transform: translate(-50%, 0);
? ? ? transition: transform 1s ease-in-out;
? ? ? letter-spacing: 10px;
? ? }
? }
}
.number-item:last-child {
? margin-right: 0;
}
</style>