From 95b53209e6d5a2bf6c0fddffad2c83d5bcb5c193 Mon Sep 17 00:00:00 2001 From: nowisfuture Date: Tue, 28 Sep 2021 14:43:06 +0800 Subject: [PATCH 1/7] =?UTF-8?q?feat(drawer):=20=E6=96=B0=E5=A2=9E=E6=8A=BD?= =?UTF-8?q?=E5=B1=89=E6=9D=BF=E7=BB=84=E4=BB=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/drawer/index.ts | 18 ++++++++++++++++++ devui/drawer/src/drawer-types.ts | 9 +++++++++ devui/drawer/src/drawer.scss | 3 +++ devui/drawer/src/drawer.tsx | 18 ++++++++++++++++++ docs/components/drawer/index.md | 16 ++++++++++++++++ 5 files changed, 64 insertions(+) create mode 100644 devui/drawer/index.ts create mode 100644 devui/drawer/src/drawer-types.ts create mode 100644 devui/drawer/src/drawer.scss create mode 100644 devui/drawer/src/drawer.tsx create mode 100644 docs/components/drawer/index.md diff --git a/devui/drawer/index.ts b/devui/drawer/index.ts new file mode 100644 index 00000000..eb1fbc83 --- /dev/null +++ b/devui/drawer/index.ts @@ -0,0 +1,18 @@ +import type { App } from 'vue' +import Drawer from './src/drawer' + +Drawer.install = function(app: App): void { + app.component(Drawer.name, Drawer) +} + +export { Drawer } + +export default { + title: 'Drawer 抽屉板', + category: '反馈', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + + app.use(Drawer as any) + } +} diff --git a/devui/drawer/src/drawer-types.ts b/devui/drawer/src/drawer-types.ts new file mode 100644 index 00000000..aad540f0 --- /dev/null +++ b/devui/drawer/src/drawer-types.ts @@ -0,0 +1,9 @@ +import type { PropType, ExtractPropTypes } from 'vue' + +export const drawerProps = { + /* test: { + type: Object as PropType<{ xxx: xxx }> + } */ +} as const + +export type DrawerProps = ExtractPropTypes diff --git a/devui/drawer/src/drawer.scss b/devui/drawer/src/drawer.scss new file mode 100644 index 00000000..25f1ccf4 --- /dev/null +++ b/devui/drawer/src/drawer.scss @@ -0,0 +1,3 @@ +.d-drawer { + // +} diff --git a/devui/drawer/src/drawer.tsx b/devui/drawer/src/drawer.tsx new file mode 100644 index 00000000..2a055650 --- /dev/null +++ b/devui/drawer/src/drawer.tsx @@ -0,0 +1,18 @@ +import './drawer.scss' + +import { defineComponent } from 'vue' +import { drawerProps, DrawerProps } from './drawer-types' + +export default defineComponent({ + name: 'DDrawer', + props: drawerProps, + emits: [], + setup(props: DrawerProps, ctx) { + return {} + }, + render() { + const {} = this + + return
+ } +}) diff --git a/docs/components/drawer/index.md b/docs/components/drawer/index.md new file mode 100644 index 00000000..293a2f7c --- /dev/null +++ b/docs/components/drawer/index.md @@ -0,0 +1,16 @@ +# Drawer 抽屉板 + +屏幕边缘滑出的浮层面板组件。 + +### 何时使用 + +1. 抽屉从父窗体边缘滑入，覆盖住部分父窗体内容。用户在抽屉内操作时不必离开当前任务，操作完成后，可以平滑地回到到原任务。 +2. 当需要一个附加的面板来控制父窗体内容，这个面板在需要时呼出。比如，控制界面展示样式，往界面中添加内容。 +3. 当需要在当前任务流中插入临时任务，创建或预览附加内容。比如展示协议条款，创建子对象。 + +### 基本用法 + +

基本用法，可以控制全屏、关闭和设置宽度。

+ +```vue +``` -- Gitee From eedf66e80b55e7d7d904391454a87cb78e9fa77b Mon Sep 17 00:00:00 2001 From: nowisfuture Date: Tue, 12 Oct 2021 02:31:57 +0800 Subject: [PATCH 2/7] =?UTF-8?q?feat(drawer):=20=E5=AE=8C=E6=88=90=E5=9F=BA?= =?UTF-8?q?=E6=9C=AC=E7=BB=84=E4=BB=B6=E7=9A=84=E5=BC=80=E5=90=AF=E5=85=B3?= =?UTF-8?q?=E9=97=AD=E5=92=8C=E5=85=A8=E5=B1=8F=E6=8E=A7=E5=88=B6?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/components/drawer-header-type.ts | 7 +++ .../drawer/src/components/drawer-header.scss | 11 +++++ devui/drawer/src/components/drawer-header.tsx | 47 +++++++++++++++++++ devui/drawer/src/drawer-types.ts | 6 ++- devui/drawer/src/drawer.scss | 47 ++++++++++++++++++- devui/drawer/src/drawer.tsx | 38 +++++++++++++-- docs/components/drawer/index.md | 29 ++++++++++++ 7 files changed, 178 insertions(+), 7 deletions(-) create mode 100644 devui/drawer/src/components/drawer-header-type.ts create mode 100644 devui/drawer/src/components/drawer-header.scss create mode 100644 devui/drawer/src/components/drawer-header.tsx diff --git a/devui/drawer/src/components/drawer-header-type.ts b/devui/drawer/src/components/drawer-header-type.ts new file mode 100644 index 00000000..c76ce1c2 --- /dev/null +++ b/devui/drawer/src/components/drawer-header-type.ts @@ -0,0 +1,7 @@ +import type { ExtractPropTypes} from 'vue' + +export const drawerHeaderType = { + +} as const + +export type DrawerHeaderType = ExtractPropTypes diff --git a/devui/drawer/src/components/drawer-header.scss b/devui/drawer/src/components/drawer-header.scss new file mode 100644 index 00000000..ee1776a5 --- /dev/null +++ b/devui/drawer/src/components/drawer-header.scss @@ -0,0 +1,11 @@ +@import '../drawer.scss'; + +.devui-drawer-header { + display: flex; + flex-direction: row; + justify-content: flex-end; + + & .devui-drawer-header-item + .devui-drawer-header-item { + padding-left: 12px; + } +} diff --git a/devui/drawer/src/components/drawer-header.tsx b/devui/drawer/src/components/drawer-header.tsx new file mode 100644 index 00000000..fa8193dc --- /dev/null +++ b/devui/drawer/src/components/drawer-header.tsx @@ -0,0 +1,47 @@ +import './drawer-header.scss' + +import { defineComponent, toRefs, ref, reactive } from 'vue' +import { drawerHeaderType, DrawerHeaderType } from './drawer-header-type'; + +export default defineComponent({ + name: 'DrawerHeader', // 头部 + props: drawerHeaderType, + emits: ['toggleFullScreen', 'close'], + setup(props: DrawerHeaderType, ctx) { + const isFullScreen = ref(false); + + const handleFullScreen = () => { + isFullScreen.value = !isFullScreen.value; + ctx.emit('toggleFullScreen'); + } + + const handleDrawerClose = () => { + ctx.emit('close') + } + + return { isFullScreen, handleFullScreen, handleDrawerClose } + }, + render() { + const { handleFullScreen, isFullScreen, handleDrawerClose } = this + const fullScreen: string = isFullScreen ? 'icon icon-minimize' : 'icon icon-maxmize' + + return ( +
+
+ +
+
+ {/* { + isFullScreen.value ? + : + + } */} + +
+
+ +
+
+ ) + } +}) diff --git a/devui/drawer/src/drawer-types.ts b/devui/drawer/src/drawer-types.ts index aad540f0..80e76011 100644 --- a/devui/drawer/src/drawer-types.ts +++ b/devui/drawer/src/drawer-types.ts @@ -1,9 +1,13 @@ -import type { PropType, ExtractPropTypes } from 'vue' +import type { ExtractPropTypes } from 'vue' export const drawerProps = { /* test: { type: Object as PropType<{ xxx: xxx }> } */ + width: { + type: String, + default: '300px', + }, } as const export type DrawerProps = ExtractPropTypes diff --git a/devui/drawer/src/drawer.scss b/devui/drawer/src/drawer.scss index 25f1ccf4..dadc3f86 100644 --- a/devui/drawer/src/drawer.scss +++ b/devui/drawer/src/drawer.scss @@ -1,3 +1,46 @@ -.d-drawer { - // +@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; +} + +.devui-overlay-backdrop { + position: absolute; + top: 0; + left: 0; + background: $devui-shadow; + width: 100vw; + height: 100vh; +} + +.devui-drawer-nav, +.devui-drawer-content { + position: absolute; + top: 0; + bottom: 0; + border-radius: $devui-border-radius; +} + +.devui-drawer-nav { + background: $devui-base-bg; +} + +.devui-drawer-content { + left: 0; + right: 0; + overflow: auto; + box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow; + padding: 20px; } diff --git a/devui/drawer/src/drawer.tsx b/devui/drawer/src/drawer.tsx index 2a055650..e616d109 100644 --- a/devui/drawer/src/drawer.tsx +++ b/devui/drawer/src/drawer.tsx @@ -1,18 +1,48 @@ import './drawer.scss' -import { defineComponent } from 'vue' +import { defineComponent, ref, toRefs } from 'vue' import { drawerProps, DrawerProps } from './drawer-types' +import DrawerHeader from './components/drawer-header' + export default defineComponent({ name: 'DDrawer', props: drawerProps, emits: [], setup(props: DrawerProps, ctx) { - return {} + const { width } = toRefs(props); // 宽度 + const ZIndex = ref(1000); // z-index + const fullScreen = ref(false); + + const fullScreenEvent = () => { + fullScreen.value = !fullScreen.value; + } + + const closeDrawer = () => { + ctx.emit('close'); + } + + return { ZIndex, fullScreen, width, fullScreenEvent, closeDrawer }; }, render() { - const {} = this + const zindex: number = this.ZIndex; + const fullScreen: boolean = this.fullScreen; + const width: number = fullScreen ? '100vw' : this.width; + const fullScreenEvent: Event = this.fullScreenEvent; + const closeDrawer: Event = this.closeDrawer; - return
+ return ( +
+ {/* 越后面的元素层级越高？ */} +
+
+
+
+ +
+
+
+
+ ) } }) diff --git a/docs/components/drawer/index.md b/docs/components/drawer/index.md index 293a2f7c..851cf287 100644 --- a/docs/components/drawer/index.md +++ b/docs/components/drawer/index.md @@ -12,5 +12,34 @@

基本用法，可以控制全屏、关闭和设置宽度。

+:::demo + ```vue + + ``` + +::: -- Gitee From b4716a49a2e914869b1f91234e1013852fb089a7 Mon Sep 17 00:00:00 2001 From: nowisfuture Date: Tue, 12 Oct 2021 20:07:27 +0800 Subject: [PATCH 3/7] =?UTF-8?q?fix(drawer):=20=E5=88=A0=E9=99=A4=E4=B8=8D?= =?UTF-8?q?=E5=BF=85=E8=A6=81=E7=9A=84=E4=BB=A3=E7=A0=81,=E5=8F=98?= =?UTF-8?q?=E9=87=8F=E9=87=8D=E5=91=BD=E5=90=8D,=E5=BC=95=E7=94=A8?= =?UTF-8?q?=E6=AC=A1=E5=BA=8F=E4=BF=AE=E6=94=B9?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/drawer/src/components/drawer-header.tsx | 19 +++++++------------ devui/drawer/src/drawer-types.ts | 3 --- devui/drawer/src/drawer.tsx | 10 +++++----- 3 files changed, 12 insertions(+), 20 deletions(-) diff --git a/devui/drawer/src/components/drawer-header.tsx b/devui/drawer/src/components/drawer-header.tsx index fa8193dc..dac5705d 100644 --- a/devui/drawer/src/components/drawer-header.tsx +++ b/devui/drawer/src/components/drawer-header.tsx @@ -1,8 +1,8 @@ -import './drawer-header.scss' - import { defineComponent, toRefs, ref, reactive } from 'vue' import { drawerHeaderType, DrawerHeaderType } from './drawer-header-type'; +import './drawer-header.scss' + export default defineComponent({ name: 'DrawerHeader', // 头部 props: drawerHeaderType, @@ -22,24 +22,19 @@ export default defineComponent({ return { isFullScreen, handleFullScreen, handleDrawerClose } }, render() { - const { handleFullScreen, isFullScreen, handleDrawerClose } = this - const fullScreen: string = isFullScreen ? 'icon icon-minimize' : 'icon icon-maxmize' + const { handleFullScreen, handleDrawerClose } = this + const isFullScreen: string = this.isFullScreen ? 'icon icon-minimize' : 'icon icon-maxmize' return (
- +
- {/* { - isFullScreen.value ? - : - - } */} - +
- +
) diff --git a/devui/drawer/src/drawer-types.ts b/devui/drawer/src/drawer-types.ts index 80e76011..2ae295fa 100644 --- a/devui/drawer/src/drawer-types.ts +++ b/devui/drawer/src/drawer-types.ts @@ -1,9 +1,6 @@ import type { ExtractPropTypes } from 'vue' export const drawerProps = { - /* test: { - type: Object as PropType<{ xxx: xxx }> - } */ width: { type: String, default: '300px', diff --git a/devui/drawer/src/drawer.tsx b/devui/drawer/src/drawer.tsx index e616d109..6b85403b 100644 --- a/devui/drawer/src/drawer.tsx +++ b/devui/drawer/src/drawer.tsx @@ -1,14 +1,14 @@ -import './drawer.scss' - import { defineComponent, ref, toRefs } from 'vue' import { drawerProps, DrawerProps } from './drawer-types' import DrawerHeader from './components/drawer-header' +import './drawer.scss' + export default defineComponent({ name: 'DDrawer', props: drawerProps, - emits: [], + emits: ['close'], setup(props: DrawerProps, ctx) { const { width } = toRefs(props); // 宽度 const ZIndex = ref(1000); // z-index @@ -28,8 +28,8 @@ export default defineComponent({ const zindex: number = this.ZIndex; const fullScreen: boolean = this.fullScreen; const width: number = fullScreen ? '100vw' : this.width; - const fullScreenEvent: Event = this.fullScreenEvent; - const closeDrawer: Event = this.closeDrawer; + const fullScreenEvent: any = this.fullScreenEvent; + const closeDrawer: any = this.closeDrawer; return (
-- Gitee From d00ecc0d56ce82d20c8377e183dba5a878dc6254 Mon Sep 17 00:00:00 2001 From: nowisfuture Date: Tue, 12 Oct 2021 20:14:23 +0800 Subject: [PATCH 4/7] =?UTF-8?q?fix(drawer):=20=E5=8F=98=E9=87=8F=E9=87=8D?= =?UTF-8?q?=E5=91=BD=E5=90=8D?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/drawer/src/drawer.tsx | 9 ++++----- 1 file changed, 4 insertions(+), 5 deletions(-) diff --git a/devui/drawer/src/drawer.tsx b/devui/drawer/src/drawer.tsx index 6b85403b..afdfd1f8 100644 --- a/devui/drawer/src/drawer.tsx +++ b/devui/drawer/src/drawer.tsx @@ -12,22 +12,21 @@ export default defineComponent({ setup(props: DrawerProps, ctx) { const { width } = toRefs(props); // 宽度 const ZIndex = ref(1000); // z-index - const fullScreen = ref(false); + const isFullScreen = ref(false); const fullScreenEvent = () => { - fullScreen.value = !fullScreen.value; + isFullScreen.value = !isFullScreen.value; } const closeDrawer = () => { ctx.emit('close'); } - return { ZIndex, fullScreen, width, fullScreenEvent, closeDrawer }; + return { ZIndex, isFullScreen, width, fullScreenEvent, closeDrawer }; }, render() { const zindex: number = this.ZIndex; - const fullScreen: boolean = this.fullScreen; - const width: number = fullScreen ? '100vw' : this.width; + const width: number = this.isFullScreen ? '100vw' : this.width; const fullScreenEvent: any = this.fullScreenEvent; const closeDrawer: any = this.closeDrawer; -- Gitee From 51d877703e20ceccda5f967d7af4b2e8d886b334 Mon Sep 17 00:00:00 2001 From: nowisfuture Date: Wed, 13 Oct 2021 00:01:54 +0800 Subject: [PATCH 5/7] =?UTF-8?q?feat(drawer):=20=E5=A2=9E=E5=8A=A0=20visibl?= =?UTF-8?q?e=20=E5=B1=9E=E6=80=A7?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/drawer/src/drawer-types.ts | 4 ++++ devui/drawer/src/drawer.tsx | 16 +++++++++++++--- 2 files changed, 17 insertions(+), 3 deletions(-) diff --git a/devui/drawer/src/drawer-types.ts b/devui/drawer/src/drawer-types.ts index 2ae295fa..19674440 100644 --- a/devui/drawer/src/drawer-types.ts +++ b/devui/drawer/src/drawer-types.ts @@ -5,6 +5,10 @@ export const drawerProps = { type: String, default: '300px', }, + visible: { + type: Boolean, + default: false, + } } as const export type DrawerProps = ExtractPropTypes diff --git a/devui/drawer/src/drawer.tsx b/devui/drawer/src/drawer.tsx index afdfd1f8..d60c7769 100644 --- a/devui/drawer/src/drawer.tsx +++ b/devui/drawer/src/drawer.tsx @@ -8,9 +8,9 @@ import './drawer.scss' export default defineComponent({ name: 'DDrawer', props: drawerProps, - emits: ['close'], + emits: ['close', 'update:visible'], setup(props: DrawerProps, ctx) { - const { width } = toRefs(props); // 宽度 + const { width, visible } = toRefs(props); // 宽度 const ZIndex = ref(1000); // z-index const isFullScreen = ref(false); @@ -19,10 +19,18 @@ export default defineComponent({ } const closeDrawer = () => { + ctx.emit('update:visible', false); ctx.emit('close'); } - return { ZIndex, isFullScreen, width, fullScreenEvent, closeDrawer }; + return { + ZIndex, + isFullScreen, + width, + visible, + fullScreenEvent, + closeDrawer, + }; }, render() { const zindex: number = this.ZIndex; @@ -30,6 +38,8 @@ export default defineComponent({ const fullScreenEvent: any = this.fullScreenEvent; const closeDrawer: any = this.closeDrawer; + if (!this.visible) return; + return (
{/* 越后面的元素层级越高？ */} -- Gitee From 0df27896a92c80f6a3b13f6deb695c041228cbc0 Mon Sep 17 00:00:00 2001 From: nowisfuture Date: Wed, 13 Oct 2021 00:06:39 +0800 Subject: [PATCH 6/7] =?UTF-8?q?refactor(drawer):=20=E4=BD=BF=E7=94=A8?= =?UTF-8?q?=E5=A2=9E=E5=8A=A0=E7=9A=84=E5=B1=9E=E6=80=A7=E9=87=8D=E6=96=B0?= =?UTF-8?q?=E7=BC=96=E5=86=99DEMO?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- docs/components/drawer/index.md | 19 +++++++++++++------ 1 file changed, 13 insertions(+), 6 deletions(-) diff --git a/docs/components/drawer/index.md b/docs/components/drawer/index.md index 851cf287..3b26359e 100644 --- a/docs/components/drawer/index.md +++ b/docs/components/drawer/index.md @@ -16,24 +16,31 @@ ```vue