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


Posted in Javascript onOctober 10, 2018

在做项目的时候,最好只使用一套组件库,但是很多时候我们的组件库里面没有我们需要的组件,这个时候我们还是需要自己写组件了,vux里面就没有环形进度条组件,所以需要自己写一个。

查找资料后发现了一个很好的实现方式,通过svg来实现,以前的时候学过一点svg但是没有怎么深入了解过。。。现在看来真是罪过,给出参考链接

https://segmentfault.com/a/1190000008149403

可以看出原作者使用了两种方式,我们选择了第二种,简单,而且好扩展。可以看到svg就想是canvas一样进行绘图。原文已经讲得很详细了,这里就附上自己写的组件吧。伸手党们也能愉快一点。

<template>
 <svg :height="option.size" :width="option.size" x-mlns="http://www.w3.org/200/svg">
  <circle
   :r="option.radius"
   :cx="option.cx"
   :cy="option.cy"
   :stroke="option.outerColor"
   :stroke-width="option.strokeWidth"
   fill="none"
   stroke-linecap="round"/>
  <circle
   id="progressRound"
   :stroke-dasharray="completenessHandle"
   :r="option.radius"
   :cx="option.cx"
   :cy="option.cy"
   :stroke-width="option.strokeWidth"
   :stroke="option.innerColor"
   fill="none"
   class="progressRound"
  />
 </svg>
</template>
<script>
export default {
 name: 'CommonLoopProgress',
 props: {
  completeness: {
   type: Number,
   required: true,
  },
  progressOption: {
   type: Object,
   default: () => {},
  },
 },
 data () {
  return {
  }
 },
 computed: {
  completenessHandle () {
   let circleLength = Math.floor(2 * Math.PI * this.option.radius)
   let completenessLength = this.completeness * circleLength
   return `${completenessLength},100000000`
  },
  option () {
   // 所有进度条的可配置项
   let baseOption = {
    radius: 20,
    strokeWidth: 5,
    outerColor: '#E6E6E6',
    innerColor: '#FFDE00',
   }
   Object.assign(baseOption, this.progressOption)
   // 中心位置自动生成
   baseOption.cy = baseOption.cx = baseOption.radius + baseOption.strokeWidth
   baseOption.size = (baseOption.radius + baseOption.strokeWidth) * 2
   return baseOption
  },
 },
}
</script>
<style scoped lang='stylus'>
@import '~stylus/_variables.styl';
@import '~stylus/_mixins.styl';

.progressRound {
 transform-origin: center;
 transform: rotate(-90deg);
 transition: stroke-dasharray 0.3s ease-in;
}
</style>

修改了原文中的一些不好的命名方式,并且让我们的组件方便配置,可以自由一点。

以上就是本次知识点的全部内容,感谢大家对三水点靠木的支持。

Javascript 相关文章推荐
JavaScript实现控制打开文件另存为对话框的方法
Apr 17 Javascript
js实现表单Radio切换效果的方法
Aug 17 Javascript
JavaScript各类型的关系图解
Oct 16 Javascript
JS组件Bootstrap按钮组与下拉按钮详解
May 10 Javascript
移动端 一个简单易懂的弹出框
Jul 06 Javascript
vue todo-list组件发布到npm上的方法
Apr 04 Javascript
浅析前端路由简介以及vue-router实现原理
Jun 01 Javascript
浅谈VUE单页应用首屏加载速度优化方案
Aug 28 Javascript
vue-cli3.0+element-ui上传组件el-upload的使用
Dec 03 Javascript
iview form清除校验状态的实现
Sep 19 Javascript
Vuex中实现数据状态查询与更改
Nov 08 Javascript
一小时迅速入门Mybatis之bind与多数据源支持 Java API
Sep 15 Javascript
Node.js中读取TXT文件内容fs.readFile()用法
Oct 10 #Javascript
详解Node.js读写中文内容文件操作
Oct 10 #Javascript
angular6的响应式表单的实现
Oct 10 #Javascript
JS原生带缩略图的图片切换效果
Oct 10 #Javascript
js实现前面自动补全位数的方法
Oct 10 #Javascript
Egg.js 中 AJax 上传文件获取参数的方法
Oct 10 #Javascript
轻量级富文本编辑器wangEditor结合vue使用方法示例
Oct 10 #Javascript
You might like
PHP采集腾讯微博的实现代码
2012/01/19 PHP
PHP SPL标准库中的常用函数介绍
2015/05/11 PHP
PHP中类的自动加载的方法
2017/03/17 PHP
彻底搞懂PHP 变量结构体
2017/10/11 PHP
PHP登录验证功能示例【用户名、密码、验证码、数据库、已登陆验证、自动登录和注销登录等】
2019/02/25 PHP
解决PHP curl或file_get_contents下载图片损坏或无法打开的问题
2019/10/11 PHP
Yii 框架使用数据库(databases)的方法示例
2020/05/19 PHP
Prototype Selector对象学习
2009/07/23 Javascript
利用jQuery 实现GridView异步排序、分页的代码
2010/02/06 Javascript
jQuery截取指定长度字符串的实现原理及代码
2014/07/01 Javascript
Bootstrap中的fileinput 多图片上传及编辑功能
2016/09/05 Javascript
原生JS实现自定义滚动条效果
2020/10/27 Javascript
ES6中的Promise代码详解
2017/10/09 Javascript
使用3D引擎threeJS实现星空粒子移动效果
2020/09/13 Javascript
vue 自定义 select内置组件
2018/04/10 Javascript
react项目实践之webpack-dev-serve
2018/09/14 Javascript
JavaScript 作用域scope简单汇总
2019/10/23 Javascript
解决在Vue中使用axios POST请求变成OPTIONS的问题
2020/08/14 Javascript
python 实现将txt文件多行合并为一行并将中间的空格去掉方法
2018/12/20 Python
pytorch制作自己的LMDB数据操作示例
2019/12/18 Python
Django认证系统user对象实现过程解析
2020/03/02 Python
Jupyter 无法下载文件夹如何实现曲线救国
2020/04/22 Python
DataFrame 数据合并实现(merge,join,concat)
2020/06/14 Python
浅谈Django前端后端值传递问题
2020/07/15 Python
Python 程序员必须掌握的日志记录
2020/08/17 Python
基于Canvas+Vue的弹幕组件的实现
2019/07/23 HTML / CSS
让IE支持HTML5的方法
2012/12/11 HTML / CSS
苹果香港官方商城:Apple香港
2016/09/14 全球购物
Bose加拿大官方网站:美国知名音响品牌
2019/03/21 全球购物
人力资源专员自我评价怎么写
2013/09/19 职场文书
出纳的岗位职责
2013/11/09 职场文书
酒店总经理岗位职责
2014/03/17 职场文书
师范生教育见习总结
2015/06/23 职场文书
2015年依法治校工作总结
2015/07/27 职场文书
2016年共产党员个人承诺书
2016/03/24 职场文书
Win11筛选键导致键盘失灵怎么解决? Win11关闭筛选键的技巧
2022/04/08 数码科技