145 lines
3.3 KiB
Vue
145 lines
3.3 KiB
Vue
<template>
|
|
<view
|
|
v-if="visible"
|
|
class="app-dialog-layer"
|
|
@click="closeOnMask && cancel()"
|
|
>
|
|
<view
|
|
ref="dialogRef"
|
|
class="app-dialog"
|
|
role="dialog"
|
|
aria-modal="true"
|
|
:aria-label="title"
|
|
tabindex="-1"
|
|
@click.stop
|
|
@keydown.esc.stop="cancel"
|
|
>
|
|
<scroll-view class="app-dialog__content" scroll-y>
|
|
<text v-if="eyebrow" class="app-dialog__eyebrow">{{ eyebrow }}</text>
|
|
<text class="app-dialog__title">{{ title }}</text>
|
|
<text v-if="message" class="app-dialog__message">{{ message }}</text>
|
|
<slot />
|
|
<view
|
|
class="app-dialog__actions"
|
|
:class="{ 'app-dialog__actions--single': !showCancel }"
|
|
>
|
|
<AppButton
|
|
v-if="showCancel"
|
|
type="secondary"
|
|
:label="cancelText"
|
|
@click="cancel"
|
|
/>
|
|
<AppButton :label="confirmText" @click="$emit('confirm')" />
|
|
</view>
|
|
</scroll-view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { nextTick, ref, watch } from "vue";
|
|
import AppButton from "@/components/AppButton.vue";
|
|
|
|
const props = defineProps({
|
|
visible: { type: Boolean, default: false },
|
|
eyebrow: { type: String, default: "" },
|
|
title: { type: String, required: true },
|
|
message: { type: String, default: "" },
|
|
confirmText: { type: String, default: "我知道了" },
|
|
cancelText: { type: String, default: "取消" },
|
|
showCancel: { type: Boolean, default: false },
|
|
closeOnMask: { type: Boolean, default: true },
|
|
});
|
|
const emit = defineEmits(["confirm", "cancel", "close"]);
|
|
const dialogRef = ref(null);
|
|
let previousFocus = null;
|
|
|
|
watch(
|
|
() => props.visible,
|
|
async (visible) => {
|
|
if (typeof document === "undefined") return;
|
|
if (visible) {
|
|
previousFocus = document.activeElement;
|
|
await nextTick();
|
|
dialogRef.value?.focus?.();
|
|
return;
|
|
}
|
|
previousFocus?.focus?.();
|
|
previousFocus = null;
|
|
},
|
|
);
|
|
const cancel = () => {
|
|
emit("cancel");
|
|
emit("close");
|
|
};
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.app-dialog-layer {
|
|
position: fixed;
|
|
z-index: 80;
|
|
inset: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
box-sizing: border-box;
|
|
padding: 40rpx;
|
|
background: rgba(35, 18, 10, 0.62);
|
|
}
|
|
.app-dialog {
|
|
width: 650rpx;
|
|
max-width: 100%;
|
|
min-height: 520rpx;
|
|
background: url("/static/assets/modules/auth/transparent/a01-scroll-dialog-v3.png")
|
|
center / contain no-repeat;
|
|
}
|
|
.app-dialog__content {
|
|
z-index: 1;
|
|
display: flex;
|
|
min-height: 520rpx;
|
|
max-height: calc(100vh - 80rpx);
|
|
flex-direction: column;
|
|
align-items: center;
|
|
box-sizing: border-box;
|
|
padding: 74rpx 66rpx 54rpx;
|
|
text-align: center;
|
|
overflow-y: auto;
|
|
}
|
|
.app-dialog__eyebrow {
|
|
color: #9f170f;
|
|
font-size: 22rpx;
|
|
font-weight: 700;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
.app-dialog__title {
|
|
color: #8f160f;
|
|
font-size: 42rpx;
|
|
font-weight: 700;
|
|
letter-spacing: 4rpx;
|
|
}
|
|
.app-dialog__eyebrow + .app-dialog__title {
|
|
margin-top: 10rpx;
|
|
}
|
|
.app-dialog__message {
|
|
margin-top: 22rpx;
|
|
color: #513a28;
|
|
font-size: 27rpx;
|
|
line-height: 1.65;
|
|
}
|
|
.app-dialog__actions {
|
|
display: grid;
|
|
width: 100%;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 16rpx;
|
|
margin-top: auto;
|
|
}
|
|
.app-dialog__actions--single {
|
|
display: flex;
|
|
justify-content: center;
|
|
}
|
|
.app-dialog__actions .app-button {
|
|
width: 100%;
|
|
min-height: 82rpx;
|
|
}
|
|
</style>
|