refactor: use teleport for dialog instead of high z-index (#168)
This commit is contained in:
parent
74e48ad99e
commit
7cfbbb8813
3
app.vue
3
app.vue
@ -19,6 +19,9 @@ isDark.value
|
||||
<NuxtLayout>
|
||||
<NuxtPage />
|
||||
</NuxtLayout>
|
||||
<TeleportTarget
|
||||
id="teleport-end"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<style>
|
||||
|
@ -96,29 +96,31 @@ function onTransitionEnd() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div
|
||||
v-if="isVisible"
|
||||
class="scrollbar-hide"
|
||||
fixed top-0 bottom-0 left-0 right-0 z-20000 overscroll-none overflow-y-scroll
|
||||
:class="modelValue ? '' : 'pointer-events-none'"
|
||||
>
|
||||
<!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
|
||||
<!-- corresponding to issue: #106, so please don't remove it. -->
|
||||
<SafeTeleport to="#teleport-end">
|
||||
<div
|
||||
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
|
||||
h="[calc(100%+0.5px)]"
|
||||
:class="isOut ? 'opacity-0' : 'opacity-85'"
|
||||
@click="close"
|
||||
/>
|
||||
<div
|
||||
ref="target"
|
||||
bg-base border-base absolute transition-all duration-200 ease-out transform
|
||||
:class="`${positionClass} ${transformClass}`"
|
||||
@transitionend="onTransitionEnd"
|
||||
v-if="isVisible"
|
||||
class="scrollbar-hide"
|
||||
fixed top-0 bottom-0 left-0 right-0 z-10 overscroll-none overflow-y-scroll
|
||||
:class="modelValue ? '' : 'pointer-events-none'"
|
||||
>
|
||||
<slot />
|
||||
<!-- The style `scrollbar-hide overscroll-none overflow-y-scroll` and `h="[calc(100%+0.5px)]"` is used to implement scroll locking, -->
|
||||
<!-- corresponding to issue: #106, so please don't remove it. -->
|
||||
<div
|
||||
bg-base bottom-0 left-0 right-0 top-0 absolute transition-opacity duration-500 ease-out
|
||||
h="[calc(100%+0.5px)]"
|
||||
:class="isOut ? 'opacity-0' : 'opacity-85'"
|
||||
@click="close"
|
||||
/>
|
||||
<div
|
||||
ref="target"
|
||||
bg-base border-base absolute transition-all duration-200 ease-out transform
|
||||
:class="`${positionClass} ${transformClass}`"
|
||||
@transitionend="onTransitionEnd"
|
||||
>
|
||||
<slot />
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</SafeTeleport>
|
||||
</template>
|
||||
|
||||
<style socped>
|
||||
|
@ -65,7 +65,8 @@
|
||||
"ufo": "^1.0.0",
|
||||
"unplugin-auto-import": "^0.12.0",
|
||||
"vite-plugin-inspect": "^0.7.9",
|
||||
"vitest": "^0.25.3"
|
||||
"vitest": "^0.25.3",
|
||||
"vue-safe-teleport": "^0.1.1"
|
||||
},
|
||||
"dependencies": {
|
||||
"vue-virtual-scroller": "2.0.0-beta.3"
|
||||
|
6
plugins/vue-safe-teleport.ts
Normal file
6
plugins/vue-safe-teleport.ts
Normal file
@ -0,0 +1,6 @@
|
||||
import VueSafeTeleport from 'vue-safe-teleport'
|
||||
import { defineNuxtPlugin } from '#app'
|
||||
|
||||
export default defineNuxtPlugin((nuxtApp) => {
|
||||
nuxtApp.vueApp.use(VueSafeTeleport)
|
||||
})
|
@ -51,6 +51,7 @@ specifiers:
|
||||
unplugin-auto-import: ^0.12.0
|
||||
vite-plugin-inspect: ^0.7.9
|
||||
vitest: ^0.25.3
|
||||
vue-safe-teleport: ^0.1.1
|
||||
vue-virtual-scroller: 2.0.0-beta.3
|
||||
|
||||
dependencies:
|
||||
@ -107,6 +108,7 @@ devDependencies:
|
||||
unplugin-auto-import: 0.12.0
|
||||
vite-plugin-inspect: 0.7.9
|
||||
vitest: 0.25.3
|
||||
vue-safe-teleport: 0.1.1
|
||||
|
||||
packages:
|
||||
|
||||
@ -7883,6 +7885,12 @@ packages:
|
||||
vue: 3.2.45
|
||||
dev: true
|
||||
|
||||
/vue-safe-teleport/0.1.1:
|
||||
resolution: {integrity: sha512-fHA4mod2oF7am2yEUtT0CsxAwfNBt6hWuYTVWzGxrY8vzxxgHMFnPjdZTKl01qGcKEMYYO38LmWizL7oGMVPGw==}
|
||||
peerDependencies:
|
||||
vue: ^3.2.0
|
||||
dev: true
|
||||
|
||||
/vue-virtual-scroller/2.0.0-beta.3:
|
||||
resolution: {integrity: sha512-k0hTAkZRmm3TXpfhW5Ig1fd8VV7+CmgnkebbQ4Uw6wnuQF52YJoaMQTFD3IV/Qi2WNadDB4ETrLUbVdnWboSjg==}
|
||||
peerDependencies:
|
||||
|
Loading…
Reference in New Issue
Block a user