最开始bug还没解决时的效果图

bug解决后的效果图

项目场景：

想自己做一个基于vue仿网易云音乐的音乐网站，在制作播放器的时候用到了element ui里面的slider组件，制作完成后发现使用change的方法无法达到我需要的效果，上网查询发现没有好的方案，后面自己琢磨后发现解决方案

问题描述：

在进度条制作完成以后，发现可以通过点击定位到进度条相应的位置，但是在用鼠标拖拽进度条时有时候会失败（在拖拽时间超过1s时），达不到那种可以通过点击跳转到指定区域的功能，并且在鼠标滑动时，进度条依旧在变化。

template：

<audio :src="musicUrl" autoplay class="playMusicAudio" ref="audio" @canplay="getDuration" @timeupdate="durationUpdate"></audio><!-- 播放进度条 --><span style="position: absolute;right: 72%;bottom: 14%;">{{this.musicDuration | timeFormat}}</span><div id="playSlider"><el-slider v-model="musicDuration" :max="musicAllDuration" :show-tooltip="false" @change="changeMusicDuration"></el-slider></div><span style="position: absolute;left: 72%;bottom: 14%;">{{this.musicAllDuration | timeFormat}}</span>

data：

data() {return {// 判断当前是否在播放isPlaying: false,//判断播放顺序模式playOrd: 0,//歌曲总时长musicAllDuration: 0,// 歌曲当前时长musicDuration: 0,}},

methods：

//获得播放歌曲总时长getDuration() {this.musicAllDuration = this.$refs.audio.duration},//更新当前时长durationUpdate() {this.musicDuration = this.$refs.audio.currentTime},//鼠标拖拽松开时changeMusicDuration() {if (this.musicAllDuration === 0) returnthis.$refs.audio.currentTime = this.musicDuration},

原因分析：

由于我设置当前时长是随着audio的更新而赋值达到实时更新的，而element的slider的change方法是在鼠标松开后才会触发，这就会导致在拉动的时候鼠标还没松开达到赋值给当前时长前，audio的timeupdata方法就再次触发了，这时再松开鼠标，change方法里面赋予的值就不是鼠标拖拽到的指定进度，而是audio的timeupdate方法赋值给当前时长的进度值。

解决方案：

在鼠标按下时把audio的timeupdate方法禁止掉，在松开的时候再触发，但是没有方法能在一个事件里面禁止掉另一个事件，所以添加一个判断是否在拖拽状态的属性，来达到鼠标按下时timeupdate禁止掉的功能。

附上代码：

template：

<audio :src="musicUrl" autoplay class="playMusicAudio" ref="audio" @canplay="getDuration" @timeupdate="durationUpdate"></audio><!-- 播放进度条 --><span style="position: absolute;right: 72%;bottom: 14%;">{{this.musicDuration | timeFormat}}</span><div id="playSlider"><el-slider v-model="musicDuration" :max="musicAllDuration" :show-tooltip="false" @change="changeMusicDuration" @mousedown.native="isChange = true" @mouseup.native="isChange = false"></el-slider></div><span style="position: absolute;left: 72%;bottom: 14%;">{{this.musicAllDuration | timeFormat}}</span>

data：

data() {return {// 判断当前是否在播放isPlaying: false,//判断播放顺序模式playOrd: 0,//歌曲总时长musicAllDuration: 0,// 歌曲当前时长musicDuration: 0,//判断是否被拖动isChange: false}},

methods：

//获得播放歌曲总时长getDuration() {this.musicAllDuration = this.$refs.audio.duration},//更新当前时长durationUpdate() {if (this.isChange === true) returnthis.musicDuration = this.$refs.audio.currentTime},//鼠标拖拽松开时changeMusicDuration() {if (this.musicAllDuration === 0) returnthis.$refs.audio.currentTime = this.musicDurationthis.isChange = false},

附上播放器组件的代码（不完整，播放器还没有制作完成，后续会修改播放条样式和歌曲封面等细节）：

<template><div class="musicPlay"><audio :src="musicUrl" autoplay class="playMusicAudio" ref="audio" @canplay="getDuration" @timeupdate="durationUpdate"></audio><div id="audioFunc"><!-- 播放顺序 --><div @click="changeOrd"><el-tooltip class="item" effect="light" content="顺序播放" placement="top" :open-delay="500"><div id="playOrd" v-show="playOrd === 0"><i class="iconfont icon-liebiaoshunxu" style="font-size: 18px;"></i></div></el-tooltip><el-tooltip class="item" effect="light" content="列表循环" placement="top" :open-delay="500"><div id="playOrd" v-show="playOrd === 1"><i class="iconfont icon-liebiaoxunhuan" style="font-size: 18px;"></i></div></el-tooltip><el-tooltip class="item" effect="light" content="单曲循环" placement="top" :open-delay="500"><div id="playOrd" v-show="playOrd === 2"><i class="iconfont icon-danquxunhuan" style="font-size: 18px;"></i></div></el-tooltip><el-tooltip class="item" effect="light" content="随机播放" placement="top" :open-delay="500"><div id="playOrd" v-show="playOrd === 3"><i class="iconfont icon-suijibofang" style="font-size: 18px;"></i></div></el-tooltip></div><!-- 上一首歌曲 --><div id="backSong"><i class="iconfont icon-shangyishou" style="font-size: 18px;"></i></div><!-- 播放与暂停 --><div><div id="pause" v-show="isPlaying" @click="pauseSong"><i class="iconfont icon-zanting" style="font-size: 18px;"></i></div><div id="play" v-show="!isPlaying" @click="playSong"><i class="iconfont icon-bofang" style="font-size: 30px;"></i></div></div><!-- 下一首歌曲 --><div id="nextSong"><i class="iconfont icon-xiayishou" style="font-size: 18px;"></i></div><!-- 歌词 --><div id="album"><span style="font-size: 15px;">词</span></div></div><!-- 播放进度条 --><span style="position: absolute;right: 72%;bottom: 14%;">{{this.musicDuration | timeFormat}}</span><div id="playSlider"><el-slider v-model="musicDuration" :max="musicAllDuration" :show-tooltip="false" @change="changeMusicDuration" @mousedown.native="isChange = true" @mouseup.native="isChange = false"></el-slider></div><span style="position: absolute;left: 72%;bottom: 14%;">{{this.musicAllDuration | timeFormat}}</span></div></template><script>export default {name: 'musicPlay',props: {musicUrl: String},components: {},data() {return {// 判断当前是否在播放isPlaying: false,//判断播放顺序模式playOrd: 0,//歌曲总时长musicAllDuration: 0,// 歌曲当前时长musicDuration: 0,//判断是否被拖动isChange: false}},methods: {// 播放音乐playSong() {if (!this.musicUrl) {const h = this.$createElement;this.$message.error({message: h('p', null, [h('span', null, '列表中没有可播放的歌曲'),h('i', {style: 'color: red'}, '')]),offset: 280,center: true,showClose: true});return}this.isPlaying = truethis.$refs.audio.play()},// 暂停音乐pauseSong() {this.isPlaying = falsethis.$refs.audio.pause()},//变化播放模式changeOrd() {if (this.playOrd === 3) return this.playOrd = 0this.playOrd++},//获得播放歌曲总时长getDuration() {this.musicAllDuration = this.$refs.audio.duration},//更新当前时长durationUpdate() {if (this.isChange === true) returnthis.musicDuration = this.$refs.audio.currentTime},//鼠标拖拽松开时changeMusicDuration() {if (this.musicAllDuration === 0) returnthis.$refs.audio.currentTime = this.musicDurationthis.isChange = false},},}</script><style scoped>/* 音乐播放栏 */.musicPlay {position: fixed;box-shadow: 0 0 1px 1px #b9b5b5;bottom: 0;width: 100%;height: 90px;background: #f6f6f8;}/* 音乐操作 */#play,#pause {cursor: pointer;background: #ebebed;border-radius: 100%;/* width: 40px; */height: 40px;line-height: 40px;text-align: center;}#play:hover,#pause:hover {background: #ddddde;}#playOrd,#backSong,#nextSong {cursor: pointer;border-radius: 100%;height: 40px;line-height: 40px;text-align: center;}#playOrd:hover,#backSong:hover,#nextSong:hover,#album:hover {color: #ed6566;}#album {cursor: pointer;border-radius: 100%;height: 40px;line-height: 36px;text-align: center;}#audioFunc {display: grid;width: 280px;grid-template-columns: repeat(5, 1fr);column-gap: 20px;margin-top: 1%;margin-left: 50%;transform: translateX(-50%);}/* 播放条样式 */#playSlider {width: 43%;margin-top: -5px;margin-left: 50%;transform: translateX(-50%);}</style>

musicUrl是由父组件传过来的值，歌曲详情还没有制作，此篇文章主要是解决此bug，后续可能会陆续更新项目中遇到的各种bug和项目实战教程。