wd-overlay.vue 926 B

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647
  1. <template>
  2. <wd-transition
  3. :show="show"
  4. name="fade"
  5. custom-class="wd-overlay"
  6. :duration="duration"
  7. :custom-style="`z-index: ${zIndex}; ${customStyle}`"
  8. :disable-touch-move="lockScroll"
  9. @click="handleClick"
  10. >
  11. <slot></slot>
  12. </wd-transition>
  13. </template>
  14. <script lang="ts">
  15. export default {
  16. name: 'wd-overlay',
  17. options: {
  18. virtualHost: true,
  19. addGlobalClass: true,
  20. styleIsolation: 'shared'
  21. }
  22. }
  23. </script>
  24. <script lang="ts" setup>
  25. import wdTransition from '../wd-transition/wd-transition.vue'
  26. import { overlayProps } from './types'
  27. // #ifdef H5
  28. import { useLockScroll } from '../composables/useLockScroll'
  29. // #endif
  30. const props = defineProps(overlayProps)
  31. const emit = defineEmits(['click'])
  32. function handleClick() {
  33. emit('click')
  34. }
  35. // #ifdef H5
  36. useLockScroll(() => props.show && props.lockScroll)
  37. // #endif
  38. </script>
  39. <style lang="scss">
  40. @import './index.scss';
  41. </style>