fix: use modal scrollock on body
This commit is contained in:
parent
aa6e573745
commit
754d0cd8e9
|
@ -9,7 +9,6 @@
|
||||||
{ 'has-overflow': overflow },
|
{ 'has-overflow': overflow },
|
||||||
variant,
|
variant,
|
||||||
]"
|
]"
|
||||||
ref="modal"
|
|
||||||
v-bind="$attrs"
|
v-bind="$attrs"
|
||||||
>
|
>
|
||||||
<div
|
<div
|
||||||
|
@ -70,7 +69,7 @@ export default {
|
||||||
</script>
|
</script>
|
||||||
|
|
||||||
<script lang="ts" setup>
|
<script lang="ts" setup>
|
||||||
import {ref, watchEffect} from 'vue'
|
import {watchEffect} from 'vue'
|
||||||
import {useScrollLock} from '@vueuse/core'
|
import {useScrollLock} from '@vueuse/core'
|
||||||
|
|
||||||
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
import CustomTransition from '@/components/misc/CustomTransition.vue'
|
||||||
|
@ -90,8 +89,7 @@ const props = withDefaults(defineProps<{
|
||||||
|
|
||||||
const emit = defineEmits(['close', 'submit'])
|
const emit = defineEmits(['close', 'submit'])
|
||||||
|
|
||||||
const modal = ref<HTMLElement | null>(null)
|
const scrollLock = useScrollLock(document.body)
|
||||||
const scrollLock = useScrollLock(modal)
|
|
||||||
|
|
||||||
watchEffect(() => {
|
watchEffect(() => {
|
||||||
scrollLock.value = props.enabled
|
scrollLock.value = props.enabled
|
||||||
|
|
Reference in New Issue