自学了N久vue,奈何没有练手项目,终于决心拿个东西来试试手。基于对音乐的热爱,选择的第一个demo是音乐播放器。一般播放器都有进度条,于是无意间找到这个插件,就是vue2-loading-bar,这是官方demo

首先是安装(我使用就是脚手架安装):

npm install vue2-loading-bar

当然,你也可以用外链的方式引入。

然后是引入以及使用:

<template>
<div class="footer">
<div class="song-img">
<img src="../assets/img/f1.jpg" alt="">
</div>
<div class="song-play">
<div class="loading">
<!--插件html代码-->
<loading-bar
id="loading-bar-id"
custom-class="custom-class"
:on-error-done="errorDone"
:on-progress-done="progressDone"
:progress="progress"
:direction="direction"
:error="error" >
</loading-bar>
<!--插件html代码-->
</div>
<div class="song fl">
<h3 class="song_name">演员</h3>
<p class="song_author">薛之谦</p>
</div>
<div class="ctrl fr">
<a href="javascript:;" class="play">
<img src="../assets/img/play1.png" alt="">
</a>
<a href="javascript:;" class="next">
<img src="../assets/img/play2.png" alt="">
</a>
<a href="javascript:;" class="list">
<img src="../assets/img/play3.png" alt="">
</a>
</div>
</div>
</div>
</template> <script>
import loadingBar from "vue2-loading-bar" //引入插件
export default {
name: 'footer',
data(){
return {
progress: 0,
error: false,
direction: 'right'
}
},
components:{
loadingBar//注册插件
},
methods:{
progressTo: function (val) {
this.progress = val;
},
errorDone(){
this.error = false
},
progressDone() { }
}
}
</script> <!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang='scss'>
.footer{
height: 49px;
background-color: #fff;
position: fixed;
bottom: 0;
width:100%;
max-width: 750px;
border-top: 1px solid #e6e6e6;
display: flex; .song-img{
width:42px;
height: 42px;
border-radius: 50%;
overflow: hidden;
margin: 4px 0 0 5px;
img{
width:42px;
}
}
.song-play{
flex:1;
padding: 7px 22px 0 15px;
.loading{
width:100%;
height: 3px;
border-radius: 7px;
background-color: #b4b4b4;
}
.song{
height: 39px;
.song_name{
font-size: 12px;
color: #000;
line-height: 17px;
padding-top: 4px;
}
.song_author{
font-size: 10px;
line-height: 15px;
color: #959595;
}
}
.ctrl{
padding-top: 10px;
.play{
img{
width:15px;
}
}
.next{
margin-left: 20px;
img{
width:17px;
}
}
.list{
margin-left: 20px;
img{
width:19px;
}
}
}
}
}
</style>

  不要忘了 还需要引入插件的css样式。

这是我弄出的效果图

vue2-loading-bar 一款基于Vue2的进度条插件的更多相关文章

  1. 基于Jquery的进度条插件(实用)

    Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载    在线演示   Percentage Loader 一款轻量的 jQuery 进 ...

  2. 30款基于 jQuery & CSS3 的加载动画和进度条插件

    我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...

  3. 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例

    Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...

  4. 一款基于jQuery的QQ表情插件

    我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...

  5. 基于jQuery带进度条全屏图片轮播代码

    基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览   源码下载 实现的代码. html代码: <div ...

  6. 一款基于vue2.0的分页组件---写在页面内

    通过 Vue2.0 实现的分页 可自由设置分页显示的多少.上一页.下一页.省略号等,也可直接输入跳转到的页码进行跳转,分页的样式可自由调整 // 1.页面的 head 部分,需要设计好页面的样式 .p ...

  7. 10 款基于 jQuery 的切换效果插件推荐

    本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...

  8. 推荐一款基于 AI 开发的 IDE 插件,帮助提升编码效率

    最近在浏览技术社区的时候,发现了一款神奇 IDE 插件,官网称可以利用 AI 帮助程序员写代码,一下子吸引了我的好奇心.赶紧下载下来使用一番,感觉确实蛮神奇,可以火速提升编程效率. 这款插件叫做 ai ...

  9. 分享9款极具创意的HTML5/CSS3进度条动画

    1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...

随机推荐

  1. ajax 实现三级联动

    ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...

  2. 1715: [Usaco2006 Dec]Wormholes 虫洞

    1715: [Usaco2006 Dec]Wormholes 虫洞 Time Limit: 5 Sec  Memory Limit: 64 MBSubmit: 501  Solved: 278[Sub ...

  3. React 进修之路(2)

    生命周期 React中的组件被看成是一个有生命的个体,因此赋予了声明周期的概念,就是为了定义组件所处的状态 React中组件共分三大周期,11个阶段 创建期(少年,成长)组件创建时候进入的时期 get ...

  4. pageRank算法 python实现

    一.什么是pagerank PageRank的Page可是认为是网页,表示网页排名,也可以认为是Larry Page(google 产品经理),因为他是这个算法的发明者之一,还是google CEO( ...

  5. koa中间件系统原理及koa+orm2实践。

    koa是由 Express 原班人马打造的新的web框架.套用其官方的说法:Koa 应用是一个包含一系列中间件 generator 函数的对象. 这些中间件函数基于 request 请求以一个类似于栈 ...

  6. TextView字体大小及颜色设置

    TextView设置文字大小及颜色: 1.1)通过xml配置 <TextView      android:layout_width="match_parent"     a ...

  7. 用js写倒计时,向列表添加数据-------2017-03-21

    一.单选按钮确定提交是否可用 <input id="a" type="radio" name="a"  onclick="c ...

  8. iOS回顾笔记(07) -- UITableView的使用和性能优化

    iOS回顾笔记(07) -- UITableView的使用和性能优化 如果问iOS中最重要的最常用的UI控件是什么,我觉得UITableView当之无愧!似乎所有常规APP都使用到了UITableVi ...

  9. java学习笔记 --- 面向对象3

    一.创建对象是做了些什么事情? 图解: 二.static关键字 (1)静态的意思.可以修饰成员变量和成员方法. (2)静态的特点: 1.静态是随着类的加载就加载了.也是随着类的消失而消失了. 2.静态 ...

  10. android中在java代码中设置Button按钮的背景颜色

    android中在java代码中设置Button按钮的背景颜色 1.设置背景图片,图片来源于drawable: flightInfoPanel.setBackgroundDrawable(getRes ...