From 2a397132036b497c61405ffdd80448105165cc47 Mon Sep 17 00:00:00 2001 From: nowisfuture Date: Wed, 27 Oct 2021 09:15:38 +0800 Subject: [PATCH 1/3] =?UTF-8?q?feat(drawer):=20=E5=A2=9E=E5=8A=A0=E5=9F=BA?= =?UTF-8?q?=E6=9C=AC=E7=BB=84=E4=BB=B6=E7=9A=84=E5=BC=B9=E5=87=BA=E6=96=B9?= =?UTF-8?q?=E5=90=91=E5=B1=9E=E6=80=A7=E5=92=8C=E7=82=B9=E5=87=BB=E4=BB=BB?= =?UTF-8?q?=E6=84=8F=E4=BD=8D=E7=BD=AE=E5=85=B3=E9=97=AD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/drawer/src/components/drawer-header.tsx | 5 +++-- devui/drawer/src/drawer-types.ts | 6 +++++- devui/drawer/src/drawer.scss | 4 +++- devui/drawer/src/drawer.tsx | 19 +++++++++++-------- docs/components/drawer/index.md | 1 + 5 files changed, 23 insertions(+), 12 deletions(-) diff --git a/devui/drawer/src/components/drawer-header.tsx b/devui/drawer/src/components/drawer-header.tsx index dac5705d..6866744b 100644 --- a/devui/drawer/src/components/drawer-header.tsx +++ b/devui/drawer/src/components/drawer-header.tsx @@ -1,4 +1,4 @@ -import { defineComponent, toRefs, ref, reactive } from 'vue' +import { defineComponent, ref } from 'vue' import { drawerHeaderType, DrawerHeaderType } from './drawer-header-type'; import './drawer-header.scss' @@ -10,7 +10,8 @@ export default defineComponent({ setup(props: DrawerHeaderType, ctx) { const isFullScreen = ref(false); - const handleFullScreen = () => { + const handleFullScreen = (e) => { + e.stopPropagation(); isFullScreen.value = !isFullScreen.value; ctx.emit('toggleFullScreen'); } diff --git a/devui/drawer/src/drawer-types.ts b/devui/drawer/src/drawer-types.ts index 8e166033..9cdc51e6 100644 --- a/devui/drawer/src/drawer-types.ts +++ b/devui/drawer/src/drawer-types.ts @@ -1,4 +1,4 @@ -import type { ExtractPropTypes } from 'vue' +import type { ExtractPropTypes, PropType } from 'vue' export const drawerProps = { width: { @@ -21,6 +21,10 @@ export const drawerProps = { type: Boolean, default: true, }, + position: { + type: String as PropType<'left' | 'right'>, + default: 'left', + }, } as const export type DrawerProps = ExtractPropTypes diff --git a/devui/drawer/src/drawer.scss b/devui/drawer/src/drawer.scss index dadc3f86..72fcc8b9 100644 --- a/devui/drawer/src/drawer.scss +++ b/devui/drawer/src/drawer.scss @@ -5,6 +5,7 @@ top: 0; left: 0; height: 100vh; + width: 100vw; } .devui-overlay-wrapper { @@ -17,7 +18,7 @@ } .devui-overlay-backdrop { - position: absolute; + position: fixed; top: 0; left: 0; background: $devui-shadow; @@ -30,6 +31,7 @@ position: absolute; top: 0; bottom: 0; + left: 0; border-radius: $devui-border-radius; } diff --git a/devui/drawer/src/drawer.tsx b/devui/drawer/src/drawer.tsx index 5791d89b..9f8f11e7 100644 --- a/devui/drawer/src/drawer.tsx +++ b/devui/drawer/src/drawer.tsx @@ -1,4 +1,4 @@ -import { defineComponent, ref, toRefs, watch } from 'vue' +import { defineComponent, ref, toRefs, watch, computed } from 'vue' import { drawerProps, DrawerProps } from './drawer-types' import DrawerHeader from './components/drawer-header' @@ -11,9 +11,12 @@ export default defineComponent({ props: drawerProps, emits: ['close', 'update:visible', 'afterOpened'], setup(props: DrawerProps, { emit, slots }) { - const { width, visible, zIndex, isCover, escKeyCloseable } = toRefs(props); // 宽度 + const { width, visible, zIndex, isCover, escKeyCloseable, position } = toRefs(props); // 宽度 const isFullScreen = ref(false); + const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value ); + const wrapperRight = computed(() => position.value === 'right' ? { 'right': width.value } : {} ); + const fullScreenEvent = () => { isFullScreen.value = !isFullScreen.value; } @@ -43,29 +46,29 @@ export default defineComponent({ return { zIndex, isFullScreen, - width, + navWidth, visible, slots, isCover, + wrapperRight, fullScreenEvent, closeDrawer, }; }, render() { const zindex: number = this.zIndex; - const width: number = this.isFullScreen ? '100vw' : this.width; const fullScreenEvent: any = this.fullScreenEvent; const closeDrawer: any = this.closeDrawer; const isCover: boolean = this.isCover; + const wrapperRight: Record = this.wrapperRight; if (!this.visible) return; return ( -
- {/* TODO : 有遮罩层时才能点击关闭 onClick={ closeDrawer }*/} +
{isCover ?
: ''} -
-
+
+
{ this.slots.default ? this.slots.default() : }
diff --git a/docs/components/drawer/index.md b/docs/components/drawer/index.md index f2ff96f2..63c53e29 100644 --- a/docs/components/drawer/index.md +++ b/docs/components/drawer/index.md @@ -20,6 +20,7 @@ -- Gitee From fc8bd894ec4483c37d93199b8aea7b8c25050c28 Mon Sep 17 00:00:00 2001 From: nowisfuture Date: Wed, 27 Oct 2021 09:20:23 +0800 Subject: [PATCH 2/3] =?UTF-8?q?docs(drawer):=20=E5=A2=9E=E5=8A=A0=E5=BC=B9?= =?UTF-8?q?=E5=87=BA=E6=96=B9=E5=90=91=E5=B1=9E=E6=80=A7,=E4=BF=AE?= =?UTF-8?q?=E6=94=B9=E7=BB=84=E4=BB=B6=E5=AE=8C=E6=88=90=E8=BF=9B=E5=BA=A6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/drawer/index.ts | 2 +- docs/components/drawer/index.md | 1 + 2 files changed, 2 insertions(+), 1 deletion(-) diff --git a/devui/drawer/index.ts b/devui/drawer/index.ts index 38320901..342b0f93 100644 --- a/devui/drawer/index.ts +++ b/devui/drawer/index.ts @@ -10,7 +10,7 @@ export { Drawer } export default { title: 'Drawer 抽屉板', category: '反馈', - status: '10%', + status: '30%', install(app: App): void { app.use(Drawer as any) diff --git a/docs/components/drawer/index.md b/docs/components/drawer/index.md index 63c53e29..51f64f2f 100644 --- a/docs/components/drawer/index.md +++ b/docs/components/drawer/index.md @@ -72,3 +72,4 @@ export default ({ | onClose | `Function` | -- | 可选，关闭 drawer 时候调用 | [基本用法](#基本用法) | | escKeyCloseable | `Boolean` | `true` | 可选，设置可否通过 esc 按键来关闭 drawer 层 | [基本用法](#基本用法) | | afterOpened | `Function` | -- | 可选，打开 drawer 后时候调用 | [基本用法](#基本用法) | +| position | `String` | 'right' | 可选，抽屉板出现的位置，'left'或者'right' | [基本用法](#基本用法) | -- Gitee From e120907faf58ee6b7a388551e9ce883c8e4e702f Mon Sep 17 00:00:00 2001 From: nowisfuture Date: Wed, 27 Oct 2021 15:51:15 +0800 Subject: [PATCH 3/3] =?UTF-8?q?fix(drawer):=20=E4=BF=AE=E6=94=B9=E6=96=B9?= =?UTF-8?q?=E5=90=91=E4=B8=BA=E5=8F=B3=E6=97=B6=E5=85=A8=E5=B1=8F=E5=B1=95?= =?UTF-8?q?=E7=A4=BA=E6=A0=B7=E5=BC=8F=E5=BC=82=E5=B8=B8=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 --- devui/drawer/src/drawer.scss | 15 +++++---------- devui/drawer/src/drawer.tsx | 10 +++++----- 2 files changed, 10 insertions(+), 15 deletions(-) diff --git a/devui/drawer/src/drawer.scss b/devui/drawer/src/drawer.scss index 72fcc8b9..43b2615c 100644 --- a/devui/drawer/src/drawer.scss +++ b/devui/drawer/src/drawer.scss @@ -5,7 +5,6 @@ top: 0; left: 0; height: 100vh; - width: 100vw; } .devui-overlay-wrapper { @@ -15,10 +14,11 @@ position: absolute; top: 0; bottom: 0; + width: 100vw; } .devui-overlay-backdrop { - position: fixed; + position: absolute; top: 0; left: 0; background: $devui-shadow; @@ -26,23 +26,18 @@ height: 100vh; } -.devui-drawer-nav, -.devui-drawer-content { +.devui-drawer-nav { position: absolute; top: 0; bottom: 0; - left: 0; border-radius: $devui-border-radius; -} - -.devui-drawer-nav { background: $devui-base-bg; } .devui-drawer-content { - left: 0; - right: 0; + border-radius: $devui-border-radius; overflow: auto; box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow; padding: 20px; + height: 100vh; } diff --git a/devui/drawer/src/drawer.tsx b/devui/drawer/src/drawer.tsx index 9f8f11e7..c4af5fb4 100644 --- a/devui/drawer/src/drawer.tsx +++ b/devui/drawer/src/drawer.tsx @@ -15,7 +15,7 @@ export default defineComponent({ const isFullScreen = ref(false); const navWidth = computed(() => isFullScreen.value ? '100vw' : width.value ); - const wrapperRight = computed(() => position.value === 'right' ? { 'right': width.value } : {} ); + const navRight = computed(() => position.value === 'right' ? { 'right': 0 } : {'left' : 0} ); const fullScreenEvent = () => { isFullScreen.value = !isFullScreen.value; @@ -50,7 +50,7 @@ export default defineComponent({ visible, slots, isCover, - wrapperRight, + navRight, fullScreenEvent, closeDrawer, }; @@ -60,15 +60,15 @@ export default defineComponent({ const fullScreenEvent: any = this.fullScreenEvent; const closeDrawer: any = this.closeDrawer; const isCover: boolean = this.isCover; - const wrapperRight: Record = this.wrapperRight; + const navRight: Record = this.navRight; if (!this.visible) return; return (
{isCover ?
: ''} -
-
+
+
{ this.slots.default ? this.slots.default() : }
-- Gitee