vue3.0翻牌数字组件使用
给我一个div，我给你画个饼 人气: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>加载全部内容