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 相关文章推荐
PJBlog插件 防刷新的在线播放器
Oct 25 Javascript
js不是基础的基础
Dec 24 Javascript
JScript中使用ADODB.Stream判断文件编码的代码
Jun 09 Javascript
jquery入门—访问DOM对象方法
Jan 07 Javascript
在javascript中关于节点内容加强
Apr 11 Javascript
jQuery中has()方法用法实例
Jan 06 Javascript
JS实现获取剪贴板内容的方法
Jun 21 Javascript
Laravel中常见的错误与解决方法小结
Aug 30 Javascript
使用contextMenu插件实现Bootstrap table弹出右键菜单
Feb 20 Javascript
VsCode新建VueJs项目的详细步骤
Sep 23 Javascript
vue自定义指令directive实例详解
Jan 17 Javascript
vscode vue 文件模板的配置方法
Jul 23 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模板函数 正则实现代码
2012/10/15 PHP
Zend Studio去除编辑器的语法警告设置方法
2012/10/24 PHP
JavaScript去除空格的几种方法
2006/10/03 Javascript
利用div+jquery自定义滚动条样式的2种方法
2013/07/18 Javascript
jquery实现按Enter键触发事件示例
2013/09/10 Javascript
最全的Javascript编码规范(推荐)
2016/06/22 Javascript
谈谈因Vue.js引发关于getter和setter的思考
2016/12/02 Javascript
简单的Vue SSR的示例代码
2018/01/12 Javascript
vue自定义全局组件(自定义插件)的用法
2018/01/30 Javascript
nodejs用gulp管理前端文件方法
2018/06/24 NodeJs
Angular中使用ng-zorro图标库部分图标不能正常显示问题
2019/04/22 Javascript
解决ele ui 表格表头太长问题的实现
2019/11/13 Javascript
Layui表格监听行单双击事件讲解
2019/11/14 Javascript
Vue学习之组件用法实例详解
2020/01/06 Javascript
Vue双向数据绑定(MVVM)的原理
2020/10/03 Javascript
python模块之sys模块和序列化模块(实例讲解)
2017/09/13 Python
Python绘制堆叠柱状图的实例
2019/07/09 Python
django创建最简单HTML页面跳转方法
2019/08/16 Python
Django如何使用jwt获取用户信息
2020/04/21 Python
中国跨境电子商务网站:NewFrog
2018/03/10 全球购物
GE设备配件:GE Appliance Parts(家电零件、配件和滤水器)
2018/11/28 全球购物
Notino希腊:购买香水和美容产品
2019/07/25 全球购物
机电一体化专业推荐信
2013/12/03 职场文书
服装机修工岗位职责
2013/12/26 职场文书
个人查摆剖析材料
2014/02/04 职场文书
2015年幼儿园毕业感言
2014/02/12 职场文书
环境保护与污染治理求职信
2014/07/16 职场文书
工作疏忽、懈怠的检讨书
2014/09/11 职场文书
教师四风问题整改措施
2014/09/25 职场文书
金秋助学感谢信
2015/01/21 职场文书
高考学习决心书
2015/02/04 职场文书
2015年社会实践个人总结
2015/03/06 职场文书
行政助理岗位职责范本
2015/04/11 职场文书
圣诞晚会主持词
2015/07/01 职场文书
Matplotlib可视化之添加让统计图变得简单易懂的注释
2021/06/11 Python
使用GO语言实现Mysql数据库CURD的简单示例
2021/08/07 Golang