vue3.0翻牌数字组件使用方法详解
作者:给我一个div,我给你画个饼
这篇文章主要为大家详细介绍了vue3.0翻牌数字组件使用方法,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
本文实例为大家分享了vue3.0翻牌数字组件使用的具体代码,供大家参考,具体内容如下
代码
<template> <div class="number-count-wrap" :class="numberSize"> <!-- 标题 start --> <div class="number-title" :style="{'text-align': titleAlign}">{{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; /*webkit浏览器*/ -ms-user-select: none; /*IE10*/ -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>
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。