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 相关文章推荐
解密效果
Jun 23 Javascript
Date对象格式化函数代码
Jul 17 Javascript
自己写了一个展开和收起的多更能型的js效果
Mar 05 Javascript
JS+css 图片自动缩放自适应大小
Aug 08 Javascript
js中AppendChild与insertBefore的用法详细解析
Dec 16 Javascript
javascript模拟枚举的简单实例
Mar 06 Javascript
jquery实现先淡出再折叠收起的动画效果
Aug 07 Javascript
原生js三级联动的简单实现代码
Jun 07 Javascript
记React connect的几种写法(小结)
Sep 18 Javascript
js实现随机数小游戏
Jun 28 Javascript
如何在微信小程序中使用骨架屏的步骤
Jun 12 Javascript
JavaScript arguments.callee作用及替换方案详解
Sep 02 Javascript
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全局变量和类配合使用深刻理解
2013/06/05 PHP
php实现的click captcha点击验证码类实例
2014/09/23 PHP
php准确获取文件MIME类型的方法
2015/06/17 PHP
Yii框架弹出框功能示例
2017/01/07 PHP
JavaScript 弹出窗体点击按钮返回选择数据的实现
2010/04/01 Javascript
JS链式调用的实现方法
2013/03/07 Javascript
jquery定时滑出可最小化的底部提示层特效代码
2013/10/02 Javascript
深入理解javascript中return的作用
2013/12/30 Javascript
jQuery中die()方法用法实例
2015/01/19 Javascript
jQuery创建自定义的选择器用以选择高度大于100的超链接实例
2015/03/18 Javascript
jQuery实现鼠标选文字发新浪微博的方法
2016/04/02 Javascript
只要1K 纯JS脚本送你一朵3D红色玫瑰
2016/08/09 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
2017/02/20 Javascript
ECMAScript6--解构
2017/03/30 Javascript
JavaScript实现实时更新系统时间的实例代码
2017/04/04 Javascript
微信小程序使用wxParse解析html的实现示例
2018/08/30 Javascript
vue中使用element ui的弹窗与echarts之间的问题详解
2019/10/25 Javascript
vue项目强制清除页面缓存的例子
2019/11/06 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
2019/12/15 Javascript
jquery将信息遍历到界面上实例代码
2020/01/21 jQuery
vue操作dom元素的3种方法示例
2020/09/20 Javascript
python文件写入实例分析
2015/04/08 Python
python3如何将docx转换成pdf文件
2018/03/23 Python
Python 互换字典的键值对实例
2019/02/12 Python
Centos7 下安装最新的python3.8
2019/10/28 Python
python读取ini配置的类封装代码实例
2020/01/08 Python
python递归函数求n的阶乘,优缺点及递归次数设置方式
2020/04/02 Python
python制作一个简单的gui 数据库查询界面
2020/11/19 Python
Python WebSocket长连接心跳与短连接的示例
2020/11/24 Python
CSS3实现淘宝留白的方法
2020/06/05 HTML / CSS
ONLY瑞典官网:世界知名服装品牌
2018/06/19 全球购物
武汉瑞得软件笔试题
2015/10/27 面试题
总务岗位职责
2013/11/19 职场文书
学生思想表现的评语
2014/01/30 职场文书
电台实习生求职信
2014/02/25 职场文书
Spring中bean的生命周期之getSingleton方法
2021/06/30 Java/Android