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页面刷新与弹出窗口问题的解决方法
Mar 02 Javascript
jquery中eq和get的区别与使用方法
Apr 14 Javascript
Jquery实现仿新浪微博获取文本框能输入的字数代码
Feb 22 Javascript
JS如何将UTC格式时间转本地格式
Sep 04 Javascript
解决js下referer兼容各大浏览器的方法
Nov 03 Javascript
使用javascript实现判断当前浏览器
Apr 14 Javascript
js鼠标点击按钮切换图片-图片自动切换-点击左右按钮切换特效代码
Sep 02 Javascript
jQuery实现的左右移动焦点图效果
Jan 14 Javascript
angular.js之路由的选择方法
Sep 24 Javascript
jQuery实现定时隐藏对话框的方法分析
Feb 12 jQuery
vue+vue-router转场动画的实例代码
Sep 01 Javascript
详解用js代码触发dom事件的实现方案
Jun 10 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/02/05 PHP
字符串长度函数strlen和mb_strlen的区别示例介绍
2014/09/09 PHP
PHP+RabbitMQ实现消息队列的完整代码
2019/03/20 PHP
PHP CURL中传递cookie的方法步骤
2019/05/09 PHP
键盘控制事件应用教程大全
2006/11/24 Javascript
js每次Title显示不同的名言
2008/09/25 Javascript
JS中Iframe之间传值的方法
2013/03/11 Javascript
javascript打印输出json实例
2013/11/11 Javascript
JavaScript设计模式之策略模式实例
2014/10/10 Javascript
JQuery实现动态添加删除评论的方法
2015/05/18 Javascript
jQuery实现购物车表单自动结算效果实例
2015/08/10 Javascript
jQuery搜索框效果实现代码(百度关键词联想)
2021/02/25 Javascript
JS生成一维码(条形码)功能示例
2017/01/19 Javascript
jQuery实现注册会员时密码强度提示信息功能示例
2017/09/05 jQuery
利用JS如何计算字符串所占字节数示例代码
2017/09/13 Javascript
JS库 Highlightjs 添加代码行号的实现代码
2017/09/13 Javascript
vue 1.x 交互实现仿百度下拉列表示例
2017/10/21 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
antd-mobile ListView长列表的数据更新遇到的坑
2020/04/08 Javascript
python爬虫教程之爬取百度贴吧并下载的示例
2014/03/07 Python
以911新闻为例演示Python实现数据可视化的教程
2015/04/23 Python
浅谈用VSCode写python的正确姿势
2017/12/16 Python
详解通过API管理或定制开发ECS实例
2018/09/30 Python
selenium设置proxy、headers的方法(phantomjs、Chrome、Firefox)
2018/11/29 Python
python-itchat 获取微信群用户信息的实例
2019/02/21 Python
CSS3之transition实现下划线的示例代码
2018/05/30 HTML / CSS
HTML5添加禁止缩放功能
2017/11/03 HTML / CSS
详解HTML5如何使用可选样式表为网站或应用添加黑暗模式
2020/04/07 HTML / CSS
canvas画图被放大且模糊的解决方法
2020/08/11 HTML / CSS
寻找迷宫的一条出路,o通路;X:障碍
2016/07/10 面试题
应届生求职简历的自我评价怎么写
2013/10/23 职场文书
总经理文秘岗位职责
2014/02/03 职场文书
教师节商场活动方案
2014/02/13 职场文书
宿舍保安职务说明书
2014/02/25 职场文书
民事诉讼代理授权委托书
2014/10/11 职场文书
邀请函格式范文
2015/02/02 职场文书