这篇“vue3.0翻牌数字组件怎么使用”文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇“vue3.0翻牌数字组件怎么使用”文章吧。
效果：
代码：
<template> <div class="number-count-wrap" :class="numberSize"> <!-- 标题 start --> <div class="number-title" :>{{title}}</div> <!-- 标题 end --> <div class="number-count" :class="numberAlign"> <!-- 计数器 start --> <ul class="number-content"> <template v-for="(item,index) in orderNum" :key="index"> <li class="number-item" v-if="!isNaN(item)"> <span> <ul class="number-list" :ref="numberItem"> <li>0</li> <li>1</li> <li>2</li> <li>3</li> <li>4</li> <li>5</li> <li>6</li> <li>7</li> <li>8</li> <li>9</li> </ul> </span> </li> <li class="separator" v-else> {{item}} </li> </template> </ul> <!-- 计数器 end --> <!-- 单位 start --> <div class="number-unit" v-if="unit">{{unit}}</div> <!-- 单位 end --> </div> </div></template><script>import { onMounted, watch, ref, reactive, toRefs } from 'vue'export default { name: "numberCount", props: { numberSize: { // 字号大小 middle 中号 small 小号 type: String, default: '' }, title: { // 标题 type: String, default: "" }, titleAlign: { // 标题对齐方式 type: String, default: '' }, numberAlign: { //数字对齐方式 type: String, // center 居中对齐 default: '' }, unit: { // 单位 type: String, default: "" }, countNum: { // 数值 type: Number, }, initDelay: { // 首次加载延时 type: Number, } }, setup(props) { const numberItemList = ref([]); const numberItem = (el) => { numberItemList.value.push(el); }; var locarCountNum = props.countNum.toLocaleString() locarCountNum = locarCountNum.split('') const data = reactive({ orderNum: locarCountNum, // 默认订单总数 }); watch(props, (nval, oval) => { if (nval) { toOrderNum(nval.countNum) } }) onMounted(() => { setTimeout(() => { toOrderNum(props.countNum) // 这里输入数字即可调用 }, props.initDelay); }) function setNumberTransform () { const numberItems = numberItemList.value // 拿到数字的ref，计算元素数量 const numberArr = data.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] * 10}%)` } } // 处理总订单数字 function toOrderNum(num) { // console.log('num',num) // num = num.toString() // 把订单数变成字符串 // if (num.length < 7) { // num = '0' + num // 如未满八位数，添加"0"补位 // toOrderNum(num) // 递归添加"0"补位 // } else if (num.length === 7) { // // 订单数中加入逗号 // // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8) // data.orderNum = num.split('') // 将其便变成数据，渲染至滚动数组 // } else { // // 订单总量数字超过八位显示异常 // // _this.$message.warning('总量数字过大') // } setNumberTransform() } return { setNumberTransform, toOrderNum, numberItem, ...toRefs(data) } }};</script><style scoped lang="less">.number-count-wrap { .number-title { font-size: .18rem; color: #FFFFFF; line-height: 1; margin-bottom: .15rem; font-weight: bold; } .number-count { display: flex; justify-content: flex-start; align-items: flex-end; .number-content { display: flex; justify-content: flex-start; align-items: center; -moz-user-select: none; -webkit-user-select: none; -ms-user-select: none; -khtml-user-select: none; user-select: none; .number-item { width: 0.32rem; // height: 1.8rem; display: flex; justify-content: center; align-items: center; margin: 0 0.02rem; &>span { position: relative; display: inline-block; width: 100%; height: 0.4rem; overflow: hidden; background: linear-gradient(180deg, #2167D0 0%, #164D8F 100%); box-shadow: 0 .04rem 0 0 #176ED6; border-radius: .06rem; border: 1px solid white; padding-bottom: .04rem; box-sizing: border-box; .number-list{ transition: transform 1s ease-in-out; text-align: center; font-weight: 600; li { height: 0.4rem; display: flex; justify-content: center; align-items: center; font-size: .3rem; font-weight:400; color: white; padding-bottom: .04rem; box-sizing: border-box; } } } } .separator { font-size: .3rem; font-weight: normal; color: #FFFFFF; line-height: 1; margin: 0 0.025rem; } } .number-unit { margin-left: .1rem; font-size: .18rem; font-weight: normal; color: #B1B7BC; } } .center { justify-content: center; }}// middle start.middle { .number-title { font-size: .12rem; margin-bottom: .10rem; } .number-count { .number-content { .number-item { width: 0.2rem; margin: 0 0.0175rem; &>span { height: 0.25rem; box-shadow: 0 .025rem 0 0 #176ED6; border-radius: .04rem; padding-bottom: .025rem; .number-list{ li { height: 0.25rem; font-size: .2rem; font-weight:400; color: white; box-sizing: border-box; } } } } .separator { font-size: .2rem; margin: 0 0.025rem; } } .number-unit { margin-left: .06rem; font-size: .12rem; } }}// middle end</style>以上就是关于“vue3.0翻牌数字组件怎么使用”这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注编程网行业资讯频道。
