1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
| <template>
<div class="chart-number">
<div :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" class="numberItem">0123456789</i>
</span>
<span class="comma" v-else>{{ item }}</span>
</div>
</div>
</template>
<script>
import { onMounted,watch,getCurrentInstance} from 'vue';
export default {
props: {
// 显示的数字
number: {
type: Number,
},
// 显示的长度
length: {
type: Number,
},
},
setup(props){
let numberN=props.number||0; // 显示数字
let numberNLength=props.length||7; // 数字长度
let orderNum=['0', '0', '0', '0', '0', '0', '0']; // 默认总数
// 获取当前组件
const { proxy } = getCurrentInstance();
// 设置文字滚动
function setNumberTransform() {
const numberItems=proxy.$el.querySelectorAll(".numberItem"); // 拿到数字的ref，计算元素数量
// eslint-disable-next-line no-restricted-globals
const numberArr = orderNum.filter(item => !isNaN(item));
// 结合CSS 对数字字符进行滚动,显示数量
for (let index = 0; index < numberItems.length; index += 1) {
const elem = numberItems[index];
elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
}
}
// 处理总数字
function toOrderNum(num) {
const numtext = num.toString();
if (numberNLength) {
if (numtext.length < numberNLength) {
const numlist = `0${numtext}`; // 如未满固定数，添加"0"补位
toOrderNum(numlist); // 递归添加"0"补位
} else if (numtext.length === num.length) {
orderNum = numtext.split(''); // 将其便变成数据，渲染至滚动数组
}
} else {
orderNum = numtext.split('');
}
// 执行数字动画
setNumberTransform();
}
/**
* 生命周期
*/
watch(()=>props.number,(newNumber)=>{
toOrderNum(newNumber); // 这里输入数字即可调用
});
onMounted(()=>{
setTimeout(() => {
toOrderNum(numberN); // 这里输入数字即可调用
}, 500);
})
return {
orderNum
}
}
}
</script>
<style scoped lang="scss">
/*总量滚动数字设置*/
.chart-number {
position: relative;
font-size: 20px;
font-family: AzonixRegular;
display: flex;
width: 100%;
justify-content: space-around;
/*滚动数字设置*/
.number-item {
width:30px;
height: 30px;
/* 背景图片 */
background: url("../assets/img/number_box.png") 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: 6px;
left: 50%;
transform: translate(-50%, 0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
}
}
}
.number-item:last-child {
margin-right: 0;
}
}
</style>
|
