update

src/pages/test.vue

@@ -14,6 +14,11 @@
       </div>
     </ul>
   </div>
+  <div v-if="audios.length>0" style="position: relative;z-index: 101;">
+    <audio v-for="(audio, k) in audios" v-if="audio.isShow" :key="k" @ended="audioEnd(k)">
+      <source :src="audio.url" />
+    </audio>
+  </div>
 </div>
 </template>
 
@@ -22,25 +27,31 @@ export default {
   data () {
     return {
       users: [],
+      audios: [],
+      diffM: 5000,
       newinfo: {
         firstName: '',
         classId: '1',
-        words: '欢迎光临'
+        words: '欢迎光临',
+        url: 'aa'
       },
       vipAinfo: {
         firstName: '张先生',
         classId: '2',
-        words: '您好'
+        words: '您好',
+        url: 'bb'
       },
       vipBinfo: {
         firstName: '王女士',
         classId: '2',
-        words: '您好~'
+        words: '您好~',
+        url: 'cc'
       },
       vipCinfo: {
         firstName: '许女士',
         classId: '2',
-        words: 'hello'
+        words: 'hello',
+        url: 'dd'
       }
     }
   },
@@ -59,16 +70,29 @@ export default {
           this.users.splice(0, 1)
         }
         this.users = [...this.users, {...info, createdata: Date.parse(new Date())}]
+        this.audios = [...this.audios, {...info, isShow: true, createdata: Date.parse(new Date())}]
       }
+    },
+    audioEnd (index) {
+      let as = this.audios
+      this.audios = as.map((x, i) => {
+        if (i === index) {
+          x.isShow = false
+        }
+      })
     }
   },
   created () {
     const _that = this
     window.setInterval(() => {
-      let dels = _that.users.filter(x => Date.parse(new Date()) - x.createdata > 5000)
+      let dels = _that.users.filter(x => Date.parse(new Date()) - x.createdata > this.diffM)
       dels.map(x => {
         _that.users.splice(this.users.findIndex(i => i.createdata === x.createdata), 1)
       })
+      let delaudios = _that.audios.filter(x => Date.parse(new Date()) - x.createdata > this.diffM)
+      delaudios.map(x => {
+        _that.audios.splice(this.audios.findIndex(i => i.createdata === x.createdata), 1)
+      })
     }, 100)
   }
 }