请求数据直接渲染一次
<template>
<div class="number">
<ul id="dataNums">
<li v-for="(item, index) in list" :key="index">
<div class="dataBoc">
<div
class="tt"
:style="{
transition: 'all 2.5s ease-in-out 0s',
top: '-' + item.top + 'px',
}"
>
<span v-for="(item2, index2) in numList" :key="index2"
>{{ item2 }}
</span>
</div>
</div>
</li>
</ul>
</div>
</template>
<script>
export default {
props: { number: Number },
data() {
return {
list: [],
numList: [
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
0,
1,
2,
3,
4,
5,
6,
7,
8,
9,
'.',
],
}
},
mounted() {
this.scroll()
},
methods: {
scroll() {
this.list = this.number.toString().split('')
let arr = []
this.list.forEach((value) => {
arr.push({ num: value, top: 0 })
})
this.list = arr
let Hei = parseFloat(
getComputedStyle(document.getElementById('dataNums')).height
)
this.list.forEach((value, index) => {
setTimeout(() => {
value.top = parseFloat(value.num * Hei + Hei * 10)
}, index * 300)
})
},
},
}
</script>
<style scoped lang="scss">
.number {
text-align: center;
width: auto;
padding: 0 20px;
height: 95px;
background: url('../../static/pages/numberBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
ul {
display: inline-block;
height: 100px;
text-align: center;
li {
float: left;
width: 40px;
height: 100px;
margin: 0 4px;
background: url('../../static/pages/number.png') center center;
background-repeat: no-repeat;
background-size: 100% 60%;
.dataBoc {
position: relative;
width: 100%;
height: 100%;
overflow: hidden;
.tt {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
span {
width: 100%;
height: 100%;
line-height: 100px;
float: left;
text-align: center;
font-size: 60px;
color: #fff;
}
}
}
}
}
}
</style>
动态翻牌(根据传来的值更新数据)
<!--
* @Author: your name
* @Date: 2021-08-05 14:44:20
* @LastEditTime: 2021-08-06 10:03:29
* @LastEditors: Please set LastEditors
* @Description: In User Settings Edit
* @FilePath: \echarts\echarts\src\components\number.vue
-->
<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 {
name: 'hChartNum',
props: {
num: {
type: Number,
default: 1123,
},
},
data() {
return {
orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'],
}
},
watch: {
num(newVal, oldVal) {
console.log(newVal)
this.toOrderNum(newVal)
},
},
mounted() {
setTimeout(() => {
this.toOrderNum(this.num)
}, 500)
},
methods: {
setNumberTransform() {
const numberItems = this.$refs.numberItem
const numberArr = this.orderNum.filter((item) => !isNaN(item))
for (let index = 0; index < numberItems.length; index++) {
const elem = numberItems[index]
elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`
}
},
toOrderNum(num) {
num = num.toString()
if (num.length < 8) {
num = '0' + num
this.toOrderNum(num)
} else if (num.length == 8) {
this.orderNum = num.split('')
} else {
this.$message.error('数据量过大')
}
this.setNumberTransform()
},
},
}
</script>
<style scoped lang="scss">
.box-item {
position: absolute;
top: 5%;
left: 3%;
padding: 20px 20px 0 20px;
font-size: 60px;
line-height: 100px;
height: 95px;
text-align: center;
list-style: none;
color: #fff;
writing-mode: vertical-lr;
text-orientation: upright;
background: url('../../static/pages/numberBg.png');
background-repeat: no-repeat;
background-size: 100% 100%;
-moz-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
-khtml-user-select: none;
user-select: none;
}
.number-item {
width: 10px;
height: 100px;
margin-right: 5px;
line-height: 10px;
font-size: 48px;
position: relative;
& > span {
position: absolute;
width: 100%;
bottom: 0;
writing-mode: vertical-rl;
text-orientation: upright;
}
}
.number-item {
width: 41px;
height: 75px;
background: url(../../static/pages/number.png) no-repeat center center;
background-size: 100% 100%;
list-style: none;
margin-right: 5px;
& > span {
position: relative;
display: inline-block;
margin-right: 10px;
width: 100%;
height: 100%;
writing-mode: vertical-rl;
text-orientation: upright;
overflow: hidden;
& > i {
font-style: normal;
position: absolute;
top: 11px;
left: 50%;
transform: translate(-50%, 0);
transition: transform 1s ease-in-out;
letter-spacing: 10px;
}
}
}
.number-item:last-child {
margin-right: 0;
}
</style>