vue实现数字动态翻牌器
作者：Kepler_明
这篇文章主要为大家详细介绍了vue实现数字动态翻牌器，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
数字动态翻牌器
最近项目里使用到了数字翻牌器，于是自己写了一个，动态的翻牌器
第一步创建一个组件页面，NumberCount.vue
思路：大概就是显示几位数，然后从0开始滚动到当前的数值的位置，在每一个位置都有0-9的数，然后就是往上滚动当前数值的次数到当前的数，话不多说上代码
<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: {
// 显示的数字
number: {
type: Number,
},
// 显示的长度
length: {
type: Number,
},
},
data() {
return {
orderNum: ['0', '0', '0', '0', '0', '0', '0', '0'], // 默认总数
};
},
mounted() {
setTimeout(() => {
this.toOrderNum(this.number); // 这里输入数字即可调用
}, 500);
},
watch: {
number: {
handler(val) {
this.toOrderNum(val);
},
deep: true,
},
},
methods: {
// 设置文字滚动
setNumberTransform() {
const numberItems = this.$refs.numberItem; // 拿到数字的ref，计算元素数量
// eslint-disable-next-line no-restricted-globals
const numberArr = this.orderNum.filter(item => !isNaN(item));
console.log(numberItems.length, numberArr);
// 结合CSS 对数字字符进行滚动,显示数量
for (let index = 0; index < numberItems.length; index += 1) {
const elem = numberItems[index];
elem.style.transform = `translate(-50%, -${numberArr[index] * 10}%)`;
}
},
// 处理总数字
toOrderNum(num) {
const numtext = num.toString();
if (this.length) {
if (numtext.length < this.length) {
const numlist = `0${numtext}`; // 如未满固定数，添加"0"补位
this.toOrderNum(numlist); // 递归添加"0"补位
} else if (numtext.length === num.length) {
this.orderNum = numtext.split(''); // 将其便变成数据，渲染至滚动数组
}
} else {
this.orderNum = numtext.split('');
}
// 数字中加入逗号
// 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">
/*总量滚动数字设置*/
.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;
}
/* 默认逗号设置 */
.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;
}
}
/*滚动数字设置*/
.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>不加逗号：
加入逗号：
至于样式背景可以自定义
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。