數字滾動
阿新 • • 發佈:2021-01-06
技術標籤:vue的一些使用技巧htmlvue
將數字滾動單獨封裝成一個元件(如果專案中有規定的數字四個 0010 那麼傳入字串 ‘0010’就可以了)
<template> <div class="chartNum"> <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: ["number"], data() { return { orderNum: [0, 0] }; }, watch:{ number(val){ console.log(val) } }, created() { this.autoNumberFn(this.number); }, methods: { autoNumberFn(num) { num = num.toString(); this.orderNum = num.split(""); // 將其便變成資料,渲染至滾動陣列 setTimeout(() => { this.setNumberTransform(); // 這裡輸入數字即可呼叫 }, 500); }, // 設定文字滾動 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}%)`; } } } }; </script> <style lang="less" scoped> /*訂單總量滾動數字設定*/ .chartNum { display: inline-flex; overflow: hidden; } .box-item { position: relative; height: 0.8rem; font-size: 0.6rem; line-height: 0.8rem; text-align: center; list-style: none; // color: #2d7cff; writing-mode: vertical-lr; text-orientation: upright; /*文字禁止編輯*/ -moz-user-select: none; /*火狐*/ -webkit-user-select: none; /*webkit瀏覽器*/ -ms-user-select: none; /*IE10*/ -khtml-user-select: none; /*早期瀏覽器*/ user-select: none; overflow: hidden; } .box-item li { width: 0.3rem; height: 100%; position: relative; overflow: hidden; // color: #fff; } /* 預設逗號設定 */ .box-item li.mark-item { width: 0.3rem; text-align: center; line-height: 0px; font-size: 0.8rem; position: relative; } .mark-item > span { position: absolute; width: 100%; bottom: 0; writing-mode: vertical-rl; text-orientation: upright; } /*滾動數字設定*/ .box-item li.number-item { list-style: none; border-radius: 8px; // border: 1px solid rgb(19, 136, 97); box-sizing: border-box; } .number-item > span { position: relative; display: flex; align-items: center; width: 100%; height: 100%; overflow: hidden; // background: var(--shdk_bgColor1); } .number-item > span > i { font-style: normal; position: absolute; top: 0.05rem; left: 50%; transform: translate(-50%, 0); transition: transform 1s ease-in-out; letter-spacing: 0.1rem; font-family: number; } .mark-item > span.comma { display: flex; align-items: center; position: absolute; width: 100%; height: 80%; left: 50%; bottom: 30%; text-align: center; transform: translate(-50%, 0); } </style>
使用該元件
<template> <div> <auto-num :number="'0001'"></auto-num> <auto-num :number="12345"></auto-num> </div> </template> <script> import AutoNum from "@/components/autoNum"; // 放置具體該元件的路徑位置 export default { name: "", components: {AutoNum}, mounted() { }, data() { return { }; }, methods: { } }; </script> <style lang="less" scoped> </style>