106 lines
2.3 KiB
Vue
106 lines
2.3 KiB
Vue
<template>
|
|
<div
|
|
class="fullscreen-dialog"
|
|
to="body"
|
|
v-if="hideDestroy ? show || show_ : true"
|
|
v-show="show"
|
|
:class="{ show: show_ }"
|
|
:style="{
|
|
'--transition-time': transitionTime + 'ms'
|
|
}"
|
|
>
|
|
<slot></slot>
|
|
<my-info />
|
|
<Assistant />
|
|
<div class="close-btn" @click="close">
|
|
<svg-icon name="back-white" color="#fff" size="18" />
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup lang="ts">
|
|
import { ref, watch } from 'vue'
|
|
import MyInfo from '@/components/MyInfo.vue'
|
|
import Assistant from '@/components/Assistant/assistant.vue'
|
|
const props = defineProps({
|
|
modelValue: { default: false, type: Boolean },
|
|
transitionTime: { default: 300, type: Number },
|
|
hideDestroy: { default: false, type: Boolean }
|
|
})
|
|
const emit = defineEmits(['close', 'closed'])
|
|
const show = ref(props.modelValue)
|
|
const show_ = ref(props.modelValue)
|
|
const timeout = ref(null)
|
|
watch(
|
|
() => props.modelValue,
|
|
(v) => {
|
|
if (v) {
|
|
show.value = v
|
|
clearTimeout(timeout.value)
|
|
timeout.value = setTimeout(() => (show_.value = v), 10)
|
|
} else {
|
|
show_.value = v
|
|
clearTimeout(timeout.value)
|
|
timeout.value = setTimeout(() => {
|
|
show.value = v
|
|
emit('closed')
|
|
}, props.transitionTime)
|
|
}
|
|
}
|
|
)
|
|
const close = () => {
|
|
emit('close', false)
|
|
}
|
|
</script>
|
|
|
|
<style lang="less" scoped>
|
|
.fullscreen-dialog {
|
|
position: fixed;
|
|
width: 100%;
|
|
height: 100%;
|
|
top: 0;
|
|
left: 0;
|
|
overflow: hidden;
|
|
z-index: 1000;
|
|
transition: opacity var(--transition-time);
|
|
opacity: 0;
|
|
&.show {
|
|
opacity: 1;
|
|
}
|
|
> .my-info {
|
|
position: absolute;
|
|
top: 3rem;
|
|
right: 3rem;
|
|
--my-info-bgColor: #fff;
|
|
}
|
|
> .close-btn {
|
|
cursor: pointer;
|
|
position: absolute;
|
|
top: 3.4rem;
|
|
left: 3rem;
|
|
width: 5.1rem;
|
|
height: 5.1rem;
|
|
border-radius: 50%;
|
|
background-color: #ff7a51;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
}
|
|
.fullscreen-dialog {
|
|
--size: 0.125rem;
|
|
--width: 2rem;
|
|
--color: #bfbfbf;
|
|
background-color: #fffcf4;
|
|
background-image: repeating-radial-gradient(
|
|
circle at 50% 50%,
|
|
var(--color) 0,
|
|
var(--color) var(--size),
|
|
transparent var(--size),
|
|
transparent var(--width)
|
|
);
|
|
background-position: center center;
|
|
background-size: var(--width) var(--width); /* 设置平铺的大小 */
|
|
}
|
|
</style>
|