123

2021-11-11 15:10:51 +08:00
parent ec0724c873
commit b4af257c70
63 changed files with 3189 additions and 832 deletions
@@ -0,0 +1,143 @@
+<template>
+	<div class="vue-number-scroll">
+		<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: {
+        value: {
+            type: Number,
+            default: 0
+        }
+    },
+    watch: {
+        value: {
+            handler(val){
+                if(!val) return;
+                this.toOrderNum(val); // 这里输入数字即可调用
+                this.$nextTick(() => {
+                    this.setNumberTransform()
+                })
+            },
+            deep: true,
+            immediate: true,
+        }
+    },
+	data() {
+		return {
+			orderNum: ['0'],
+		};
+	},
+	
+	methods: {
+		// 设置文字滚动
+		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(-50%, -${
+					numberArr[index] * 10
+				}%)`;
+			}
+		},
+		// 处理总金额
+		toOrderNum(num) {
+            this.orderNum = num.toString().split(""); // 将其变成数据，渲染至滚动数组
+		},
+	},
+};
+</script>
+
+<style lang="scss">
+/*金额滚动数字设置*/
+.vue-number-scroll{
+    .box-item {
+        width: 100%;
+        text-align: center;
+        line-height: 40px;
+        font-size: 1rem;
+        padding: 2% 0;
+        position: relative;
+        list-style: none;
+        text-orientation: upright;
+        /*文字禁止编辑*/
+        -moz-user-select: none; /*火狐*/
+        -webkit-user-select: none; /*webkit浏览器*/
+        -ms-user-select: none; /*IE10*/
+        -khtml-user-select: none; /*早期浏览器*/
+        user-select: none;
+        justify-content: center;
+    }
+
+    /* 默认逗号设置 */
+    .mark-item {
+        width: .4rem;
+        line-height: 10px;
+        height: 30px;
+        font-size: 24px;
+        position: relative;
+        color: yellow;
+        display: inline-block;
+    }
+    .mark-item span {
+        bottom: 0;
+    }
+    /*滚动数字设置*/
+    .number-item {
+        width: .6rem;
+        height: 1.2rem;
+        list-style: none;
+        background-size: 100% 100%;
+        color: yellow;
+        display: inline-block;
+        vertical-align: top;
+    }
+
+    .number-item:first-child {
+        margin-left: 0;
+    }
+
+    .number-item span {
+        position: relative;
+        display: inline-block;
+        margin-right: 10px;
+        width: 100%;
+        height: 100%;
+        writing-mode: vertical-rl;
+        text-orientation: upright;
+        overflow: hidden;
+    }
+
+    .number-item span i {
+        font-style: normal;
+        position: absolute;
+        top: 0px;
+        left: 50%;
+        transform: translate(-50%, 0);
+        transition: transform 0.5s ease-in-out;
+        letter-spacing: 10px;
+    }
+
+    .number-item:last-child {
+        margin-right: 0;
+    }
+}
+</style>