vue2-loading-bar 一款基于Vue2的进度条插件
自学了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的进度条插件的更多相关文章
- 基于Jquery的进度条插件(实用)
Spin.js 最喜欢这款插件了,动画图片的长度.粗细.速度和角度都可以灵活控制,想要做成什么样都可以. 源码下载 在线演示 Percentage Loader 一款轻量的 jQuery 进 ...
- 30款基于 jQuery & CSS3 的加载动画和进度条插件
我们所生活每一天看到的新技术或新设计潮流的兴起,Web 开发正处在上升的时代.HTML5 & CSS3 技术的发展让 Web 端可以实现的功能越来越强大. 加载动画和进度条使网站更具吸引力.该 ...
- 一款基于Bootstrap的js分页插件bootstrap-paginator使用实例
Bootstrap Paginator是一款基于Bootstrap的js分页插件,功能很丰富.它提供了一系列的参数用来支持用户的定制,提供了公共的方法可随时获得插件状态的改变,以及事件来监听用户的动作 ...
- 一款基于jQuery的QQ表情插件
我们在QQ聊天或者发表评论.微博时,会有一个允许加入表情的功能,点击表情按钮,会弹出一系列表情小图片,选中某个表情图片即可发表的丰富的含表情的内容.今天和大家分享一款基于jQuery的QQ表情插件,您 ...
- 基于jQuery带进度条全屏图片轮播代码
基于jQuery带进度条全屏图片轮播代码.这是一款基于jQuery实现的oppo手机官网首页带进度条全屏图片轮播特效.效果图如下: 在线预览 源码下载 实现的代码. html代码: <div ...
- 一款基于vue2.0的分页组件---写在页面内
通过 Vue2.0 实现的分页 可自由设置分页显示的多少.上一页.下一页.省略号等,也可直接输入跳转到的页码进行跳转,分页的样式可自由调整 // 1.页面的 head 部分,需要设计好页面的样式 .p ...
- 10 款基于 jQuery 的切换效果插件推荐
本文整理了 10 款非常好用的 jQuery 切换效果插件,包括平滑切换和重叠动画等,这些插件可以实现不同元素之间的动态切换. 1. InnerFade 这是一个基于 jQuery 的小插件,可以实现 ...
- 推荐一款基于 AI 开发的 IDE 插件,帮助提升编码效率
最近在浏览技术社区的时候,发现了一款神奇 IDE 插件,官网称可以利用 AI 帮助程序员写代码,一下子吸引了我的好奇心.赶紧下载下来使用一番,感觉确实蛮神奇,可以火速提升编程效率. 这款插件叫做 ai ...
- 分享9款极具创意的HTML5/CSS3进度条动画
1.HTML5/CSS3图片加载进度条 可切换多主题 今天要分享的这款HTML5/CSS3进度条模拟了真实的图片加载场景,插件会默认去从服务器下载几张比较大的图片,然后让该进度条展现当前读取图片的进度 ...
随机推荐
- ajax 实现三级联动
ajax 实现三级联动,相当于写了一个小插件,用的时候直接拿过来用就可以了,这里我用了数据库中的chinastates表, 数据库内容很多,三级联动里的地区名称都在里面,采用的是代号副代号的方式 比如 ...
- 1715: [Usaco2006 Dec]Wormholes 虫洞
1715: [Usaco2006 Dec]Wormholes 虫洞 Time Limit: 5 Sec Memory Limit: 64 MBSubmit: 501 Solved: 278[Sub ...
- React 进修之路(2)
生命周期 React中的组件被看成是一个有生命的个体,因此赋予了声明周期的概念,就是为了定义组件所处的状态 React中组件共分三大周期,11个阶段 创建期(少年,成长)组件创建时候进入的时期 get ...
- pageRank算法 python实现
一.什么是pagerank PageRank的Page可是认为是网页,表示网页排名,也可以认为是Larry Page(google 产品经理),因为他是这个算法的发明者之一,还是google CEO( ...
- koa中间件系统原理及koa+orm2实践。
koa是由 Express 原班人马打造的新的web框架.套用其官方的说法:Koa 应用是一个包含一系列中间件 generator 函数的对象. 这些中间件函数基于 request 请求以一个类似于栈 ...
- TextView字体大小及颜色设置
TextView设置文字大小及颜色: 1.1)通过xml配置 <TextView android:layout_width="match_parent" a ...
- 用js写倒计时,向列表添加数据-------2017-03-21
一.单选按钮确定提交是否可用 <input id="a" type="radio" name="a" onclick="c ...
- iOS回顾笔记(07) -- UITableView的使用和性能优化
iOS回顾笔记(07) -- UITableView的使用和性能优化 如果问iOS中最重要的最常用的UI控件是什么,我觉得UITableView当之无愧!似乎所有常规APP都使用到了UITableVi ...
- java学习笔记 --- 面向对象3
一.创建对象是做了些什么事情? 图解: 二.static关键字 (1)静态的意思.可以修饰成员变量和成员方法. (2)静态的特点: 1.静态是随着类的加载就加载了.也是随着类的消失而消失了. 2.静态 ...
- android中在java代码中设置Button按钮的背景颜色
android中在java代码中设置Button按钮的背景颜色 1.设置背景图片,图片来源于drawable: flightInfoPanel.setBackgroundDrawable(getRes ...