文章详情

短信预约-IT技能 免费直播动态提醒

请输入下面的图形验证码

提交验证

短信预约提醒成功

Vue中怎么使用js制作进度条式数据对比动画

2023-06-29 17:20

关注

本文小编为大家详细介绍“Vue中怎么使用js制作进度条式数据对比动画”,内容详细,步骤清晰,细节处理妥当,希望这篇“Vue中怎么使用js制作进度条式数据对比动画”文章能帮助大家解决疑惑,下面跟着小编的思路慢慢深入,一起来学习新知识吧。

实现的效果:(初始化以及浏览器resize的时候两侧的条形为向两侧递增的动画,其中两端的数字也是递增的动画)

Vue中怎么使用js制作进度条式数据对比动画

HTML部分:

<div class="no-ivatargo-chart-b">  <div class="investment-ability">    <div class="title">      <span>您的投资能力分析</span>    </div>    <div class="investment-ability-picture-outer-container">      <div class="investment-ability-picture-container">        <div class="investment-ability-picture-header"             ref="allLine">          <span>我</span>          <span>平均</span>        </div>        <div class="investment-ability-picture"             v-for="(item, index) in abilityArr"             :key="index">          <div class="investment-ability-picture-top">            <div class="investment-left">              <div class="left-icon-outer">                <div class="left-icon-inner"></div>              </div>              <span>{{item.title}}</span>            </div>            <div class="investment-right">              <div class="investment-info">                <span class="my-color">{{item.score | scoreFilter}}</span>                <div class="all-line">                  <div class="my-line"                       :></div>                  <div class="other-line"                       :></div>                </div>                <span class="average-color">{{item.average | scoreFilter}}</span>              </div>            </div>          </div>        </div>        <div class="investment-ability-picture-footer">          <span>100</span>          <span>0</span>          <span>100</span>        </div>      </div>    </div>  </div></div>
filters: {  scoreFilter (val) {    if (!isNaN(val)) {      return Number(val) < 10 ? `0${parseInt(val)}` : parseInt(val)    } else {      return ''    }  }}

CSS部分:

.no-ivatargo-chart-b {  width: 100%;  overflow: hidden;  display: flex;  flex-direction: column;  font-size: 14.76px;  color: #bfbfbf;  background-color: #0f1318;  .title {    display: flex;    align-items: center;    font-size: 17.22px;    color: #bfbfbf;    margin-bottom: 15px;  }  .investment-ability-picture-header {    width: 400px;    margin-left: 130px;    display: flex;    align-items: center;    justify-content: space-around;    margin-bottom: 10px;    color: #fff;  }  .investment-ability-picture-outer-container {    display: flex;    justify-content: center;    align-items: center;    height: calc(100% - 50px);    .investment-ability-picture-container {      display: flex;      flex-direction: column;      .investment-ability-picture {        display: flex;        flex-direction: column;        margin-bottom: 10px;        .investment-ability-picture-top {          display: flex;          .investment-left {            font-size: 14.76px;            color: #bfbfbf;            width: 100px;            display: flex;            align-items: center;            .left-icon-outer {              width: 14px;              height: 14px;              background-color: #3fb050;              border-radius: 50%;              position: relative;              margin-right: 5px;              .left-icon-inner {                position: absolute;                width: 5px;                height: 5px;                top: 50%;                left: 50%;                transform: translate(-50%, -50%);                background-color: #fff;                border-radius: 50%;              }            }          }          .investment-right {            display: flex;            align-items: center;            justify-content: space-between;            .investment-info {              display: flex;              align-items: center;              justify-content: space-between;              .all-line {                width: 400px;                height: 10px;                background-color: #57606e;                border-radius: 2px;                margin-left: 10px;                margin-right: 10px;                position: relative;                .my-line {                  width: 0;                  height: 10px;                  position: absolute;                  top: 0;                  right: 200px;                  background-color: #f5a623;                  border-top-left-radius: 2px;                  border-bottom-left-radius: 2px;                }                .other-line {                  width: 0;                  height: 10px;                  position: absolute;                  top: 0;                  left: 200px;                  background-color: #1890ff;                  border-top-right-radius: 2px;                  border-bottom-right-radius: 2px;                }              }              .my-color {                width: 20px;                color: #f5a623;              }              .average-color {                width: 20px;                color: #1890ff;              }            }          }        }        .investment-ability-picture-bottom {          display: flex;          flex-direction: column;          background-color: #ccc;          width: 400px;          margin-left: 130px;          padding: 5px;          color: #000;        }      }    }  }  .investment-ability-picture-footer {    width: 400px;    margin-left: 130px;    display: flex;    align-items: center;    justify-content: space-between;    color: #fff;  }}

JS部分:

子组件当中

mounted () {  let that = this  window.onresize = () => {    clearTimeout(that.resizeTimer)    that.resizeTimer = setTimeout(() => {      that.handleGetAllWidth()    }, 1000)  }  this.$nextTick(() => {    clearTimeout(this.resizeTimerB)    this.resizeTimerB = setTimeout(() => {      this.handleGetAllWidth()    }, 200)  })} // methods当中handleGetAllWidth () {  this.$emit('getAllWidth', this.$refs.allLine.offsetWidth)}

父组件当中

getAllLineWidth (data) {  this.allLineWidth = data  this.calculateIvatargo()},// 给条形图添加计算宽度,并形成动画calculateIvatargo () {  this.myTimerArr.forEach((value, index) => {    clearInterval(value)  })  this.averageTimerArr.forEach((value, index) => {    clearInterval(value)  })  this.myTimerArr = []  this.averageTimerArr = []  let myVal = []  let averageVal = []  this.myAbilityArr.forEach((value, index) => {    myVal[index] = 0    averageVal[index] = 0    this.myTimerArr[index] = setInterval(() => {      if (myVal[index] > Number(this.allLineWidth) * Number(value.score) / 200 || !value.score) {        clearInterval(this.myTimerArr[index])        value.score ? myVal[index] = Number(this.allLineWidth) * Number(value.score) / 200 : myVal[index] = 0        this.$set(value, 'myWidth', myVal[index] + 'px')        this.$set(value, 'myNum', value.score)      } else {        myVal[index]++        this.$set(value, 'myWidth', myVal[index] + 'px')        this.$set(value, 'myNum', myVal[index] / 2)      }    }, 5)    this.averageTimerArr[index] = setInterval(() => {      if (averageVal[index] > Number(this.allLineWidth) * Number(value.average) / 200 || !value.average) {        clearInterval(this.averageTimerArr[index])        value.average ? averageVal[index] = Number(this.allLineWidth) * Number(value.average) / 200 : averageVal[index] = 0        this.$set(value, 'averageWidth', averageVal[index] + 'px')        this.$set(value, 'averageNum', value.average)      } else {        averageVal[index]++        this.$set(value, 'averageWidth', averageVal[index] + 'px')        this.$set(value, 'averageNum', averageVal[index] / 2)      }    }, 5)  })}

读到这里,这篇“Vue中怎么使用js制作进度条式数据对比动画”文章已经介绍完毕,想要掌握这篇文章的知识点还需要大家自己动手实践使用过才能领会,如果想了解更多相关内容的文章,欢迎关注编程网行业资讯频道。

阅读原文内容投诉

免责声明:

① 本站未注明“稿件来源”的信息均来自网络整理。其文字、图片和音视频稿件的所属权归原作者所有。本站收集整理出于非商业性的教育和科研之目的,并不意味着本站赞同其观点或证实其内容的真实性。仅作为临时的测试数据,供内部测试之用。本站并未授权任何人以任何方式主动获取本站任何信息。

② 本站未注明“稿件来源”的临时测试数据将在测试完成后最终做删除处理。有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341

软考中级精品资料免费领

  • 历年真题答案解析
  • 备考技巧名师总结
  • 高频考点精准押题
  • 2024年上半年信息系统项目管理师第二批次真题及答案解析(完整版)

    难度     813人已做
    查看
  • 【考后总结】2024年5月26日信息系统项目管理师第2批次考情分析

    难度     354人已做
    查看
  • 【考后总结】2024年5月25日信息系统项目管理师第1批次考情分析

    难度     318人已做
    查看
  • 2024年上半年软考高项第一、二批次真题考点汇总(完整版)

    难度     435人已做
    查看
  • 2024年上半年系统架构设计师考试综合知识真题

    难度     224人已做
    查看

相关文章

发现更多好内容

猜你喜欢

AI推送时光机
位置:首页-资讯-后端开发
咦!没有更多了?去看看其它编程学习网 内容吧
首页课程
资料下载
问答资讯