57 lines
1.9 KiB
TypeScript
57 lines
1.9 KiB
TypeScript
|
import { computed, defineComponent, ref, Transition } from 'vue'
|
||
|
|
import { OhVueIcon, addIcons } from 'oh-vue-icons'
|
||
|
|
import { MdClose, MdOpeninfull, MdClosefullscreen } from 'oh-vue-icons/icons'
|
||
|
|
import useTomatoStore from '../useTomatoStore'
|
||
|
|
addIcons(MdClose, MdOpeninfull, MdClosefullscreen)
|
||
|
|
|
||
|
|
export default defineComponent(
|
||
|
|
(props, ctx) => {
|
||
|
|
const show = ref(false)
|
||
|
|
const store = useTomatoStore()
|
||
|
|
return () => (
|
||
|
|
<div class="fixed left-0 top-0 z-[60] w-full">
|
||
|
|
{/* 背景遮罩 */}
|
||
|
|
<Transition>
|
||
|
|
{props.show && (
|
||
|
|
<div class="w-full h-screen bg-black/20 backdrop-blur" onClick={() => {}}></div>
|
||
|
|
)}
|
||
|
|
</Transition>
|
||
|
|
{/* 弹框主体 */}
|
||
|
|
<Transition name="modal">
|
||
|
|
{show.value && (
|
||
|
|
<div
|
||
|
|
class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 overflow-hidden transition-all"
|
||
|
|
style={{
|
||
|
|
width: '984px',
|
||
|
|
height: '580px',
|
||
|
|
borderRadius: '1rem'
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
{/* 关闭按钮 */}
|
||
|
|
<div
|
||
|
|
class={
|
||
|
|
'w-[16px] h-[16px] group flex justify-center items-center rounded-full overflow-hidden absolute bg-red-500/70 hover:bg-red-500 transition-all cursor-pointer z-30 top-4 right-6 '
|
||
|
|
}
|
||
|
|
onClick={() => {
|
||
|
|
store.isOpenEditModal = ''
|
||
|
|
}}
|
||
|
|
>
|
||
|
|
<div class={' items-center justify-center hidden group-hover:flex'}>
|
||
|
|
<OhVueIcon name="md-close" scale={0.6} fill="white" />
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
|
||
|
|
<div class="w-full h-full flex justify-center items-center">
|
||
|
|
<Transition>{ctx.slots.default?.()}</Transition>
|
||
|
|
</div>
|
||
|
|
</div>
|
||
|
|
)}
|
||
|
|
</Transition>
|
||
|
|
</div>
|
||
|
|
)
|
||
|
|
},
|
||
|
|
{
|
||
|
|
props: ['show']
|
||
|
|
}
|
||
|
|
)
|