YangZhouDaYunHeDaDu/src/components/MsgContent.vue

<template>
  <div
    class="msg-content"
    @click="() => {
      if (_curIndex < list.length - 1) {
        _curIndex += 1
      } else {
        _curIndex = 0
        emits('end')
      }
    }"
  >
    <div
      class="msg-content__inner"
      v-html="curMsg"
    />
    <img
      style="width: 100%"
      src="@/assets/images/Group-420.png"
    >
    <img
      v-if="_curIndex < list.length - 1"
      class="msg-content__more"
      src="@/assets/images/tbn_nex.png"
    >
  </div>
</template>

<script setup>
import { computed, onBeforeUnmount, watch } from 'vue'

const props = defineProps(['list', 'curIndex'])
const emits = defineEmits(['update:cur-index', 'end'])

const _curIndex = computed({
  get() {
    return props.curIndex
  },
  set(v) {
    emits('update:cur-index', v)
  }
})
const curMsg = computed(() => {
  const item = props.list[_curIndex.value]
  return typeof item === 'string' ? item : item.inner
})

let audio = null

const removeAudio = () => {
  audio?.pause()
  audio = null
}

onBeforeUnmount(() => {
  removeAudio()
})

watch(curMsg, () => {
  const item = props.list[_curIndex.value]
  audio?.pause()
  if (typeof item === 'object') {
    audio = new Audio(require(`@/assets/audios/${props.list[_curIndex.value].audio}`))
    audio.volume = 0.7
    audio.play()
  }
}, {
  immediate: true
})
</script>

<style lang="less" scoped>
  .msg-content {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    cursor: pointer;
    font-size: 0;
    z-index: 3;

    &__inner {
      display: flex;
      flex-direction: column;
      justify-content: center;
      position: absolute;
      top: 0;
      left: 21vw;
      right: 10vw;
      bottom: 0;
      color: #FFF1BE;
      font-size: 22px;
      letter-spacing: 4px;
      line-height: 37px;
      font-family: Source Han Serif CN, Source Han Serif CN;
      text-indent: 2em;
    }
    img:first-child {
      width: 100%;
    }
    &__more {
      position: absolute;
      right: 36px;
      bottom: 23px;
    }
  }
</style>