53 lines
1.3 KiB
Vue
53 lines
1.3 KiB
Vue
<template>
|
|
<div
|
|
v-if="props.error !== undefined"
|
|
:class='[
|
|
"fixed","inset-0", "flex", "z-50", "wrap-break-word",
|
|
"items-center", "justify-center", "text-center",
|
|
"bg-black/50",
|
|
]'
|
|
>
|
|
<div :class='[
|
|
"bg-white", "text-black",
|
|
"dark:bg-neutral-600", "dark:text-white",
|
|
"shadow-lg", "w-80",
|
|
"p-6", "gap-2", "rounded-lg",
|
|
"flex", "flex-col",
|
|
]'>
|
|
<span class="text-lg font-semibold">問題が発生しました</span>
|
|
<SmallText v-html='
|
|
props.error
|
|
? (props.error instanceof Error
|
|
? props.error.message
|
|
: String(props.error).replaceAll(/\n/g, "<br>")
|
|
) : "不明なエラー"
|
|
'/>
|
|
|
|
<Button
|
|
@click="reload"
|
|
:disabled="isReloading"
|
|
class="m-auto"
|
|
>
|
|
<span v-if="isReloading">再読み込み中...</span>
|
|
<span v-else>再読み込み</span>
|
|
</Button>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script lang="ts" setup>
|
|
import Button from "@/components/Button.vue";
|
|
import SmallText from "@/components/SmallText.vue";
|
|
import { ref } from "vue";
|
|
|
|
const props = defineProps<{
|
|
error?: any;
|
|
}>();
|
|
|
|
const isReloading = ref<boolean>(false);
|
|
|
|
const reload = () => {
|
|
isReloading.value = true;
|
|
window.location.reload();
|
|
}
|
|
</script> |