vue圆环百分比进度条组件功能的实现

  有需要的人可以参考一下,如果试用过,发现问题,欢迎留言告知,不胜感激。

功能介绍:

1、若页面无刷新,且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画

2、若页面无刷新,且第一次传值大于第二次传值则为执行递减动画

3、中间展示的百分比数字有缓动动画(速度同圆环进度动画一直)

4、动画完成时会触发动画完成回调

5、外部传值为圆环进度百分比(整数),圆环动画速度(整数)

效果如图所示:

<template>
  <div class="percentloop">
    <div class="circle-left">
      <div ref="leftcontent"></div>
    </div>
    <div class="circle-right">
      <div ref="rightcontent"></div>
    </div>
    <div class="number">
      {{ percent }} %
    </div>
  </div>
</template>

<script>
export default {
  props: {
    percentNum: {
      type: [String, Number],
      default: 0
    },
    speed: { // 建议取值为0-3
      type: [String, Number],
      default: 1
    }
  },
  data () {
    return {
      percent: 0,
      initDeg: 0,
      timeId: null,
      animationing: false
    }
  },
  methods: {
    transformToDeg (percent) {
      let deg = 0
      if (percent >= 100) {
        deg = 360
      } else {
        deg = parseInt(360 * percent / 100)
      }
      return deg
    },
    transformToPercent (deg) {
      let percent = 0
      if (deg >= 360) {
        percent = 100
      } else {
        percent = parseInt(100 * deg / 360)
      }
      return percent
    },
    rotateLeft (deg) { // 大于180时,执行的动画
      this.$refs.leftcontent.style.transform = 'rotate(' + (deg - 180) + 'deg)'
    },
    rotateRight (deg) { // 小于180时,执行的动画
      this.$refs.rightcontent.style.transform = 'rotate(' + deg + 'deg)'
    },
    goRotate (deg) {
      this.animationing = true
      this.timeId = setInterval(() => {
        if (deg > this.initDeg) { // 递增动画
          this.initDeg += Number(this.speed)
          if (this.initDeg >= 180) {
            this.rotateLeft(this.initDeg)
            this.rotateRight(180) // 为避免前后两次传入的百分比转换为度数后的值不为步距的整数,可能出现的左右转动不到位的情况。
          } else {
            this.rotateRight(this.initDeg)
          }
        } else { // 递减动画
          this.initDeg -= Number(this.speed)
          if (this.initDeg >= 180) {
            this.rotateLeft(this.initDeg)
          } else {
            this.rotateLeft(180) // 为避免前后两次传入的百分比转换为度数后的值不为步距的整数,可能出现的左右转动不到位的情况。
            this.rotateRight(this.initDeg)
          }
        }
        this.percent = this.transformToPercent(this.initDeg) // 百分比数据滚动动画
        const remainer = Number(deg) - this.initDeg
        if (Math.abs(remainer) < this.speed) {
          this.initDeg += remainer
          if (this.initDeg > 180) {
            this.rotateLeft(deg)
          } else {
            this.rotateRight(deg)
          }
          this.animationFinished()
        }
      }, 10)
    },
    animationFinished () {
      this.percent = this.percentNum // 百分比数据滚动动画
      this.animationing = false
      clearInterval(this.timeId)
      this.$emit('animationFinished') // 动画完成的回调
    }
  },
  created () {
    this.goRotate(this.transformToDeg(this.percentNum))
  },
  watch: {
    'percentNum': function (val) {
      if (this.animationing) return
      this.goRotate(this.transformToDeg(val))
    }
  }
}
</script>

<style scoped lang="scss">
.percentloop {
  position: relative;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  overflow: hidden;
  .circle-left, .circle-right {
    position: absolute;
    top: 0;
    left: 0;
    width: 50%;
    height: 100%;
    background-color: red;
    overflow: hidden;
    &>div {
      width: 100%;
      height: 100%;
      background-color: #8a8a8a;
      transform-origin: right center;
      /*transition: all .5s linear;*/
    }
  }
  .circle-right {
    left: 50%;
    &>div {
      transform-origin: left center;
    }
  }
  .number {
    position: absolute;
    top: 9%;
    bottom: 9%;
    left: 9%;
    right: 9%;
    background-color: #fff;
    border-radius: 50%;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #000;
  }
}
</style>

以上就是vue圆环百分比进度条组件功能的实现的详细内容,更多关于vue进度条的资料请关注我们其它相关文章!

(0)

相关推荐

  • vue组件实现进度条效果

    本文实例为大家分享了vue实现进度条效果的具体代码,供大家参考,具体内容如下 一.效果图 二.代码 progress-bar.vue <template> <div class="vue-progress-bar default-theme"> <div class="vue-progress-bar__tip"> <span class="vue-progress-bar__tiplabel">{

  • 在vue项目中使用Nprogress.js进度条的方法

    NProgress.js提供页面加载进度条效果,当页面打开加载时,在页面顶部会出现进度条加载动画.NProgress.js是轻量级的进度条组件,使用简便,可以很方便集成到单页面应用中. Ajaxyy应用程序的细长进度条.灵感来自Google,YouTube和Medium. 在vue中使用nprogress.js 安装 $ bower install --save nprogress $ npm install --save nprogress 在项目中引入 在main.js中引入要使用的npro

  • Vue进度条progressbar组件功能

    效果图 首先我们看一下进度条组件运行出来的效果,如下图显示 进度条组件 实现过程 ◾ 项目搭建 progressbar组件在一个可以直接运行的npm包,通过Yeoman进行构建,再通过Gulp+Webpack构建工具,生成的工作目录如下,其中各个文件夹的内容入之前的一篇文章一样 progressbar组件工作目录 ◾ progressbar源文件之template progressbar组件表现为.vue文件的形式,其中template部分内容如下 progressbar源文件template部

  • Vue的事件响应式进度条组件实例详解

    写在前面 找了很多vue进度条组件,都不包含拖拽和点击事件,input range倒是原生包含input和change事件,但是直接基于input range做进度条的话,样式部分需要做大量调整和兼容性处理.即使做好了,将来需要修改外观,又是一番折腾. 基于以上两个原因,做了一个可以响应input和change事件(即一个是拖动进度条到某处,一个是在进度条某位置点击使其值变为该位置)的div实现的Vue组件,这样既满足了对进度条事件的需求,也带来了如有需求变动,样式修改很方便的好处. 效果图 以

  • Vue实现带进度条的文件拖动上传功能

    1. 基本界面 <!doctype html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1

  • vue圆环百分比进度条组件功能的实现

    有需要的人可以参考一下,如果试用过,发现问题,欢迎留言告知,不胜感激. 功能介绍: 1.若页面无刷新,且第一次传值小于第二次传值或者圆环初始化时执行的是递增动画 2.若页面无刷新,且第一次传值大于第二次传值则为执行递减动画 3.中间展示的百分比数字有缓动动画(速度同圆环进度动画一直) 4.动画完成时会触发动画完成回调 5.外部传值为圆环进度百分比(整数),圆环动画速度(整数) 效果如图所示: <template> <div class="percentloop">

  • Vue实现动态圆环百分比进度条

    最近在开发小程序的时候,碰到一个实现圆环百分比进度条的需求,类似如下设计图: 小白的我感觉实现起来有难度,于是上百度看看别人是怎么做的,结果没找到一个满意的,要不是静态的实现,就是需要用到比较多的DOM操作,小程序还是尽量避免直接操作DOM. 下面是我以Vue组件形式做的一个动态的实现,先上效果图: 效果 实现步骤 画一个饼图 .pie { display: inline-block; position: relative; width: 150px; height: 150px; margin

  • vue视频时间进度条组件使用方法详解

    本文实例为大家分享了vue视频时间进度条组件的使用方法,供大家参考,具体内容如下 有些视频是以视频流的形式进行渲染的,没有视频滚动条,所以就写了24h的时间组件 实现思路: 1.24h的时间刻度线总宽度为12960px2.点击24h线的某一点,获取这一点离左侧原点的距离(使用dom元素layerX和offsetLeft综合判断)3.计算点击时线段的占比比率4.每天的时间是86400000毫秒5.占比比率乘以86400000就是获取的你点击的时间 代码如下: <template>   <d

  • Vue实现渐变色进度条的代码

    今天在封装一个个类似于下面这样的进度条组件 功能要求 进度条的总格子数可以自定义 当前件数的占比和当前蓝色格子数对应 格子的蓝色渐变要符合UI设计 这个渐变色的处理浪费了好一会功夫,下面看一下我的实现思路,大神勿喷啊,后面给出源码 首先确定props里面的值 即组件需要接收的值 这里只有名称.总数和当前值 props:{ name:{ type:String, default:()=>('数据名称') }, total:{ type:Number, default:()=>(24) }, va

  • vue+element+springboot实现文件下载进度条展现功能示例

    目录 1. 需求背景 2. 优化方案 3. 具体实现 3.1 前端代码 3.2 后台代码 4. 总结 本文主要介绍了vue+element+springboot实现文件下载进度条展现功能示例,分享给大家,具体如下 最终效果图 1. 需求背景 最近接到一个优化需求,原系统文件下载功能体验不友好,特别是下载一些比较耗时的文件,用户在页面上傻等不知道下载的进度是怎么样的,总以为是系统卡死了. 2. 优化方案 后台优化下载速度(可以研究一下分片下载,这里不做展开) 改造前端用户体验(比如点击下载后你要显

  • vue 页面加载进度条组件实例

    页面加载进度条最初我是在youtube上看到的,后面几乎在各大网站上都能见到它的身影,可以让用户在加载页面的时候不会对着完全空白的页面发呆,提升用户体验 但是从开发角度讲,这种进度条在真实性上确实很难把握,因为在逻辑代码加载完成之前,我们都不能统计到进度,而逻辑代码自身的进度也无法统计.另外,我们不可能监控到所有资源的加载情况. 事实上,用户并不是在乎你的页面究竟加载了百分之几,而真正关心的是离加载完还有多久,以及这个空白页面是没有加载完,还是加载完就是空白的.所以没我们需要去"模拟"

  • vue环形进度条组件实例应用

    在做项目的时候,最好只使用一套组件库,但是很多时候我们的组件库里面没有我们需要的组件,这个时候我们还是需要自己写组件了,vux里面就没有环形进度条组件,所以需要自己写一个. 查找资料后发现了一个很好的实现方式,通过svg来实现,以前的时候学过一点svg但是没有怎么深入了解过...现在看来真是罪过,给出参考链接 https://segmentfault.com/a/1190000008149403 可以看出原作者使用了两种方式,我们选择了第二种,简单,而且好扩展.可以看到svg就想是canvas一

  • vue2.0+SVG实现音乐播放圆形进度条组件

    vue2.0+SVG实现音乐播放圆形进度条组件,传入实时百分比实现圆圈进度动画效果 需求分析: 类似于大多数音乐播放器中等mini播放器控制按钮,显示播放进度,实时更新进度. progress-circle.vue源码: <template> <div class="progress-circle"> <svg :width="radius" :height="radius" viewBox="0 0 10

随机推荐