vue 聊天室，多个语音点击播放时显示波纹

Question

页面如下：

现在功能已经做出来了，还差点击波纹的时候出现波纹动画（类似微信那样），由于波纹动画用代码写不出来，我叫ui提供了一个gif图片

/chatPlay.png是静态图片，点击后如何变成动态的/chatPlay.gif呢？我知道用v-if 可这些语音都是遍历出来的，我怎么控制点击的语音出现波纹动画，其他的语音不出现呢？

<div
  @click="play(item.url)"
  class="desc"
  style="width:60px;cursor:pointer">
  <img src="../../assets/img/newsManage/chatPlay.png" v-if="???">
  <img src="../../assets/img/newsManage/chatPlay.gif" v-if="???">
</div>
<span
  style="margin:12px 0 0 6px;color:#666">
  {{item.length}}''
</span>

Answer 1

可以在遍历数组中的item多增加一个属性。例如 isPlaying，初始值为 false，点击播放设为 true，播放完成后为 false。

<div
  @click="play(item.url)"
  class="desc"
  style="width:60px;cursor:pointer">
  <img src="../../assets/img/newsManage/chatPlay.png" v-show="!isPlaying">
  <img src="../../assets/img/newsManage/chatPlay.gif" v-show="isPlaying">
</div>
<span
  style="margin:12px 0 0 6px;color:#666">
  {{item.length}}''
</span>

这里使用 v-show 会对性能和体验更好一些。

Answer 2

你这个语音的dom元素应该是遍历出来的吧，点击事件 传参点击的下标 push 到 data中的一个数组变量中，对点击的图片进行操作，然后在语音播放完成函数中对该数组进行操作还原图片就可以了

Answer 3

数组用map 给item增加一个属性例如imgstatus:false 点击事件传参 index 然后arr[index].imgstatus=ture;
img展示用v-if="item.imgstatus" 展示点击语音的gif v-else加到默认图片上