这是一个用Vue实现的数字翻牌器组件，通过`<template>`、`<script>`和`<style>`标签完成。组件接收字体大小、高度、内边距等样式属性，并在数值变化时更新显示。它使用了自定义的`scrollText` utility来实现数字滚动效果，适用于动态展示变化的数字场景。
<template>
<div
:class="name"
:style="{
'--fontSize': fontSize,
'--height': height,
'--padding': padding,
}"
></div>
</template>
<script>
import ScrollText from "../utils/scrollText";
export default {
data() {
return {
value: 0,
scrollText: null,
};
},
props: {
fontSize: {
type: String,
default: "85px",
},
height: {
type: String,
default: "80px",
},
padding: {
type: String,
default: "50px",
},
fontFamily: {
type: String,
default: "微软雅黑",
},
name: {
type: String,
default: "Odometer",
},
count: {
type: Number,
default: 1000,
},
},
mounted() {
this.scrollText = new ScrollText("." + this.name, {
num: this.count,
});
},
watch: {
count(value1) {
this.value = value1;
this.scrollText.update(this.value);
},
},
};
</script>
<style>
.number-animate {
line-height: var(--height);
height: var(--height);
font-size: var(--fontSize);
overflow: hidden;
display: inline-block;
position: relative;
color: black;
font-family: var(--fontFamily);
}
.number-animate .number-animate-dot {
width: var(--padding);
float: left;
text-align: center;
}
.number-animate .number-animate-dom {
width: var(--padding);
text-align: center;
float: left;
position: relative;
top: 0;
}
.number-animate .number-animate-dom span,
.number-animate .number-animate-dot span {
float: left;
width: 100%;
height: var(--height);
line-height: 1.1;
background-image: -webkit-linear-gradient(top, #ffffff, #81bac9);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
}
</style>
已经封装成完整都vue组件，可以直接使用html数字翻牌器.zip-互联网文档类资源-优快云下载
扫一扫
518
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
