<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"
:style="itemStyle"
>
<span v-if="!isNaN(item)" ref="numberItem">
<i>
<span :style="textStyle">0</span>
<span :style="textStyle">1</span>
<span :style="textStyle">2</span>
<span :style="textStyle">3</span>
<span :style="textStyle">4</span>
<span :style="textStyle">5</span>
<span :style="textStyle">6</span>
<span :style="textStyle">7</span>
<span :style="textStyle">8</span>
<span :style="textStyle">9</span>
</i>
</span>
<span class="comma" v-else>{{ item }}</span>
</li>
</div>
</div>
</template>
<script>
export default {
props: ["param"],
// param: {
// numLength: 6, //数字位数
// width: "32px", //单个数字宽度
// height: "42px", //单个数字高度
// bgStyle: { //数字背景样式
// 'padding-top':'2px',
// "background-color": "#A44353",
// "margin-right": "2px",
// },
// textStyle: { //数字字体样式
// color: "0xfff",
// "font-family": "numFamily",
// "font-size": "34px",
// },
// value: 0,
// }
data() {
return {
patern: [],
numLenngth: 0,
itemStyle: {},
textStyle: {},
orderNum: ["0", "0", "，", "0", "0", "0", "，", "0", "0", "0"],
};
},
created() {
this.initData(); //初始化数字格式
this.initStyle(); //初始化数字样式
this.toOrderNum(this.param.value); // 初始赋值
},
mounted() {
this.$nextTick(() => {
this.setNumberTransform();
});
},
methods: {
initData() {
if (!this.param.numLength &&this.param.numLength != 0 ) {
throw new Error("numLength没有传值");
}
if (this.param.numLength != 0) {
this.numLenngth = this.param.numLength;
}
},
initStyle() {
this.itemStyle = this.param.bgStyle;
this.itemStyle.width=this.param.width;
this.itemStyle.height=this.param.height;
this.textStyle = this.param.textStyle;
this.textStyle['line-height']=this.param.height;
},
// 设置文字滚动
setNumberTransform() {
const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
const numberArr = this.orderNum.filter((item) => !isNaN(item));
// 结合CSS 对数字字符进行滚动,显示订单数量
for (let index = 0; index < numberItems.length; index++) {
const elem = numberItems[index];
elem.style.transform = `translate(0, -${numberArr[index] * 42}px)`;
}
},
// 处理总数字
toOrderNum(num) {
num = num.toString();
if (num.length < this.numLenngth) {
num = "0" + num; // 如未满八位数，添加"0"补位
this.toOrderNum(num); // 递归添加"0"补位
} else if (num.length === this.numLenngth) {
// 更改数字格式
if (this.param.numLength != 0) {
this.orderNum = num.split(""); // 将其便变成数据，渲染至滚动数组
}
} else {
this.$message.warning("数字过大，显示异常"); // 数字超过最大位数显示异常
}
// console.log(this.orderNum);
},
},
watch: {
param: {
handler: function (newValue, oldValue) {
this.toOrderNum(newValue.value);
this.setNumberTransform();
},
deep: true,
},
},
};
</script>
<style scoped>
.chartNum {
background: #090
}
/*订单总量滚动数字设置*/
.box-item {
list-style: none;
user-select: none;
}
/*滚动数字设置*/
.number-item {
text-align: center;
margin-right: 4px;
width: 32px;
height: 42px;
background: #ccc;
list-style: none;
display: inline-block;
background: rgba(250, 250, 250, 1);
/* border-radius: 4px; */
/* border: 1px solid rgba(221, 221, 221, 1); */
overflow: hidden;
}
.number-item > span {
text-align: center;
display: inline-block;
transition: transform 1s ease-in-out;
}
.number-item > span > i {
text-align: center;
}
.number-item > span > i > span {
display: block;
/* line-height: 42px; */
text-align: center;
width: 32px;
height: 42px;
font-style: normal;
color: #fff;
}
.number-item:last-child {
margin-right: 0;
}
</style>
