|
@@ -1,77 +0,0 @@
|
|
|
-<template>
|
|
|
- <div>
|
|
|
- <div v-if="modelValue" class="dialog-wrap" :style="{ width: width ? width : '780px', height: height ? height : '590px' }">
|
|
|
- <!-- <div class="overlay" @click="closeDialog"></div>-->
|
|
|
- <div class="dialog" :style="{ width: width ? width : '780px', height: height ? height : '590px' }">
|
|
|
- <div class="dialog-header">
|
|
|
- <div class="dialog-title">{{ title }}</div>
|
|
|
- <div class="icon-close" @click="closeDialog">
|
|
|
- <el-icon size="40px"><Close /></el-icon>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- <div class="dialog-content">
|
|
|
- <slot />
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
- </div>
|
|
|
-
|
|
|
-</template>
|
|
|
-
|
|
|
-<script lang="ts" setup>
|
|
|
-interface Props {
|
|
|
- modelValue: boolean;
|
|
|
- title?: string;
|
|
|
- width?: string;
|
|
|
- height?: string;
|
|
|
-}
|
|
|
-const props = withDefaults(defineProps<Props>(), {
|
|
|
- modelValue: false
|
|
|
-});
|
|
|
-const emit = defineEmits(['update:modelValue', 'close']);
|
|
|
-
|
|
|
-// 关闭弹窗
|
|
|
-const closeDialog = () => {
|
|
|
- emit('update:modelValue', false);
|
|
|
- emit('close');
|
|
|
-};
|
|
|
-</script>
|
|
|
-
|
|
|
-<style lang="scss" scoped>
|
|
|
-.dialog-wrap {
|
|
|
- position: fixed;
|
|
|
- top: 50%;
|
|
|
- left: 50%;
|
|
|
- transform: translate(-50%, -50%);
|
|
|
- z-index: 2000;
|
|
|
- display: flex;
|
|
|
- align-items: center;
|
|
|
- justify-content: center;
|
|
|
- font-size: 16px;
|
|
|
- .dialog {
|
|
|
- height: 590px;
|
|
|
- margin: 0 auto;
|
|
|
- background-color: #fff;
|
|
|
- border-radius: 10px;
|
|
|
- }
|
|
|
-}
|
|
|
-.dialog {
|
|
|
- padding: 0 20px;
|
|
|
- .dialog-header {
|
|
|
- width: 100%;
|
|
|
- height: 70px;
|
|
|
- display: flex;
|
|
|
- justify-content: space-between;
|
|
|
- align-items: center;
|
|
|
- .dialog-title {
|
|
|
- font-size: 36px;
|
|
|
- }
|
|
|
- .icon-close {
|
|
|
- cursor: pointer;
|
|
|
- }
|
|
|
- }
|
|
|
- .dialog-content {
|
|
|
- padding: 10px 0;
|
|
|
- }
|
|
|
-}
|
|
|
-</style>
|