<div class="audio">
<audio id="audio" ref="audio" src="http://www.w3school.com.cn/i/horse.ogg"></audio>
<div class="stopbtn" @click="play" v-if="flag"></div>
<div class="playbtn" @click="paused" v-else></div>
<div class="timebar" ref="timebare" @touchmove="timebarmove($event)" @click="clickbar($event)">
<div class="bar" ref="bar" @touchstart="touchstart($event)">
<span></span>
</div>
<div class="mask" ref="mask"></div>
</div>
<div class="time">{{ currentTime }} / {{ alltime }}</div>
</div>

  

data () {
return {
currentTime: 0,
statu: false,
ox: 0,
left: 0,
alltime: '',
state: false,
flag: true
}
},
mounted () {
var audio = document.getElementById('audio')
audio.addEventListener('canplay', () => {
this.alltime = audio.duration//获取总时长
})
},
methods: {
play () {
this.flag = false
let timer = setInterval(() => {
this.currentTime += 1
if (this.currentTime > this.alltime) {
clearInterval(timer)
this.currentTime = this.alltime
this.flag = true
this.currentTime = 0
}
this.$refs.bar.style.cssText = 'left:' + this.currentTime / this.alltime * 213 + 'px'
this.$refs.mask.style.cssText = 'width:' + this.currentTime / this.alltime * 213 + 'px'
}, 1000)
},
paused () {
this.flag = false
},
touchstart (e) {
this.ox = e.touches[0].pageX - this.left
this.statu = true
},
timebarmove (e) {
if (this.statu) {
this.left = e.touches[0].pageX - Number(this.ox)
if (this.left < 0) {
this.left = 0
}
if (this.left > 213) {
this.left = 213
}
this.$refs.bar.style.cssText = 'left:' + this.currentTime / this.alltime * 213 + 'px'
this.$refs.mask.style.cssText = 'width:' + this.currentTime / this.alltime * 213 + 'px'
}
},
clickbar (e) {
if (!this.statu) {
this.left = e.x - 82
if (this.left < 0) {
this.left = 0
}
if (this.left > 213) {
this.left = 213
}
this.$refs.bar.style.cssText = 'left:' + this.currentTime / this.alltime * 213 + 'px'
this.$refs.mask.style.cssText = 'width:' + this.currentTime / this.alltime * 213 + 'px'
}
},
touchend () {
this.statu = false
}
}

  

自定义滑块Vue组件的更多相关文章

  1. vue学习--自定义全局vue组件

    文档目录: |--components |-loading(组件文件夹) |-loading.vue (loading组件核心) |-index.js //配置导出组件,并且install 主要配置到 ...

  2. Vue组件之自定义表单组件

    今天又看了一遍vue的文档,记得之前学习的时候,官方文档中有提过,v-model指令是一个语法糖,做两件事,一个是给表单控件元素绑定value,第二个是当输入时更新绑定的值,不过后来在"表单 ...

  3. Vue组件绑定自定义事件

    Vue组件使用v-on绑定自定义事件: 可以分为3步理解: 1.在组件模板中按照正常事件机制绑定事件: template: '<button v-on:click="increment ...

  4. vue 基础-->进阶 教程(2): 指令、自定义指令、组件

    第二章 建议学习时间4小时  课程共3章 前面的nodejs教程并没有停止更新,因为node项目需要用vue来实现界面部分,所以先插入一个vue教程,以免不会的同学不能很好的完成项目. 本教程,将从零 ...

  5. vue-gemini-scrollbar(vue组件-自定义滚动条)

    vue-gemini-scrollbar(vue组件-自定义滚动条) https://segmentfault.com/a/1190000013338560

  6. 自定义Vue组件打包、发布到npm以及使用

    本文将帮助:将自己写的Vue组件打包到npm进行代码托管,以及正常发布之后如何使用自己的组件. 本文讲述的仅仅是最基础的实现,其他复杂的操作需要非常熟悉webpack的相关知识,作者将继续学习. 先附 ...

  7. vue组件、自定义指令、路由

    1.vue组件 组件(Component)是 Vue.js 最强大的功能之一.组件可以扩展 HTML 元素,封装可重用的代码.组件系统让我们可以用独立可复用的小组件来构建大型应用,几乎任意类型的应用的 ...

  8. 自定义Vue组件

    自定义Vue组件的三步骤 1.创建组件 2.注册组件 3.使用组件 创建组件 //创建组件 var myclock = { data(){ return { clock: new Date().toL ...

  9. Vue自定义Popup弹窗组件|vue仿ios、微信弹窗|vue右键弹层

    基于vue.js构建的轻量级Vue移动端弹出框组件Vpopup vpopup 汇聚了有赞Vant.京东NutUI等Vue组件库的Msg消息框.Popup弹层.Dialog对话框.Toast弱提示.Ac ...

随机推荐

  1. Python函数的冒泡排序、递归以及装饰器

    函数的冒泡排序: 本质是,让元素换位置,逐个比较最终排序. 例1:实现a1,a2值互换: a1 = 123 a2 = 456 temp = a1 a1 = a2 a2 = temp print(a1) ...

  2. 拓扑排序+数学+DP【洛谷P1685】 游览

    P1685 游览 题目描述 顺利通过了黄药师的考验,下面就可以尽情游览桃花岛了! 你要从桃花岛的西头开始一直玩到东头,然后在东头的码头离开.可是当你游玩了一次后,发现桃花岛的景色实在是非常的美丽!!! ...

  3. spring中使用缓存

    一.启用对缓存的支持 Spring 对缓存的支持最简单的方式就是在方法上添加@Cacheable和@CacheEvict注解, 再添加注解之前,必须先启用spring对注解驱动的支持,基于java的配 ...

  4. ubuntu14.04 搭建samba

        1.安装软件      sudo apt-get remove libwbclient0      sudo apt-get remove samba-common      sudo apt ...

  5. centos yum命令找不到包

    https://blog.csdn.net/joe_le/article/details/80107832 yum  install epel-release  //扩展包更新包 yum  updat ...

  6. Liunx php函数 smtp 发送邮件

    1. 查看防火墙是否开放端口 默认smtp 25 iptables -L -n 如果没有,添加25端口 iptables -A INPUT -p tcp --dport 25 -j ACCEPT ip ...

  7. css属性 盒子模型

    一.    css属性相关 1.宽和高    1.width可以为元素设置宽度 2. height可以为元素设置高度 3.只有块级标签才可以设置宽度和高度,内联标签并不能设置宽度和高度,及时设置了也不 ...

  8. 【Effective Java】阅读

    Java写了很多年,很惭愧,直到最近才读了这本经典之作<Effective Java>,按自己的理解总结下,有些可能还不够深刻 一.Creating and Destroying Obje ...

  9. 技巧:开启ubuntu系统桌面上的右键进入terminal命令行控制台功能

    $ sudo apt-get install nautilus-open-terminal 执行上述命令,重启. 重启命令: $ sudo reboot 注意:需要联网

  10. 对Vue.js的认知

    一.什么是MVVM? MVVM是Model-View-ViewModel的缩写.MVVM是一种设计思想.Model 层代表数据模型,也可以在Model中定义数据修改和操作的业务逻辑:View 代表UI ...