How to use the vue3.0 Flip Digital component
这篇"vue3.0翻牌数字组件怎么使用"文章的知识点大部分人都不太理解，所以小编给大家总结了以下内容，内容详细，步骤清晰，具有一定的借鉴价值，希望大家阅读完这篇文章能有所收获，下面我们一起来看看这篇"vue3.0翻牌数字组件怎么使用"文章吧。
效果：
代码：
{{title}} 0 1 2 3 4 5 6 7 8 9 {{item}} {{unit}} 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) } }};.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以上就是关于"vue3.0翻牌数字组件怎么使用"这篇文章的内容，相信大家都有了一定的了解，希望小编分享的内容对大家有帮助，若想了解更多相关的知识内容，请关注行业资讯频道。
