fix: 23970 （v1.1.0全景看看）我的素材-音频，音频删除后，播放下一个音频，音频的内容不应是删除掉的那个音频内容

src/components/audio/index.vue

@@ -7,7 +7,7 @@
       <div :id="idleft" class="left"></div>
       <div :id="idright" class="right"></div>
       <div class="circle"></div>
-      <i class="iconfont iconbs_stop" :class="{ iconbs_play: myPlayTemp }"></i>
+      <i class="iconfont iconbs_stop" :class="{ iconbs_play: notPlaying }"></i>
     </div>
     <div v-if="showTime" class="namecon">
       <div class="audio-name">{{name}}</div>
@@ -29,17 +29,21 @@ export default {
   data() {
     return {
       audio: "",
-      myPlayTemp: true,
+      notPlaying: true,
       progress: 0,
     };
   },
   mounted() {
     this.init();
-    this.$bus.on('toggleAudio',data=>{
-      if (this.$refs[`_${data}`]) {
-          this.$refs[`_${data}`].click()
+    this.$bus.on('pausedAudio',data=>{
+      if (this.audio == data) {
+        this.notPlaying = true;
       }
     })
+    // 因为本组件是放到table组件的slot里的，table组件各个slot又是用v-for从数组渲染出来的，所以数组里删除某一项并不会导致本组件被销毁，只会导致props变化，此时要重新初始化组件。
+    this.$bus.on('deletedAudio', () => {
+      this.init()
+    })
   },
   methods: {
     loadCircle() {
@@ -64,17 +68,17 @@ export default {
       }
     },
     init() {
-      this.audio = this.$refs.audio;
-      this.audio.load();
-      this.audio.pause();
-      this.updateProgress();
-      this.$bus.on('pausedAudio',data=>{
-        if (this.audio == data) {
-          this.myPlayTemp = true;
+      this.$nextTick(() => { // props的变化并不会立刻反映到html element的attribute上
+        if (this.$refs.audio) {
+          this.audio = this.$refs.audio;
+          this.audio.load();
+          this.audio.pause();
+          this.updateProgress();
+          this.notPlaying = true;
         }
       })
     },
-    stopAllAudio(){
+    stopOtherAudio() {
       Array.from($("audio")).forEach((item) => {
         if (this.audio != item) {
           if (!item.paused) {
@@ -86,15 +90,15 @@ export default {
     },
     // 点击播放/暂停图片时，控制音乐的播放与暂停
     myPlay() {
-      this.stopAllAudio()
+      this.stopOtherAudio()
       setTimeout(() => {
         if (this.audio.paused) {
           // 开始播放当前点击的音频
           this.audio.play();
-          this.myPlayTemp = false;
+          this.notPlaying = false;
         } else {
           this.audio.pause();
-          this.myPlayTemp = true;
+          this.notPlaying = true;
         }
         this.updateProgress();
       });
@@ -123,7 +127,7 @@ export default {
     // 播放结束时
     audioEnded() {
       this.progress = 0;
-      this.myPlayTemp = true;
+      this.notPlaying = true;
       this.$emit('audioEnded')
       this.loadCircle();
     },

src/views/material/audio/index.vue

@@ -255,6 +255,7 @@ export default {
                   if (this.list.length === data.data.total) {
                     this.hasMoreData = false
                   }
+                  this.$bus.emit('deletedAudio') // 各个Audio组件需要重新初始化
                 } else {
                   console.error('在素材列表里没找到要删除的那一项！');
                 }