<numcard :num="item" v-for="(item,index) in num2" :key="index"></numcard>
function converStr(str) {//给数字字符串添加逗号分隔符
if (/\./.test(str)) {
return str.replace(/\d(?=(\d{1})+\.)/g, "$&,").split("").reverse().join("").replace(/\d(?=(\d{1})+\.)/g,"$&,").split("").reverse().join("");
} else {
return str.replace(/\d(?=(\d{1})+$)/g, "$&,");
}
}
computed: {
num2: function () {
return converStr(this.num.toString()).split(",")
}
},
数字滚动组件
vue数字滚动组件
完整代码
/**
* @Author: 858834013@qq.com
* @Name: item
* @Date: 2022-07-01
* @Desc:
*/
<template>
<div class="item1">
<div class="item1t">
<div class="number" v-bind:style="{ color: color}">
<numcard :num="item" v-for="(item,index) in num2" :key="index"></numcard>
</div>
<span v-bind:style="{ color: color}">个</span></div>
<div class="item1b">{{ desc }}</div>
</div>
</template>
<script>
import numcard from "@/components/numcard";
function converStr(str) {//给数字字符串添加逗号分隔符
if (/\./.test(str)) {
return str.replace(/\d(?=(\d{1})+\.)/g, "$&,").split("").reverse().join("").replace(/\d(?=(\d{1})+\.)/g, "$&,").split("").reverse().join("");
} else {
return str.replace(/\d(?=(\d{1})+$)/g, "$&,");
}
}
export default {
name: "item",
components: {numcard},
props: {
desc: {
type: String,
default() {
return '';
}
},
color: {
type: String,
default() {
return '';
}
},
num: {
type: String,
default() {
return '';
}
},
},
computed: {
num2: function () {
return converStr(this.num.toString()).split(",")
}
},
data() {
return {
status: ''
}
},
watch: {},
mounted() {
},
methods: {}
}
</script>
<style lang="scss" scoped>
.item1 {
background: url("../../../assets/qiye/juxingbg.png") no-repeat;
width: 109px;
height: 71px;
background-size: 100% 100%;
margin-left: 15px;
margin-right: 15px;
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: column;
align-content: flex-start;
.item1t {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
span {
font-size: 14px;
padding-top: 5px;
}
}
.item1b {
font-size: 14px;
font-family: MicrosoftYaHei;
font-weight: 400;
color: #FFFFFF;
opacity: 0.9;
margin-top: -5px;
}
}
.number {
display: flex;
justify-content: center;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
align-content: flex-start;
span {
font-size: 30px !important;
}
}
</style>