vue3.0翻牌數(shù)字組件使用方法詳解

更新時(shí)間：2022年04月20日 12:04:27 作者：給我一個(gè)div，我給你畫個(gè)餅

這篇文章主要為大家詳細(xì)介紹了vue3.0翻牌數(shù)字組件使用方法，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

本文實(shí)例為大家分享了vue3.0翻牌數(shù)字組件使用的具體代碼，供大家參考，具體內(nèi)容如下

代碼

<template>
? <div class="number-count-wrap" :class="numberSize">
? ? <!-- 標(biāo)題 start -->
? ? <div class="number-title" :style="{'text-align': titleAlign}">{{title}}</div>
? ? <!-- 標(biāo)題 end -->
? ? <div class="number-count" :class="numberAlign">
? ? ? <!-- 計(jì)數(shù)器 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>
? ? ? <!-- 計(jì)數(shù)器 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: { // 標(biāo)題
? ? ? type: String,
? ? ? default: ""
? ? },
? ? titleAlign: { // 標(biāo)題對齊方式
? ? ? type: String,
? ? ? default: ''
? ? },
? ? numberAlign: { //數(shù)字對齊方式
? ? ? type: String, // center 居中對齊
? ? ? default: ''
? ? },
? ? unit: { // 單位
? ? ? type: String,
? ? ? default: ""
? ? },
? ? countNum: { // 數(shù)值
? ? ? type: Number,
? ? },
? ? initDelay: { // 首次加載延時(shí)
? ? ? 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, // 默認(rèn)訂單總數(shù)
? ? });
? ? watch(props, (nval, oval) => {
? ? ? if (nval) {
? ? ? ? toOrderNum(nval.countNum)
? ? ? }
? ? })
? ? onMounted(() => {
? ? ? setTimeout(() => {
? ? ? ? toOrderNum(props.countNum) // 這里輸入數(shù)字即可調(diào)用
? ? ? }, props.initDelay);
? ? })
? ? function setNumberTransform () {
? ? ? const numberItems = numberItemList.value // 拿到數(shù)字的ref，計(jì)算元素?cái)?shù)量
? ? ? const numberArr = data.orderNum.filter(item => !isNaN(item))
? ? ? // 結(jié)合CSS 對數(shù)字字符進(jìn)行滾動(dòng),顯示訂單數(shù)量
? ? ? for (let index = 0; index < numberItems.length; index++) {
? ? ? ? const elem = numberItems[index]
? ? ? ? elem.style.transform = `translate(0%, -${numberArr[index] * 10}%)`
? ? ? }
? ? }
? ? // 處理總訂單數(shù)字
? ? function toOrderNum(num) {
? ? ? // console.log('num',num)
? ? ? // num = num.toString()
? ? ? // 把訂單數(shù)變成字符串
? ? ? // if (num.length < 7) {
? ? ? // ? num = '0' + num // 如未滿八位數(shù)，添加"0"補(bǔ)位
? ? ? // ? toOrderNum(num) // 遞歸添加"0"補(bǔ)位
? ? ? // } else if (num.length === 7) {
? ? ? // ? // 訂單數(shù)中加入逗號
? ? ? // ? // num = num.slice(0, 2) + ',' + num.slice(2, 5) + ',' + num.slice(5, 8)
? ? ? // ? data.orderNum = num.split('') // 將其便變成數(shù)據(jù)，渲染至滾動(dòng)數(shù)組
? ? ? // } else {
? ? ? // ? // 訂單總量數(shù)字超過八位顯示異常
? ? ? // ? // _this.$message.warning('總量數(shù)字過大')
? ? ? // }
? ? ? 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>

以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

您可能感興趣的文章: