137 lines
3.1 KiB
Vue
137 lines
3.1 KiB
Vue
<template>
|
|
<teleport to="body">
|
|
<div class="dialog-w">
|
|
<span class="dialog-close" @click="CloseDialog"></span>
|
|
<div class="dialog-c">
|
|
<div
|
|
class="dialog-header"
|
|
v-if="localData.title !== undefined && localData.title !== ''">
|
|
<h3>{{ localData.title }}</h3>
|
|
</div>
|
|
<div
|
|
class="dialog-content"
|
|
v-if="localData.content !== undefined && localData.content !== ''">
|
|
{{ localData.content }}
|
|
</div>
|
|
<div class="dialog-footer">
|
|
<template
|
|
v-if="localData.buttons !== undefined && localData.buttons.length > 0"
|
|
v-for="(button, i) in dialogData.buttons">
|
|
<button
|
|
:class="['button-c', 'button-' + button.type]"
|
|
@click="button.function(id, button.data)">
|
|
{{ button.label }}
|
|
</button>
|
|
</template>
|
|
<button
|
|
v-if="localData.showClose"
|
|
class="button-c button-cancel"
|
|
@click="localData.closeFunction">
|
|
{{ localData.closeText }}
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="dialog-shadow" @click="CloseDialog"></div>
|
|
</div>
|
|
</teleport>
|
|
</template>
|
|
<script setup lang="ts">
|
|
import { onBeforeMount, reactive } from 'vue'
|
|
import { useDialogStore } from './dialogStore'
|
|
const dialogStore = useDialogStore()
|
|
|
|
export interface Props {
|
|
id: number
|
|
dialogData: Record<string, any>
|
|
}
|
|
const props = withDefaults(defineProps<Props>(), {})
|
|
const localData = reactive({
|
|
title: '',
|
|
content: '',
|
|
showClose: true,
|
|
closeText: 'Kapat',
|
|
closeFunction: () => {
|
|
CloseDialog()
|
|
},
|
|
buttons: []
|
|
})
|
|
|
|
const CreateData = () => {
|
|
Object.assign(localData, props.dialogData)
|
|
}
|
|
|
|
const CloseDialog = () => {
|
|
delete dialogStore.dialogs[props.id]
|
|
}
|
|
onBeforeMount(() => {
|
|
CreateData()
|
|
})
|
|
</script>
|
|
<style scoped>
|
|
.dialog-w {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
z-index: 9999;
|
|
}
|
|
.dialog-shadow {
|
|
position: absolute;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
z-index: 1;
|
|
}
|
|
.dialog-c {
|
|
display: flex;
|
|
flex-direction: column;
|
|
width: 90%;
|
|
max-width: 480px;
|
|
background-color: #fff;
|
|
border-radius: 8px;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
z-index: 9;
|
|
position: relative;
|
|
padding: 24px;
|
|
}
|
|
.dialog-header {
|
|
margin-bottom: 16px;
|
|
}
|
|
.dialog-content {
|
|
margin-bottom: 16px;
|
|
}
|
|
.dialog-footer {
|
|
display: flex;
|
|
}
|
|
.dialog-close {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
position: absolute;
|
|
top: 24px;
|
|
right: 24px;
|
|
z-index: 9;
|
|
cursor: pointer;
|
|
}
|
|
.dialog-close::before,
|
|
.dialog-close::after {
|
|
content: '';
|
|
flex-direction: block;
|
|
width: 32px;
|
|
height: 2px;
|
|
background-color: #fff;
|
|
position: absolute;
|
|
transform: rotate(45deg);
|
|
}
|
|
.dialog-close::after {
|
|
transform: rotate(-45deg);
|
|
}
|
|
</style>
|