From 83de433991a5f610ac156e55c348f86da0b83e86 Mon Sep 17 00:00:00 2001 From: zcating Date: Fri, 24 Sep 2021 00:46:13 +0800 Subject: [PATCH 01/16] =?UTF-8?q?feat(modal):=20=E5=AE=8C=E6=88=90modal?= =?UTF-8?q?=E5=9F=BA=E7=A1=80=E5=B1=95=E7=A4=BA=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/modal/index.ts | 18 +++++++ devui/modal/src/modal-footer.tsx | 0 devui/modal/src/modal-header.tsx | 0 devui/modal/src/modal-types.ts | 89 ++++++++++++++++++++++++++++++++ devui/modal/src/modal.scss | 46 +++++++++++++++++ devui/modal/src/modal.tsx | 60 +++++++++++++++++++++ docs/components/modal/index.md | 55 ++++++++++++++++++++ 7 files changed, 268 insertions(+) create mode 100644 devui/modal/index.ts create mode 100644 devui/modal/src/modal-footer.tsx create mode 100644 devui/modal/src/modal-header.tsx create mode 100644 devui/modal/src/modal-types.ts create mode 100644 devui/modal/src/modal.scss create mode 100644 devui/modal/src/modal.tsx create mode 100644 docs/components/modal/index.md diff --git a/devui/modal/index.ts b/devui/modal/index.ts new file mode 100644 index 00000000..ee646765 --- /dev/null +++ b/devui/modal/index.ts @@ -0,0 +1,18 @@ +import type { App } from 'vue' +import Modal from './src/modal' + +Modal.install = function(app: App): void { + app.component(Modal.name, Modal) +} + +export { Modal } + +export default { + title: 'Modal 弹窗', + category: '反馈', + status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 + install(app: App): void { + + app.use(Modal as any) + } +} diff --git a/devui/modal/src/modal-footer.tsx b/devui/modal/src/modal-footer.tsx new file mode 100644 index 00000000..e69de29b diff --git a/devui/modal/src/modal-header.tsx b/devui/modal/src/modal-header.tsx new file mode 100644 index 00000000..e69de29b diff --git a/devui/modal/src/modal-types.ts b/devui/modal/src/modal-types.ts new file mode 100644 index 00000000..b91cb2ac --- /dev/null +++ b/devui/modal/src/modal-types.ts @@ -0,0 +1,89 @@ +import type { PropType, ExtractPropTypes } from 'vue' +import { IButtonStyle } from '../../button/src/button' + +interface ButtonProps { + bsStyle: IButtonStyle + text: string + disabled: boolean + handler: ($event: Event) => void +} + +export const modalProps = { + // id: { + // type: String, + // required: true + // }, + width: { + type: String, + default: '300px' + }, + maxHeight: { + type: String, + }, + + zIndex: { + type: Number, + default: 1050 + }, + backDropZIndex: { + type: Number, + default: 1049 + }, + + placement: { + type: String as PropType<'center' | 'top' | 'bottom'>, + default: 'center' + }, + offsetX: { + type: String, + default: '0px' + }, + + offsetY: { + type: String, + default: '0px' + }, + + title: { + type: String + }, + + showAnimation: { + type: Boolean, + default: true + }, + backdropCloseable: { + type: Boolean, + default: true + }, + bodyScrollable: { + type: Boolean, + default: true + }, + + escapeable: { + type: Boolean, + default: true + }, + + onClose: { + type: Function as PropType<() => void>, + }, + beforeHidden: { + type: Object as PropType | (() => void)> + }, + + buttons: { + type: Array as PropType, + default: [] + }, + + modelValue: { + type: Boolean, + }, + 'onUpdate:modelValue': { + type: Function as PropType<(value: boolean) => void> + } +} as const + +export type ModalProps = ExtractPropTypes diff --git a/devui/modal/src/modal.scss b/devui/modal/src/modal.scss new file mode 100644 index 00000000..f2278aa4 --- /dev/null +++ b/devui/modal/src/modal.scss @@ -0,0 +1,46 @@ +@import '../../style/theme/color'; +@import '../../style/theme/corner'; +@import '../../style/theme/font'; + +.modal-wrapper { + justify-content: center; + align-items: center; + background-color: $devui-shadow; +} + +.modal-content { + background: $devui-fullscreen-overlay-bg; + border-radius: $devui-border-radius; +} + +.modal-body { + padding: 20px 32px; + color: $devui-text-weak; +} + +.modal-header { + padding: 32px 32px 0; + height: 56px; + position: relative; + border: none; + + .btn-close { + position: absolute; + right: 20px; + top: 20px; + font-size: $devui-font-size-icon; + font-weight: 700; + line-height: 1; + color: #000000; + cursor: pointer; + background: transparent; + border: 0; + -webkit-appearance: none; + } +} + +.modal-footer { + border-top: none; + text-align: center; + padding: 0 32px 24px; +} diff --git a/devui/modal/src/modal.tsx b/devui/modal/src/modal.tsx new file mode 100644 index 00000000..a0a56d22 --- /dev/null +++ b/devui/modal/src/modal.tsx @@ -0,0 +1,60 @@ +import { computed, defineComponent } from 'vue' +import { modalProps, ModalProps } from './modal-types' +import { FixedOverlay } from '../../overlay' +import { Button } from '../../button'; +import { Icon } from '../../icon'; +import './modal.scss'; + +export default defineComponent({ + name: 'DModal', + props: modalProps, + emits: ['onUpdate:modelValue'], + setup(props: ModalProps, ctx) { + + const containerStyle = computed(() => { + return { + width: props.width, + maxHeight: props.maxHeight + }; + }); + + const buttons = computed(() => { + return props.buttons.map((buttonProps, index) => { + const {bsStyle, disabled, handler, text} = buttonProps; + return ( + + ); + }); + }); + + return () => ( + +
+
+ {props.title} + +
+
+ {ctx.slots.default?.()} +
+
+ {buttons.value} +
+
+ + ) + } +}) diff --git a/docs/components/modal/index.md b/docs/components/modal/index.md new file mode 100644 index 00000000..1c4316a8 --- /dev/null +++ b/docs/components/modal/index.md @@ -0,0 +1,55 @@ +:::demo + +```vue + + + +``` +::: -- Gitee From dc26d37c4cfd791774801ce8f774be4d83c13d8c Mon Sep 17 00:00:00 2001 From: zhuchenxi Date: Fri, 24 Sep 2021 09:41:49 +0800 Subject: [PATCH 02/16] =?UTF-8?q?fix(modal):=20=E6=A0=B7=E5=BC=8F=E5=A2=9E?= =?UTF-8?q?=E5=8A=A0=E5=89=8D=E7=BC=80?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/modal/src/modal.scss | 10 +++++----- devui/modal/src/modal.tsx | 20 ++++++++++---------- 2 files changed, 15 insertions(+), 15 deletions(-) diff --git a/devui/modal/src/modal.scss b/devui/modal/src/modal.scss index f2278aa4..da8a56b5 100644 --- a/devui/modal/src/modal.scss +++ b/devui/modal/src/modal.scss @@ -2,23 +2,23 @@ @import '../../style/theme/corner'; @import '../../style/theme/font'; -.modal-wrapper { +.devui-modal-wrapper { justify-content: center; align-items: center; background-color: $devui-shadow; } -.modal-content { +.devui-modal-content { background: $devui-fullscreen-overlay-bg; border-radius: $devui-border-radius; } -.modal-body { +.devui-modal-body { padding: 20px 32px; color: $devui-text-weak; } -.modal-header { +.devui-modal-header { padding: 32px 32px 0; height: 56px; position: relative; @@ -39,7 +39,7 @@ } } -.modal-footer { +.devui-modal-footer { border-top: none; text-align: center; padding: 0 32px 24px; diff --git a/devui/modal/src/modal.tsx b/devui/modal/src/modal.tsx index a0a56d22..d751c6d8 100644 --- a/devui/modal/src/modal.tsx +++ b/devui/modal/src/modal.tsx @@ -20,11 +20,11 @@ export default defineComponent({ const buttons = computed(() => { return props.buttons.map((buttonProps, index) => { - const {bsStyle, disabled, handler, text} = buttonProps; + const { bsStyle, disabled, handler, text } = buttonProps; return ( - -
+
{ctx.slots.default?.()}
-
+
{buttons.value}
-- Gitee From 2e70574652527d17bed92b21b9f7ea3a21e976fe Mon Sep 17 00:00:00 2001 From: zhuchenxi Date: Fri, 24 Sep 2021 10:41:58 +0800 Subject: [PATCH 03/16] =?UTF-8?q?fix(modal):=20=E6=9B=B4=E6=94=B9=E5=8F=B3?= =?UTF-8?q?=E4=B8=8A=E8=A7=92=E7=9A=84=E9=80=80=E5=87=BA=E6=8C=89=E9=92=AE?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/modal/src/modal.tsx | 9 ++++++--- 1 file changed, 6 insertions(+), 3 deletions(-) diff --git a/devui/modal/src/modal.tsx b/devui/modal/src/modal.tsx index d751c6d8..96cd1e5f 100644 --- a/devui/modal/src/modal.tsx +++ b/devui/modal/src/modal.tsx @@ -43,9 +43,12 @@ export default defineComponent({
{props.title} - +
{ctx.slots.default?.()} -- Gitee From f29c80014836e78111cb29e005efdd623f1b1aa8 Mon Sep 17 00:00:00 2001 From: zhuchenxi Date: Fri, 24 Sep 2021 15:24:11 +0800 Subject: [PATCH 04/16] =?UTF-8?q?feat(modal):=20=E6=B7=BB=E5=8A=A0?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/modal/src/modal.scss | 1 + devui/modal/src/modal.tsx | 90 +++++++++++++++++++++++++++++++++----- 2 files changed, 80 insertions(+), 11 deletions(-) diff --git a/devui/modal/src/modal.scss b/devui/modal/src/modal.scss index da8a56b5..77697523 100644 --- a/devui/modal/src/modal.scss +++ b/devui/modal/src/modal.scss @@ -23,6 +23,7 @@ height: 56px; position: relative; border: none; + cursor: all-scroll; .btn-close { position: absolute; diff --git a/devui/modal/src/modal.tsx b/devui/modal/src/modal.tsx index 96cd1e5f..7bb79ab2 100644 --- a/devui/modal/src/modal.tsx +++ b/devui/modal/src/modal.tsx @@ -1,8 +1,7 @@ -import { computed, defineComponent } from 'vue' +import { computed, defineComponent, CSSProperties, ref, watch, readonly, reactive } from 'vue' import { modalProps, ModalProps } from './modal-types' import { FixedOverlay } from '../../overlay' import { Button } from '../../button'; -import { Icon } from '../../icon'; import './modal.scss'; export default defineComponent({ @@ -11,13 +10,24 @@ export default defineComponent({ emits: ['onUpdate:modelValue'], setup(props: ModalProps, ctx) { - const containerStyle = computed(() => { - return { - width: props.width, - maxHeight: props.maxHeight - }; - }); + // 获取鼠标拖拽的偏移量 + const { draggingX, draggingY, elementRef } = useDraggable(); + + // 拖拽的样式 + const draggingStyle = computed(() => ({ + position: 'relative', + left: `${draggingX.value}px`, + top: `${draggingY.value}px`, + })); + + // 容器的样式 + const containerStyle = computed(() => ({ + width: props.width, + maxHeight: props.maxHeight, + transform: `translate(${props.offsetX}, ${props.offsetY})` + })); + // 处理按钮 const buttons = computed(() => { return props.buttons.map((buttonProps, index) => { const { bsStyle, disabled, handler, text } = buttonProps; @@ -28,7 +38,9 @@ export default defineComponent({ bsStyle={bsStyle} disabled={disabled} btnClick={handler} - >{text} + > + {text} + ); }); }); @@ -40,8 +52,8 @@ export default defineComponent({ backgroundClass="devui-modal-wrapper" backgroundBlock={props.bodyScrollable} > -
-
+
+
{props.title}
-
- {ctx.slots.default?.()} -
-
- {buttons.value} + +
+
+ {props.title} + {/* TODO: Button icon need to visible */} +
+
+ {ctx.slots.default?.()} +
+
+ {buttons.value} +
-
+ ) } @@ -76,10 +110,11 @@ export default defineComponent({ // 当前某个元素被拖拽时鼠标的偏移量 -const useDraggable = () => { +const useDraggable = (draggable: Ref | boolean = true) => { const draggingX = ref(0); const draggingY = ref(0); const elementRef = ref(); + const enabledDragging = isRef(draggable) ? draggable : ref(draggable); watch(elementRef, (target, ov, onInvalidate) => { if (!(target instanceof HTMLElement)) { @@ -89,13 +124,27 @@ const useDraggable = () => { let startY = 0; let prevDraggingX = 0; let prevDraggingY = 0; + const isEnter = false; let isDown = false; + const handleMouseDown = (event: MouseEvent) => { - isDown = true; + if (!enabledDragging.value) { + return; + } startX = event.clientX; startY = event.clientY; - prevDraggingX = draggingX.value; - prevDraggingY = draggingY.value; + const rect = target.getBoundingClientRect(); + // 判断鼠标点是否在 target 元素内 + if ( + rect.x < startX && + rect.y < startY && + (rect.width + rect.x) >= startX && + (rect.height + rect.y) >= startY + ) { + isDown = true; + prevDraggingX = draggingX.value; + prevDraggingY = draggingY.value; + } } const handleMouseMove = (event: MouseEvent) => { @@ -113,14 +162,14 @@ const useDraggable = () => { isDown = false; } - target.addEventListener('mousedown', handleMouseDown); - target.addEventListener('mousemove', handleMouseMove); - target.addEventListener('mouseup', handleMouseUp); + window.addEventListener('mousedown', handleMouseDown); + window.addEventListener('mousemove', handleMouseMove); + window.addEventListener('mouseup', handleMouseUp); onInvalidate(() => { - target.removeEventListener('mousedown', handleMouseDown); - target.removeEventListener('mousemove', handleMouseMove); - target.removeEventListener('mouseup', handleMouseUp); - }) + window.removeEventListener('mousedown', handleMouseDown); + window.removeEventListener('mousemove', handleMouseMove); + window.removeEventListener('mouseup', handleMouseUp); + }); }); return { -- Gitee From e7c91284b174491f4644a4e6cd4cd22da0c14a8a Mon Sep 17 00:00:00 2001 From: zhuchenxi Date: Tue, 28 Sep 2021 11:39:48 +0800 Subject: [PATCH 06/16] =?UTF-8?q?feat(modal):=20=E8=B0=83=E6=95=B4?= =?UTF-8?q?=E6=8B=96=E6=8B=BD=E8=8C=83=E5=9B=B4,=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E7=82=B9=E5=87=BB=E5=90=8E=E5=BD=92=E4=BD=8D=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/modal/src/modal.tsx | 61 ++++++++++++++++++++++++++++++--------- 1 file changed, 47 insertions(+), 14 deletions(-) diff --git a/devui/modal/src/modal.tsx b/devui/modal/src/modal.tsx index 03edc099..2d615a98 100644 --- a/devui/modal/src/modal.tsx +++ b/devui/modal/src/modal.tsx @@ -1,4 +1,4 @@ -import { computed, defineComponent, CSSProperties, ref, watch, readonly, Ref, isRef, Transition } from 'vue' +import { computed, defineComponent, CSSProperties, ref, watch, readonly, Ref, isRef, Transition, nextTick, onMounted } from 'vue' import { modalProps, ModalProps } from './modal-types' import { FixedOverlay } from '../../overlay' import { Button } from '../../button'; @@ -11,7 +11,12 @@ export default defineComponent({ setup(props: ModalProps, ctx) { // 获取鼠标拖拽的偏移量 - const { draggingX, draggingY, elementRef } = useDraggable(); + const { draggingX, draggingY, elementRef, containerRef, reset } = useDraggable(); + watch(() => props.modelValue, (value) => { + if (value) { + reset(); + } + }); // 拖拽的样式 const draggingStyle = computed(() => ({ @@ -81,6 +86,7 @@ export default defineComponent({ >
{ + if (value < min) { + return min; + } + if (value > max) { + return max; + } + return value; +} + + // 当前某个元素被拖拽时鼠标的偏移量 const useDraggable = (draggable: Ref | boolean = true) => { const draggingX = ref(0); const draggingY = ref(0); const elementRef = ref(); + const containerRef = ref(); const enabledDragging = isRef(draggable) ? draggable : ref(draggable); - watch(elementRef, (target, ov, onInvalidate) => { - if (!(target instanceof HTMLElement)) { + const reset = () => { + draggingX.value = 0; + draggingY.value = 0; + } + + watch([containerRef, elementRef], ([container, target], ov, onInvalidate) => { + if (!(target instanceof HTMLElement && container instanceof HTMLElement)) { return; } + const body = window.document.body; let startX = 0; let startY = 0; let prevDraggingX = 0; let prevDraggingY = 0; - const isEnter = false; + let containerRect = container.getBoundingClientRect(); + let bodyRect = body.getBoundingClientRect(); let isDown = false; - const handleMouseDown = (event: MouseEvent) => { if (!enabledDragging.value) { return; } startX = event.clientX; startY = event.clientY; - const rect = target.getBoundingClientRect(); + // 只拿最新的 + const targetRect = target.getBoundingClientRect(); // 判断鼠标点是否在 target 元素内 if ( - rect.x < startX && - rect.y < startY && - (rect.width + rect.x) >= startX && - (rect.height + rect.y) >= startY + targetRect.x < startX && + targetRect.y < startY && + (targetRect.width + targetRect.x) >= startX && + (targetRect.height + targetRect.y) >= startY ) { isDown = true; prevDraggingX = draggingX.value; prevDraggingY = draggingY.value; + bodyRect = body.getBoundingClientRect(); + containerRect = container.getBoundingClientRect(); } } @@ -151,8 +178,12 @@ const useDraggable = (draggable: Ref | boolean = true) => { if (!isDown) { return; } - draggingX.value = prevDraggingX + event.clientX - startX; - draggingY.value = prevDraggingY + event.clientY - startY; + const currentX = prevDraggingX + event.clientX - startX; + const currentY = prevDraggingY + event.clientY - startY; + const containerOriginX = containerRect.x - prevDraggingX; + const containerOriginY = containerRect.y - prevDraggingY; + draggingX.value = getRangeValueOf(currentX, -containerOriginX, bodyRect.width - containerRect.width - containerOriginX); + draggingY.value = getRangeValueOf(currentY, -containerOriginY, bodyRect.height - containerRect.height - containerOriginY); } const handleMouseUp = () => { @@ -175,6 +206,8 @@ const useDraggable = (draggable: Ref | boolean = true) => { return { draggingX: readonly(draggingX), draggingY: readonly(draggingY), - elementRef + elementRef, + containerRef, + reset } } \ No newline at end of file -- Gitee From 57346f343b5b784fb80760ae27ae4b3f9e618494 Mon Sep 17 00:00:00 2001 From: zhuchenxi Date: Tue, 28 Sep 2021 18:45:52 +0800 Subject: [PATCH 07/16] =?UTF-8?q?feat(modal):=20=E6=96=B0=E5=A2=9E?= =?UTF-8?q?=E7=94=A8=E6=9C=8D=E5=8A=A1=E5=BD=A2=E5=BC=8F=E6=89=93=E5=BC=80?= =?UTF-8?q?=20modal=20=E7=9A=84=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/modal/index.ts | 11 ++++- devui/modal/src/modal-service.ts | 46 +++++++++++++++++++++ devui/modal/src/modal-types.ts | 24 ++++++++++- devui/modal/src/modal.tsx | 12 +++++- docs/components/modal/index.md | 70 +++++++++++++++++++++----------- 5 files changed, 137 insertions(+), 26 deletions(-) create mode 100644 devui/modal/src/modal-service.ts diff --git a/devui/modal/index.ts b/devui/modal/index.ts index ee646765..8a5f33e4 100644 --- a/devui/modal/index.ts +++ b/devui/modal/index.ts @@ -1,5 +1,6 @@ import type { App } from 'vue' import Modal from './src/modal' +import { ModalService } from './src/modal-service' Modal.install = function(app: App): void { app.component(Modal.name, Modal) @@ -12,7 +13,15 @@ export default { category: '反馈', status: undefined, // TODO: 组件若开发完成则填入"已完成"，并删除该注释 install(app: App): void { - app.use(Modal as any) + + let anchor = document.getElementById('d-modal-anchor'); + if (!anchor) { + anchor = document.createElement('div'); + anchor.setAttribute('id', 'd-modal-anchor'); + document.body.appendChild(anchor); + } + // 新增 modalService + app.provide(ModalService.token, new ModalService(anchor)); } } diff --git a/devui/modal/src/modal-service.ts b/devui/modal/src/modal-service.ts new file mode 100644 index 00000000..8b9c68e2 --- /dev/null +++ b/devui/modal/src/modal-service.ts @@ -0,0 +1,46 @@ +import {h, render, InjectionKey, Slots} from 'vue'; +import { ModalProps, ModalPropsType, } from './modal-types'; +import Modal from './modal'; + +export class ModalService { + + static token = 'MODAL_SERVICE_TOKEN' as unknown as InjectionKey; + + constructor(public anchor: HTMLElement) {} + + open(props: Partial = {}): ({ hide: () => void; }) { + // TODO：手动的方式可能抛弃了 content 内部的响应式，这里需要再优化。 + + const {content, ...resProps} = props; + const hide = () => { + this.renderModal(this.anchor, {...resProps as any, modelValue: false }, { default: content }); + this.renderNull(this.anchor); + } + // 先渲染一次 + this.renderModal(this.anchor, {modelValue: false}); + + // 再渲染详细内容 + this.renderModal(this.anchor, { + ...resProps as any, + modelValue: true, + 'onUpdate:modelValue': (value: boolean) => { + if (!value) { + hide(); + } + } + }, {default: content}); + return { hide } + } + + private renderModal(anchor: HTMLElement, props: Partial, children?: Slots) { + setTimeout(() => { + render(h(Modal as any, props, children), anchor); + }, 0); + } + private renderNull(anchor: HTMLElement) { + // 动画运行完毕后 + setTimeout(() => { + render(null, anchor); + }, 500); + } +} diff --git a/devui/modal/src/modal-types.ts b/devui/modal/src/modal-types.ts index 6843dce5..2a9840b0 100644 --- a/devui/modal/src/modal-types.ts +++ b/devui/modal/src/modal-types.ts @@ -1,4 +1,4 @@ -import type { PropType, ExtractPropTypes } from 'vue' +import type { PropType, ExtractPropTypes, Slot } from 'vue' import { IButtonStyle } from '../../button/src/button' interface ButtonProps { @@ -8,6 +8,28 @@ interface ButtonProps { handler: ($event: Event) => void } +export interface ModalPropsType { + width: string + maxHeight: string + zIndex: number + backdropZIndex: number + placement: 'center' | 'top' | 'bottom' + offsetX: string + offsetY: string + showAnimation: boolean + backdropCloseable: boolean + escapeable: boolean + bodyScrollable: boolean + + title: string + content: Slot + buttons: ButtonProps + + onClose(): void + beforeHidden: (() => boolean) | Promise +} + + export const modalProps = { // id: { // type: String, diff --git a/devui/modal/src/modal.tsx b/devui/modal/src/modal.tsx index 2d615a98..2d48f8c5 100644 --- a/devui/modal/src/modal.tsx +++ b/devui/modal/src/modal.tsx @@ -1,4 +1,14 @@ -import { computed, defineComponent, CSSProperties, ref, watch, readonly, Ref, isRef, Transition, nextTick, onMounted } from 'vue' +import { + computed, + defineComponent, + CSSProperties, + ref, + watch, + readonly, + Ref, + isRef, + Transition +} from 'vue' import { modalProps, ModalProps } from './modal-types' import { FixedOverlay } from '../../overlay' import { Button } from '../../button'; diff --git a/docs/components/modal/index.md b/docs/components/modal/index.md index 1c4316a8..57ee767e 100644 --- a/docs/components/modal/index.md +++ b/docs/components/modal/index.md @@ -17,35 +17,59 @@ + +``` +::: + + +:::demo - // const visibleRef = ref(false); - // const close = () => { - // visibleRef.value = false; - // } - // const buttons = [ - // { - // bsStyle: 'primary', - // text: 'Ok', - // disabled: false, - // handler: close, - // }, { - // id: 'btn-cancel', - // bsStyle: 'common', - // text: 'Cancel', - // handler: close - // }, - // ]; +```vue + + +``` +::: + +#### 自定义对话框 +使用modalService可以自定义对话框内的所有内容。 +:::demo + +```vue + + + +``` +::: + +#### 拦截对话框关闭 +通过 beforeHidden 设置在关闭弹出框时的拦截方法。 +:::demo + +```vue + + ``` ::: +#### 信息提示 +各种类型的信息提示框。 :::demo +```vue + + + +``` +::: +#### 更新标准弹出框按钮状态 +通过update方法来更新dialog配置的buttons配置。 +:::demo ```vue +``` +::: + +#### 配置按钮自动获得焦点 +配置dialogService的buttons中的autofocus属性可以设置按钮自动获得焦点，可以通过回车直接触发按钮点击。 +:::demo +```vue + + +``` +::: +#### 通过外层fixed同时避免滚动和抖动 +通过外层fixed同时避免滚动和抖动，在使用这种方式时，页面内所有fixed元素需要给定具体的位置值，使用默认定位值会导致位置偏移。 +:::demo +```vue + + ``` ::: + +### API +Modal 和 Dialog 均以 service 方式来构造。 + +他们通过这种方式引入： +```vue + +{ + setup() { + const modalService = inject('MODAL_SERVICE_TOKEN'); + const dialogService = inject('DIALOG_SERVICE_TOKEN'); + } +} +``` +#### Modal + +ModalService.open(props: ModalOptions) + +ModalOptions 属性 + +| 属性 | 类型 | 默认 | 说明 | +| :---------------: | :-------------------------------------------------------: | :------: | :----------------------------------------------- | +| width | `string` | -- | 可选，弹出框宽度(e.g '300px') | +| zIndex | `number` | 1050 | 可选，弹出框 z-index 值 | +| backdropZIndex | `number` | 1049 | 可选，如果为 true，背景不能滚动 | +| placement | `'center' \| 'top' \| 'bottom'` | 'center' | 可选，弹出框出现的位置 | +| offsetX | `string` | '0px' | 可选，弹出框纵向偏移 | +| offsetY | `string` | '0px' | 可选，弹出框横向偏移 | +| bodyScrollable | `boolean` | true | 可选，modal 打开后，body是否可滚动，默认可滚动。 | +| backdropCloseable | `boolean` | true | 可选，点击空白处是否能关闭弹出框 | +| showAnimation | `boolean` | true | 可选，是否显示动画 | +| escapable | `boolean` | true | 可选，点击背景触发的事件 | +| content | `Slot` | true | 可选，弹出框内容 | +| onClose | `() => void` | -- | 可选，弹出框关闭之后回调的函数 | +| beforeHidden | `(() => Promise \| boolean) \| Promise` | -- | 可选，关闭窗口之前的回调 | + +#### Dialog + +DialogService.open(props: DialogOptions) + +DialogOptions 属性 + +| 属性 | 类型 | 默认 | 说明 | +| :---------------: | :-------------------------------------------------------: | :--------: | :----------------------------------------------------- | +| width | `string` | -- | 可选，弹出框宽度(e.g '300px') | +| zIndex | `number` | 1050 | 可选，弹出框 z-index 值 | +| backdropZIndex | `number` | 1049 | 可选，如果为 true，背景不能滚动 | +| placement | `'center' \| 'top' \| 'bottom'` | 'center' | 可选，弹出框出现的位置 | +| offsetX | `string` | '0px' | 可选，弹出框纵向偏移 | +| offsetY | `string` | '0px' | 可选，弹出框横向偏移 | +| bodyScrollable | `boolean` | true | 可选，modal 打开后，body是否可滚动，默认可滚动。 | +| backdropCloseable | `boolean` | true | 可选，点击空白处是否能关闭弹出框 | +| showAnimation | `boolean` | true | 可选，是否显示动画 | +| escapable | `boolean` | true | 可选，点击背景触发的事件 | +| draggable | `boolean` | true | 可选，弹出框是否可拖拽 | +| dialogType | `'standard'\|'success'\|'failed'\|'warning'\|'info'` | 'standard' | 可选，弹出框类型，有四种选择 | +| title | `string` | -- | 可选，弹出框 title | +| content | `Slot` | -- | 可选，弹出框内容，支持字符串和组件 | +| buttons | `ButtonOptions[]` | [] | 可选，弹出框按钮，支持自定义文本、样式、禁用、点击事件 | +| onClose | `() => void` | -- | 可选，弹出框关闭之后回调的函数 | +| beforeHidden | `(() => Promise \| boolean) \| Promise` | -- | 可选，关闭窗口之前的回调 | + +### Other + +ButtonOptions 定义 +| 属性 | 类型 | 默认 | 说明 | +| :-------: | :-----------------------: | :---: | :----------------- | +| text | `string` | -- | 可选，按钮文本内容 | +| handler | `($event: Event) => void` | -- | 可选，按钮点击事件 | +| autofocus | `boolean` | false | 可选，自动聚焦 | +| disabled | `boolean` | false | 可选，禁用按钮 | + -- Gitee From d10301f64c3553ad4291714bbdfbfa2e8f4d3c68 Mon Sep 17 00:00:00 2001 From: zcating Date: Sun, 3 Oct 2021 23:48:57 +0800 Subject: [PATCH 16/16] =?UTF-8?q?fix(modal):=20=E4=BF=AE=E5=A4=8D=E9=87=8D?= =?UTF-8?q?=E5=A4=8D=20return=20=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- devui/modal/src/services/modal-service.ts | 10 ++++------ 1 file changed, 4 insertions(+), 6 deletions(-) diff --git a/devui/modal/src/services/modal-service.ts b/devui/modal/src/services/modal-service.ts index b3a0c994..6e7ffe2f 100644 --- a/devui/modal/src/services/modal-service.ts +++ b/devui/modal/src/services/modal-service.ts @@ -35,7 +35,7 @@ export class ModalService extends CommonModalService { const anchor = document.createElement('div'); this.anchorContainer.appendChild(anchor); - const {content, ...resProps} = props; + const { content, ...resProps } = props; const needHideOrNot = (value: boolean) => { if (!value) { @@ -47,7 +47,7 @@ export class ModalService extends CommonModalService { ...props, modelValue: true, 'onUpdate:modelValue': onUpdateModelValue - }, {default: content}); + }, { default: content }); } @@ -55,7 +55,7 @@ export class ModalService extends CommonModalService { const hide = () => { const vnode = renderOrigin(resProps, (value: boolean) => { if (!value) { - this.renderModal(anchor, {...resProps, modelValue: false}); + this.renderModal(anchor, { ...resProps, modelValue: false }); this.renderNull(anchor); } else { renderOrigin(resProps); @@ -70,9 +70,7 @@ export class ModalService extends CommonModalService { // 再渲染详细内容 renderOrigin(resProps); - - return { hide } - + return { hide } } } -- Gitee