From 04cfb444ffe14029c9b0cb84f720f955c495c63f Mon Sep 17 00:00:00 2001 From: nowisfuture Date: Tue, 2 Nov 2021 20:55:50 +0800 Subject: [PATCH 1/2] =?UTF-8?q?fix(drawer):=20=E4=BF=AE=E6=94=B9=E7=82=B9?= =?UTF-8?q?=E5=87=BB=E6=8A=BD=E5=B1=89=E6=9D=BF=E5=86=85=E5=AE=B9=E5=8C=BA?= =?UTF-8?q?=E4=B9=9F=E5=8F=AF=E4=BB=A5=E5=85=B3=E9=97=AD=E7=9A=84=E9=97=AE?= =?UTF-8?q?=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../drawer/src/components/drawer-body.scss | 43 ++++++++++ .../drawer/src/components/drawer-body.tsx | 54 ++++++++++++ .../drawer/src/components/drawer-header.tsx | 14 ++-- .../devui-vue/devui/drawer/src/drawer.scss | 42 ---------- .../devui-vue/devui/drawer/src/drawer.tsx | 82 +++++++++---------- .../devui-vue/docs/components/drawer/index.md | 14 ++-- 6 files changed, 153 insertions(+), 96 deletions(-) create mode 100644 packages/devui-vue/devui/drawer/src/components/drawer-body.scss create mode 100644 packages/devui-vue/devui/drawer/src/components/drawer-body.tsx diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-body.scss b/packages/devui-vue/devui/drawer/src/components/drawer-body.scss new file mode 100644 index 00000000..707fae38 --- /dev/null +++ b/packages/devui-vue/devui/drawer/src/components/drawer-body.scss @@ -0,0 +1,43 @@ +@import '../../../style/devui.scss'; + +.devui-drawer { + position: fixed; + top: 0; + left: 0; + height: 100vh; +} + +.devui-overlay-wrapper { + display: flex; + justify-content: center; + align-items: center; + position: absolute; + top: 0; + bottom: 0; + width: 100vw; +} + +.devui-overlay-backdrop { + position: absolute; + top: 0; + left: 0; + background: $devui-shadow; + width: 100vw; + height: 100vh; +} + +.devui-drawer-nav { + position: absolute; + top: 0; + bottom: 0; + border-radius: $devui-border-radius; + background: $devui-base-bg; +} + +.devui-drawer-content { + border-radius: $devui-border-radius; + overflow: auto; + box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow; + padding: 20px; + height: 100vh; +} \ No newline at end of file diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx b/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx new file mode 100644 index 00000000..c1d26988 --- /dev/null +++ b/packages/devui-vue/devui/drawer/src/components/drawer-body.tsx @@ -0,0 +1,54 @@ +import { defineComponent, inject, computed, toRefs, onUnmounted } from 'vue' + +import './drawer-body.scss' + +export default defineComponent({ + name: 'DrawerBody', + props: { + isFullScreen: { + type: Boolean, + defualt: false, + }, + }, + setup(props, { slots }) { + let { isFullScreen } = toRefs(props) + const closeDrawer: any = inject('closeDrawer') + const zindex: number = inject('zindex') + const isCover: boolean = inject('isCover') + const position: any = inject('position') + const width: any = inject('width') + + const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : { 'left': 0 }) + const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value) + + let clickContent = (e) => { + e.stopPropagation() + } + + return { + closeDrawer, + zindex, + slots, + isCover, + navRight, + navWidth, + clickContent, + } + }, + + render() { + const { zindex, closeDrawer, slots, isCover, navRight, navWidth } = this + return ( +
+ {isCover ?
: null} +
+
+
+ {slots.default ? slots.default() : null} +
+
+
+
+ ) + } +}) \ No newline at end of file diff --git a/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx b/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx index 6866744b..8ff606f4 100644 --- a/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx +++ b/packages/devui-vue/devui/drawer/src/components/drawer-header.tsx @@ -1,5 +1,5 @@ import { defineComponent, ref } from 'vue' -import { drawerHeaderType, DrawerHeaderType } from './drawer-header-type'; +import { drawerHeaderType, DrawerHeaderType } from './drawer-header-type' import './drawer-header.scss' @@ -8,15 +8,15 @@ export default defineComponent({ props: drawerHeaderType, emits: ['toggleFullScreen', 'close'], setup(props: DrawerHeaderType, ctx) { - const isFullScreen = ref(false); + const isFullScreen = ref(false) - const handleFullScreen = (e) => { - e.stopPropagation(); - isFullScreen.value = !isFullScreen.value; - ctx.emit('toggleFullScreen'); + let handleFullScreen = (e) => { + e.stopPropagation() + isFullScreen.value = !isFullScreen.value + ctx.emit('toggleFullScreen') } - const handleDrawerClose = () => { + let handleDrawerClose = () => { ctx.emit('close') } diff --git a/packages/devui-vue/devui/drawer/src/drawer.scss b/packages/devui-vue/devui/drawer/src/drawer.scss index 43b2615c..8b137891 100644 --- a/packages/devui-vue/devui/drawer/src/drawer.scss +++ b/packages/devui-vue/devui/drawer/src/drawer.scss @@ -1,43 +1 @@ -@import '../../style/devui.scss'; -.devui-drawer { - position: fixed; - top: 0; - left: 0; - height: 100vh; -} - -.devui-overlay-wrapper { - display: flex; - justify-content: center; - align-items: center; - position: absolute; - top: 0; - bottom: 0; - width: 100vw; -} - -.devui-overlay-backdrop { - position: absolute; - top: 0; - left: 0; - background: $devui-shadow; - width: 100vw; - height: 100vh; -} - -.devui-drawer-nav { - position: absolute; - top: 0; - bottom: 0; - border-radius: $devui-border-radius; - background: $devui-base-bg; -} - -.devui-drawer-content { - border-radius: $devui-border-radius; - overflow: auto; - box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow; - padding: 20px; - height: 100vh; -} diff --git a/packages/devui-vue/devui/drawer/src/drawer.tsx b/packages/devui-vue/devui/drawer/src/drawer.tsx index c4af5fb4..c8050df9 100644 --- a/packages/devui-vue/devui/drawer/src/drawer.tsx +++ b/packages/devui-vue/devui/drawer/src/drawer.tsx @@ -1,81 +1,79 @@ -import { defineComponent, ref, toRefs, watch, computed } from 'vue' +import { defineComponent, ref, toRefs, watch, onUnmounted, Teleport, provide } from 'vue' import { drawerProps, DrawerProps } from './drawer-types' import DrawerHeader from './components/drawer-header' import DrawerContainer from './components/drawer-container' - -import './drawer.scss' +import DrawerBody from './components/drawer-body' export default defineComponent({ name: 'DDrawer', props: drawerProps, emits: ['close', 'update:visible', 'afterOpened'], setup(props: DrawerProps, { emit, slots }) { - const { width, visible, zIndex, isCover, escKeyCloseable, position } = toRefs(props); // 宽度 - const isFullScreen = ref(false); - - const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value ); - const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : {'left' : 0} ); + const { width, visible, zIndex, isCover, escKeyCloseable, position } = toRefs(props) // 宽度 + const isFullScreen = ref(false) - const fullScreenEvent = () => { - isFullScreen.value = !isFullScreen.value; + let fullScreenEvent = () => { + isFullScreen.value = !isFullScreen.value } - const closeDrawer = () => { - emit('update:visible', false); - emit('close'); + let closeDrawer = () => { + emit('update:visible', false) + emit('close') } - const escCloseDrawer = (e) => { + let escCloseDrawer = (e) => { if (e.code === 'Escape') { - emit('update:visible', false); + closeDrawer() } } watch(visible, (val) => { if (val) { - emit('afterOpened'); + emit('afterOpened') + isFullScreen.value = false } if (escKeyCloseable && val) { - document.addEventListener('keyup', escCloseDrawer); + document.addEventListener('keyup', escCloseDrawer) } else { - document.removeEventListener('keyup', escCloseDrawer); + document.removeEventListener('keyup', escCloseDrawer) } - }) + }) + + provide('closeDrawer', closeDrawer) + provide('zindex', zIndex) + provide('isCover', isCover) + provide('position', position) + provide('width', width) + + onUnmounted(() => { + document.removeEventListener('keyup', escCloseDrawer) + }) + + console.log(fullScreenEvent) + return { - zIndex, isFullScreen, - navWidth, visible, slots, - isCover, - navRight, fullScreenEvent, - closeDrawer, - }; + closeDrawer, + } }, render() { - const zindex: number = this.zIndex; - const fullScreenEvent: any = this.fullScreenEvent; - const closeDrawer: any = this.closeDrawer; - const isCover: boolean = this.isCover; - const navRight: Record = this.navRight; + const fullScreenEvent: any = this.fullScreenEvent + const closeDrawer: any = this.closeDrawer - if (!this.visible) return; + if (!this.visible) return null return ( -
- {isCover ?
: ''} -
-
-
- -
{ this.slots.default ? this.slots.default() : }
-
-
-
-
+ + + +
{this.slots.default ? this.slots.default() : }
+ + ) } }) diff --git a/packages/devui-vue/docs/components/drawer/index.md b/packages/devui-vue/docs/components/drawer/index.md index 51f64f2f..c1bb486f 100644 --- a/packages/devui-vue/docs/components/drawer/index.md +++ b/packages/devui-vue/docs/components/drawer/index.md @@ -17,9 +17,10 @@ ```vue