55 lines
1.1 KiB
Vue
55 lines
1.1 KiB
Vue
<template>
|
|
<component :is="lang !== 'ko' || v.audio ? 'span' : TTS" ref="stts">
|
|
<span
|
|
v-for="(seg, i) in v[lang].split('**')"
|
|
:key="i"
|
|
:class="i % 2 === 0 ? '' : spoiler ? 'spoiler' : $style.em"
|
|
>
|
|
{{ seg }}
|
|
</span>
|
|
<AudioButton v-if="lang === 'ko' && v.audio" :src="v.audio" ref="saud" />
|
|
</component>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { useTemplateRef } from "vue";
|
|
import TTS from "./TTS.vue";
|
|
import AudioButton from "./AudioButton.vue";
|
|
|
|
export interface IVoc {
|
|
ko: string;
|
|
audio?: string;
|
|
en: string;
|
|
usages?: IVoc[];
|
|
notes?: string;
|
|
examples?: IVoc[];
|
|
}
|
|
|
|
defineProps<{
|
|
v: IVoc;
|
|
lang: "ko" | "en";
|
|
spoiler?: boolean;
|
|
}>();
|
|
|
|
defineExpose({
|
|
playAudio,
|
|
});
|
|
|
|
const stts = useTemplateRef<HTMLSpanElement | InstanceType<typeof TTS>>("stts");
|
|
const saud = useTemplateRef<InstanceType<typeof AudioButton>>("saud");
|
|
|
|
async function playAudio() {
|
|
if (saud.value) {
|
|
await saud.value.playAudio();
|
|
} else if (stts.value && "playAudio" in stts.value) {
|
|
await stts.value.playAudio();
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style module>
|
|
.em {
|
|
font-style: italic;
|
|
}
|
|
</style>
|