123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160 |
- <template>
- <Overlay
- ref="overlayDomInstanceRef"
- :visible="props.visible"
- :useMask="props.useMask"
- :maskColor="props.overlayColor"
- :isFullScreen="props.isFullScreen"
- @onOverlayClick="onOverlayClick"
- >
- <div
- v-if="isDrawerShow"
- ref="drawerDomRef"
- :class="{
- 'drawer': true,
- 'origin-bottom': props.popDirection === 'bottom',
- 'origin-right': props.popDirection === 'right',
- 'slide-bottom': visible && props.popDirection === 'bottom',
- 'slide-right': visible && props.popDirection === 'right',
- }"
- :style="{
- minHeight: styles.minHeight,
- maxHeight: styles.maxHeight,
- borderRadius: styles.borderRadius,
- boxShadow: styles.boxShadow,
- width: styles.width,
- }"
- >
- <div class="drawer-container">
- <slot />
- </div>
- </div>
- </Overlay>
- </template>
- <script setup lang="ts">
- import { ref, watch } from '../../../adapter-vue';
- import Overlay from '../../common/Overlay/index.vue';
- interface IProps {
- visible: boolean;
- popDirection: 'top' | 'right' | 'bottom' | 'left';
- useMask?: boolean;
- isFullScreen?: boolean | undefined;
- overlayColor?: string | undefined;
- drawerStyle?: {
- bottom?: Record<string, any> | undefined;
- right?: Record<string, any> | undefined;
- left?: Record<string, any> | undefined;
- top?: Record<string, any> | undefined;
- };
- }
- interface IEmits {
- (e: 'onOverlayClick', event: Event): void;
- }
- const emits = defineEmits<IEmits>();
- const props = withDefaults(defineProps<IProps>(), {
- visible: true,
- useMask: true,
- isFullScreen: true,
- popDirection: 'bottom',
- drawerStyle: () => ({}),
- });
- const drawerDomRef = ref<HTMLElement>();
- const overlayDomInstanceRef = ref<InstanceType<typeof Overlay>>();
- const isDrawerShow = ref<boolean>(false);
- const styles = ref(props.drawerStyle[props.popDirection] || {});
- watch(() => props.visible, (visible: boolean) => {
- if (visible) {
- isDrawerShow.value = true;
- } else {
- setTimeout(() => {
- isDrawerShow.value = false;
- }, 150);
- }
- }, {
- immediate: true,
- });
- function onOverlayClick(e: Event) {
- emits('onOverlayClick', e);
- }
- defineExpose({
- drawerDomRef,
- overlayDomRef: overlayDomInstanceRef.value?.overlayDomRef,
- });
- </script>
- <style scoped lang="scss">
- :not(not) {
- display: flex;
- flex-direction: column;
- box-sizing: border-box;
- min-width: 0;
- }
- .drawer {
- position: absolute;
- z-index: 1;
- background-color: #fff;
- overflow: hidden;
- transition: transform 0.15s ease-out;
- .drawer-container {
- background-color: #fff;
- height: 100%;
- width: 100%;
- }
- }
- .origin-bottom {
- bottom: 0;
- left: 0;
- right: 0;
- transform: translateY(100%);
- animation: slide-from-bottom 0.15s ease-out;
- }
- .origin-right {
- top: 0;
- bottom: 0;
- right: 0;
- transform: translateX(100%);
- animation: slide-from-right 0.15s ease-out;
- }
- .slide-bottom {
- transform: translateY(0);
- }
- .slide-right {
- transform: translateX(0);
- }
- @keyframes slide-from-bottom {
- 0% {
- transform: translateY(100%);
- }
- 100% {
- transform: translateY(0);
- }
- }
- @keyframes slide-from-right {
- 0% {
- transform: translateX(100%);
- }
- 100% {
- transform: translateX(0);
- }
- }
- </style>
|