vue组件实现进度条效果


Posted in Javascript onJune 06, 2018

本文实例为大家分享了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">{{label}}</span>
   <span class="vue-progress-bar__tiptext">{{text}}</span>
  </div>
  <div class="vue-progress-bar__outer">
   <div class="vue-progress-bar__inner" :style="barStyle"></div>
  </div>
 </div>
</template>

<script>
 export default {
  props:{
   label:String,
   text:String,
   height:{
    type: Number,
    default: 0,
    required: true,
    validator: val => val >= 0
   },
   color: {
    type: String,
    default: ''
   },
   percentage:{
    type: Number,
    default: 0,
    required: true,
    validator: val => val >= 0 && val <= 100
   }
  },
  computed:{
   barStyle() {
    const style = {};
    style.width = this.percentage + '%';
    style.height = this.height + 'px';
    style.backgroundColor = this.color;
    return style;
   }
  }
 }
</script>

<style lang="scss" scoped>
 .vue-progress-bar.default-theme{
  .vue-progress-bar__outer {
   background: #eee;
  }
 }

 .vue-progress-bar {
  .vue-progress-bar__tiptext {
   float: right;
  }
 }
</style>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jquery 插件 人性化的消息显示
Jan 21 Javascript
js确定对象类型方法
Mar 30 Javascript
AJAX跨域请求json数据的实现方法
Nov 11 Javascript
浅谈JavaScript事件的属性列表
Mar 01 Javascript
JS实现无限级网页折叠菜单(类似树形菜单)效果代码
Sep 17 Javascript
懒加载实现的分页&amp;&amp;网站footer自适应
Dec 21 Javascript
详解Vue项目编译后部署在非网站根目录的解决方案
Apr 26 Javascript
React Native开发封装Toast与加载Loading组件示例
Sep 08 Javascript
微信小程序登录数据解密及状态维持实例详解
May 06 Javascript
解决Vue+Electron下Vuex的Dispatch没有效果问题
May 20 Javascript
微信小程序 如何获取网络状态
Jul 26 Javascript
vue3.0 自适应不同分辨率电脑的操作
Feb 06 Vue.js
Express的HTTP重定向到HTTPS的方法
Jun 06 #Javascript
vue组件实现可搜索下拉框扩展
Oct 23 #Javascript
微信小程序实现美团菜单
Jun 06 #Javascript
详解express + mock让前后台并行开发
Jun 06 #Javascript
vue element项目引入icon图标的方法
Jun 06 #Javascript
vue脚手架搭建过程图解
Jun 06 #Javascript
vue左右侧联动滚动的实现代码
Jun 06 #Javascript
You might like
php实现XSS安全过滤的方法
2015/07/29 PHP
css动画效果之animation的常用样式
2021/03/09 HTML / CSS
基于mootools 1.3框架下的图片滑动效果代码
2011/04/22 Javascript
SinaEditor使用方法详解
2013/12/28 Javascript
javascript自动给文本url地址增加链接的方法分享
2014/01/20 Javascript
JS实现简单的图书馆享元模式实例
2015/06/30 Javascript
基于AngularJS实现页面滚动到底自动加载数据的功能
2015/10/16 Javascript
详解Bootstrap的aria-label和aria-labelledby应用
2016/01/04 Javascript
NodeJs——入门必看攻略
2016/06/27 NodeJs
AngularGauge 属性解析详解
2016/09/06 Javascript
微信小程序 wxapp导航 navigator详解
2016/10/31 Javascript
vue 和vue-touch 实现移动端左右导航效果(仿京东移动站导航)
2017/04/22 Javascript
angular6.0使用教程之父组件通过url传递id给子组件的方法
2018/06/30 Javascript
vue.js实现的经典计算器/科学计算器功能示例
2018/07/11 Javascript
js实现QQ邮箱邮件拖拽删除功能
2020/08/27 Javascript
[15:46]教你分分钟做大人——沙王
2015/03/11 DOTA
详解python之多进程和进程池(Processing库)
2017/06/09 Python
关于Django显示时间你应该知道的一些问题
2017/12/25 Python
python定向爬虫校园论坛帖子信息
2018/07/23 Python
在Python运行时动态查看进程内部信息的方法
2019/02/22 Python
python 画函数曲线示例
2019/12/04 Python
在tensorflow以及keras安装目录查询操作(windows下)
2020/06/19 Python
如何更换python默认编辑器的背景色
2020/08/10 Python
Python requests上传文件实现步骤
2020/09/15 Python
解决pip安装的第三方包在PyCharm无法导入的问题
2020/10/15 Python
Python 实现二叉查找树的示例代码
2020/12/21 Python
美国著名的婴儿学步鞋老品牌:Robeez
2016/08/20 全球购物
小学作文评语大全
2014/04/21 职场文书
妈妈活动方案
2014/08/15 职场文书
财政局党的群众路线教育实践活动剖析材料
2014/10/13 职场文书
施工单位工程部经理岗位职责
2015/04/09 职场文书
给老师的保证书怎么写
2015/05/09 职场文书
南京大屠杀观后感
2015/06/02 职场文书
新娘父亲婚礼致辞
2015/07/27 职场文书
美德少年主要事迹材料
2015/11/04 职场文书
python 中的jieba分词库
2021/11/23 Python