页面:
<div class="right"> <audio :ref="'audio' + index" :src="item.audioUrl" @ended="haveEnded"/> <div :class="{ active: playIndex == index}" class="audio-component" @click="toReadAudio(index)" /> </div>
js代码
toReadAudio (index) { let length = this.weekDetail.wordsRepeats.length || 0 // this.weekDetail.wordsRepeats是总共有几条音频数据 if (length) { for (let i = 0; i < length; i++) { let audioOne = 'audio' + i audioOne = this.$refs[audioOne][0] if (i === index) { if (audioOne.paused) { // 切换播放中的css样式 this.playIndex = index audioOne.load()//音频重新加载,重新播放 audioOne.play() } else { audioOne.pause() this.playIndex = null } } else { audioOne.pause() } } } }