video-maker/frontend/src/components/Dialog.vue

<script setup lang="ts">
import { computed } from "vue";
import { useI18n } from "vue-i18n";

const { t } = useI18n();
const showDialog = computed(() => props.dialog);

const props = defineProps({
  msg: {
    type: String,
    default: "",
  },
  dialog: {
    type: Boolean,
    default: false,
  },
  state: {
    type: String,
  },
  icon: {
    type: String,
    default: "info"
  },
  qrcode: {
    type: Boolean,
    default: false,
  }
});

const emit = defineEmits(["close"]);

function close() {
  emit("close", false);
}
</script>
<template>
  <v-dialog
    :value="showDialog"
    v-model="showDialog"
    width="400"
    @click:outside="close()"
  >
    <v-card>
      <v-card-text>
        <section class="d-flex flex-column align-center">
          <v-icon style="font-size: 70px" :icon="icon" :color="state" />
          <!-- <p class="mt-3">{{ msg }}</p> -->
          <p  v-html="msg" class="mt-3 text-center"></p>
        </section>
      </v-card-text>
      <v-card-actions class="d-flex justify-space-evenly">
        <v-btn @click="close()" v-show="!qrcode || (state === 'error' && qrcode)">{{ t("close") }}</v-btn>
        <router-link v-show="(state === 'success' || state === 'error') && qrcode" to="/main/dashboard">返回使用者頁面</router-link>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>