h5学习笔记：vuejs 编写进度条

最近要练习一下vuejs，vuejs可以编写一些组件。在之前一直没有尝试，今天尝试以下vuejs组件式的开发也是非常不错。下面记录一下进度条。

使用Vue 编写一个全局组件。参考官方的以下的文档

https://cn.vuejs.org/v2/guide/components.html

最初的出发点是想传递一个数据去，并展示一条进度条。所以在构建全局组件的时候，传递三个参数。定义三个属性值。rest所剩的数量，总数total，barwidth为样式长度。

效果图如下

组件样式设计

进度条需要一个底部色，进度条采取了橙色设计。css的布局使用相对布局的方式来实现左右布局。和颜色条的展示。为了展示进度条，进度条绑定了一下width的长度。

Vue.component('progressbar', {template: `<div class="progressContainer">        <div class="progressItem" v-bind:style="{width:barwidth+'%'}"></div><div class="progressLabel"><span class="left">剩余:{{rest}}</span><span class="right">总数:{{total}}</span></div>              </div> `,props: ['total',"rest","barwidth"],data: function() {
                 return  { }}})

定义组件后，组件可以一对标签方式来使用。

 <progressbar></progressbar> // 自定义进度条

总的代码以下

<html><head><meta charset="utf-8"/><script type="text/javascript" src="https://cdn.bootcss.com/vue/2.5.13/vue.min.js"></script></head><style type="text/css">.progressContainer{position: relative;height: 6px;width: 100%;background-color: #666666;border-radius: 2px;}.progressItem{position: absolute;height: 6px;width: 30%;background-color: orange;border-radius: 2px;}.progressLabel{position: relative;top: 6px;display: block;width: 100%;color: #999999;}.progressLabel .left{position: absolute;left: 0px;} .progressLabel .right{position: absolute;right:0px;} .btn-area{margin-top: 30px;}</style><body><div id="app"><progressbar :rest="rest" :total="total" :barwidth="barwidth"></progressbar><div class="btn-area"><button v-on:click="onBuy">购买</button></div></div><Script type="text/javascript">Vue.component('progressbar', {template: `<div class="progressContainer">        <div class="progressItem" v-bind:style="{width:barwidth+'%'}"></div><div class="progressLabel"><span class="left">剩余:{{rest}}</span><span class="right">总数:{{total}}</span></div>              </div> `,props: ['total',"rest","barwidth"],data: function() {return  { }}})new Vue({el : "#app",data:{total:100,rest:50,barwidth:10},methods:{onBuy:function(){this.rest+=1;if(this.rest >=100) this.rest = 100;this.barwidth = Math.round(this.rest/this.total*100);}}})</Script></body>
</html>

h5学习笔记：vuejs 编写进度条相关推荐

Android学习笔记之progressBar(进度条)
一.说明 <1>在某项延续性工作的进展过程中为了不让用户觉得程序死掉了,需要有个活动的进度条,表示此过程正在进行中. <2>在某些操作的进度中的可视指示器,为用户呈现操作的进度 ...
python学习笔记之编写readConfig读写配置文件
python学习笔记之编写readConfig读写配置文件_weixin_34055910的博客-CSDN博客
《暗时间》读书笔记--第二章进度条，第三章有效记忆和学习
第二章进度条要点: 进度条的例子过早的退出专注和持之以恒饿死在甘草间的驴子我的总结: 开篇作者讲了一个进度条的例子,我们的生活中充满着各种各样的进度条,工作的之前我们要做工作计划,要指定T ...
千里之行始于足下，Python编写进度条
众所周知,学习是需要动力的,学习一门编程语言也一样,在学习的过程中编写一些好玩的代码是很有利于促进学习的,那么今天我们来看看,如何用Python,编写一个进度条小程序人狠话不多好!话不多说,我们直 ...
h5实现手机端等级进度条
h5实现等级进度条需求如下: 实现一个动画进度条,页面一打开实现一个进度条动画,因为App这个页面会经常改,所以没有使用原审Android或者IOS来实现,希望通过H5来做: 服务器端返回如下数据: ...
自己定义View学习之12/7(进度条之混合模式)
今天重点内容是我们学习自己定义view里面的混合模式.事实上我们的画布就跟photoshop一样.是个图层关系,一层盖着一层.这样就导致有非常多种覆盖模式,这就是我们今天的主题."混合模式& ...
H5 可堆叠的圆环进度条，支持任意数量子进度条
by Conmajia SN: S22-W1M 由来看到一篇帖子<vue实用组件--圆环百分比进度条>,让我想起了很多年前我在WinForm下仿制过的Chrome进度条. ▲ 原版进度条 ...
【Python笔记】pyqt5进度条-多线程图像分块处理防止窗体卡顿
目录主要功能环境配置实现过程 1.设计ui 主界面弹出框窗体文件 2.主体实现打开文件计算函数代码附录 title.ui titleok.ui title.py titleok.py ...
h5学习笔记：rem单位在一些安卓机计算异常
1.项目描述一款App+h5进行混合开发,App通过webview方式对h5进行远程加载.h5采用了vuejs进行开发,适配采用了px2rem插件方式进行批量转换. 2.项目异常现象混合开发增加了 ...