vue使用datav数字翻牌器

最新推荐文章于 2023-09-07 11:05:22 发布

冰冷的冰

最新推荐文章于 2023-09-07 11:05:22 发布

阅读量1.7k

点赞数 2

文章标签：前端 vue datav element

本文链接：https://blog.csdn.net/buchishutiao/article/details/132585589

版权

html：

<div class="item bg-color-black"  v-for="item in titleItem" :key="item.title">
      <p class="ml-3 colorBlue fw-b">{{ item.title }}</p>
      <div>
         <dv-digital-flop class="dv-dig-flop ml-1 mt-2 pl-3" :config="item.number"/>
      </div>
</div>

data中：

titleItem: [
        {
          title: '数据1（千万）',
          number: {
            number: [0],
            // toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 35
            }
          }
        },
        {
          title: '数据2（千万）',
          number: {
            number: [0],
            // toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 35
            }
          }
        },
        {
          title: '数据3（千万）',
          number: {
            number: [0],
            // toFixed: 0,
            textAlign: 'left',
            content: '{nt}',
            style: {
              fontSize: 35,
              fill:'#F3BA40' //数字颜色
            }
          }
        }
    ]

mounted中：

 setInterval(() => {
    this.getChangenumber()
  }, 3000)

methods里:

getChangenumber() {
      let that=this
      this.$axios.post("******Num").then((res)=>{
        let item=res.data
        console.log(item)
        // let sum=item.comNum+item.posNum
        that.titleItem[0].number.number[0]=item.comNum
        that.titleItem[1].number.number[0]=item.posNum
        that.titleItem[2].number.number[0]=item.sum
        this.titleItem[0].number=  {...this.titleItem[0].number};//对象解构，更新props
        this.titleItem[1].number=  {...this.titleItem[1].number};//对象解构，更新props
        this.titleItem[2].number=  {...this.titleItem[2].number};//对象解构，更新props
        
      })
    }