fuse-code/src/components/subtitle/index.vue

<template>
  <div
    :style="{
      visibility: show ? 'visible' : 'hidden',
    }"
    class="subtitle"
    ref="dom"
  >
    <div :style="{ background: data.background }" v-html="data.content" />
  </div>
</template>

<script lang="ts" setup>
import { AnimationModelSubtitle } from "@/api";
import { Pos, Size } from "../drawing/dec";
import { ref, watch, watchEffect } from "vue";

const props = defineProps<{
  data: AnimationModelSubtitle;
  pixel: Pos;
  show: boolean;
  sizeChang: (csize: Size) => void;
}>();

// watchEffect(() => {

//   if (!dom.value) return;
//   dom.value.style.transform = `translate(${props.pixel.x}px, ${props.pixel.y}px)`;
// });
const dom = ref<HTMLDivElement>();
watch(
  () => props.data.content,
  () => {
    watch(
      dom,
      (dom, _, onCleanup) => {
        if (!dom) return;
        const timeout = setTimeout(() => {
          props.sizeChang({ width: dom.offsetWidth, height: dom.offsetHeight });
        });
        onCleanup(() => clearTimeout(timeout));
      },
      { immediate: true }
    );
  }
);
</script>

<style lang="scss" scoped>
.subtitle {
  position: absolute;
  z-index: 1;
  transition: transform 0.3s linear;
  will-change: transform;
  left: 0;
  top: 0;
  text-shadow: 0px 2px 4px rgba(0, 0, 0, 0.25);
  pointer-events: none;

  > div {
    max-width: 280px;
    border-radius: 4px;
    font-size: 14px;
    padding: 10px 20px;
    color: #ffffff;
    line-height: 16px;
    word-break: break-all;
  }
}
</style>