From cccf2f2496a3e71dccccff069b78ecc2bb7404a1 Mon Sep 17 00:00:00 2001 From: duqingyu <1065161421@qq.com> Date: Wed, 1 Dec 2021 18:21:09 +0800 Subject: [PATCH 1/2] =?UTF-8?q?feat(imagePreview):=E7=94=B1=E4=BA=8Emodal?= =?UTF-8?q?=E6=9C=AA=E5=AE=8C=E5=85=A8=E5=BC=80=E5=8F=91=E5=AE=8C=EF=BC=8C?= =?UTF-8?q?=E6=9A=82=E6=97=B6=E6=89=8B=E5=8A=A8=E5=AE=9E=E7=8E=B0zIndex?= =?UTF-8?q?=E6=8E=A7=E5=88=B6=E5=B1=82=E7=BA=A7=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../src/image-preview-directive.ts | 40 +++- .../image-preview/src/image-preview-types.ts | 14 +- .../image-preview/src/image-preview.scss | 16 +- .../devui/image-preview/src/image-preview.tsx | 224 +++++++++--------- 4 files changed, 171 insertions(+), 123 deletions(-) diff --git a/packages/devui-vue/devui/image-preview/src/image-preview-directive.ts b/packages/devui-vue/devui/image-preview/src/image-preview-directive.ts index 5317dff6..471fee80 100644 --- a/packages/devui-vue/devui/image-preview/src/image-preview-directive.ts +++ b/packages/devui-vue/devui/image-preview/src/image-preview-directive.ts @@ -1,8 +1,18 @@ -import { BindingTypes } from './image-preview-types' +import { BindingTypes, ImagePreviewProps } from './image-preview-types' import ImagePreviewService from './image-preview-service' -function mountedPreviewImages(url: string, urlList: Array): void { - ImagePreviewService.open({ url, previewUrlList: urlList }) +interface PreviewHTMLElement extends HTMLElement { + zIndex?: number + backDropZIndex?: number +} + +function mountedPreviewImages(props: ImagePreviewProps): void { + ImagePreviewService.open({ + url: props.url, + previewUrlList: props.previewUrlList, + zIndex: props.zIndex, + backDropZIndex: props.backDropZIndex + }) } function unmountedPreviewImages() { ImagePreviewService.close() @@ -15,20 +25,25 @@ function getImgByEl(el: HTMLElement): Array { return urlList } -function handleImgByEl(el: HTMLElement) { +function handleImgByEl(el: PreviewHTMLElement) { el.addEventListener('click', (e: MouseEvent) => { e.stopPropagation() - const target = e.target as HTMLElement + const target = e.target as PreviewHTMLElement if (target?.nodeName?.toLowerCase() === 'img') { const urlList = getImgByEl(el) const url = target.getAttribute('src') - mountedPreviewImages(url, urlList) + mountedPreviewImages({ + url, + previewUrlList: urlList, + zIndex: el?.zIndex, + backDropZIndex: el?.backDropZIndex + }) } }) } export default { - mounted(el: HTMLElement, binding: BindingTypes | undefined) { + mounted(el: PreviewHTMLElement, binding: BindingTypes | undefined) { if (!binding.value) { return handleImgByEl(el) } @@ -37,7 +52,12 @@ export default { if (custom instanceof Object) { custom.open = () => { const urlList = getImgByEl(el) - mountedPreviewImages(urlList?.[0], urlList) + mountedPreviewImages({ + url: urlList?.[0], + previewUrlList: urlList, + zIndex: el?.zIndex, + backDropZIndex: el?.backDropZIndex + }) } custom.close = () => unmountedPreviewImages() } @@ -48,5 +68,9 @@ export default { }, unmounted() { unmountedPreviewImages() + }, + updated(el: PreviewHTMLElement, binding) { + el.zIndex = binding.value?.zIndex + el.backDropZIndex = binding.value?.backDropZIndex } } diff --git a/packages/devui-vue/devui/image-preview/src/image-preview-types.ts b/packages/devui-vue/devui/image-preview/src/image-preview-types.ts index 1f4053cb..c98bc03c 100644 --- a/packages/devui-vue/devui/image-preview/src/image-preview-types.ts +++ b/packages/devui-vue/devui/image-preview/src/image-preview-types.ts @@ -3,11 +3,21 @@ import type { PropType, ExtractPropTypes } from 'vue' export const imagePreviewProps = { url: { type: String, - default: '' + default: '', + required: true }, previewUrlList: { type: Array as PropType, - default: () => [] + default: () => [], + required: true + }, + zIndex: { + type: Number, + required: false + }, + backDropZIndex: { + type: Number, + required: false } } as const diff --git a/packages/devui-vue/devui/image-preview/src/image-preview.scss b/packages/devui-vue/devui/image-preview/src/image-preview.scss index 28a4f786..49c07261 100644 --- a/packages/devui-vue/devui/image-preview/src/image-preview.scss +++ b/packages/devui-vue/devui/image-preview/src/image-preview.scss @@ -9,10 +9,7 @@ top: 0; right: 0; bottom: 0; - z-index: calc(#{$devui-z-index-modal} - 1); - background: $devui-shadow; - border-radius: $devui-border-radius; - box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow; + z-index: calc(#{$devui-z-index-modal}); display: flex; align-items: center; justify-content: center; @@ -113,3 +110,14 @@ } } } +.devui-image-preview-bg { + position: fixed; + left: 0; + top: 0; + right: 0; + bottom: 0; + z-index: calc(#{$devui-z-index-modal} - 1); + background: $devui-shadow; + border-radius: $devui-border-radius; + box-shadow: $devui-shadow-length-fullscreen-overlay $devui-shadow; +} diff --git a/packages/devui-vue/devui/image-preview/src/image-preview.tsx b/packages/devui-vue/devui/image-preview/src/image-preview.tsx index 3076a4e2..052e73db 100644 --- a/packages/devui-vue/devui/image-preview/src/image-preview.tsx +++ b/packages/devui-vue/devui/image-preview/src/image-preview.tsx @@ -1,5 +1,5 @@ import './image-preview.scss' -import { defineComponent, ref, computed, onMounted, onUnmounted } from 'vue' +import { defineComponent, Fragment, ref, computed, onMounted, onUnmounted } from 'vue' import { imagePreviewProps, ImagePreviewProps } from './image-preview-types' import ImagePreviewService from './image-preview-service' import Transform from './transform' @@ -13,6 +13,9 @@ export default defineComponent({ const index = ref(0) const url = computed(() => props.previewUrlList[index.value]) + const imageStyle = props.zIndex ? { zIndex: props.zIndex } : {} + const bgStyle = props.backDropZIndex ? { zIndex: props.backDropZIndex } : {} + function initTransform() { const imageElement: HTMLImageElement = document.querySelector( '.devui-image-preview-main-image' @@ -20,7 +23,7 @@ export default defineComponent({ transform = new Transform(imageElement) } function initIndex() { - index.value = props.previewUrlList.findIndex(curUrl => curUrl === props.url) + index.value = props.previewUrlList.findIndex((curUrl) => curUrl === props.url) } function onPrev() { index.value = index.value <= 0 ? props.previewUrlList.length - 1 : index.value - 1 @@ -47,15 +50,15 @@ export default defineComponent({ transform.setZoomOriginal() } - function onKeyDown(event:KeyboardEvent) { - if(event.defaultPrevented) return; + function onKeyDown(event: KeyboardEvent) { + if (event.defaultPrevented) return - if(event.code == 'Escape') { - onClose(); - }else if(event.code == 'ArrowLeft') { - onPrev(); - }else if(event.code == 'ArrowRight') { - onNext(); + if (event.code == 'Escape') { + onClose() + } else if (event.code == 'ArrowLeft') { + onPrev() + } else if (event.code == 'ArrowRight') { + onNext() } } function initKeyboard() { @@ -70,122 +73,125 @@ export default defineComponent({ initTransform() initKeyboard() }) - onUnmounted(()=>{ - unKeyBoard(); - }) + onUnmounted(() => { + unKeyBoard() + }) return () => { return ( -
- {/* 预览图 */} - - {/* 按钮区 */} - - - - {/* 底部固定区 */} -
- - - - - - {index.value + 1}:{props.previewUrlList.length} - - + {/* 底部固定区 */} +
+ + + + + + {index.value + 1}:{props.previewUrlList.length} + + + + +
-
+
+ ) } } -- Gitee From 2134dc826f258382538db1753721939afa988009 Mon Sep 17 00:00:00 2001 From: duqingyu <1065161421@qq.com> Date: Wed, 1 Dec 2021 18:28:31 +0800 Subject: [PATCH 2/2] =?UTF-8?q?docs(imagePreview):=20=E6=96=B0=E5=A2=9EzIn?= =?UTF-8?q?dex=E5=B1=82=E7=BA=A7=E5=8A=9F=E8=83=BD=E7=9B=B8=E5=85=B3?= =?UTF-8?q?=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../docs/components/image-preview/index.md | 178 +++++++++++------- 1 file changed, 108 insertions(+), 70 deletions(-) diff --git a/packages/devui-vue/docs/components/image-preview/index.md b/packages/devui-vue/docs/components/image-preview/index.md index 25ebc6a2..c16c4fc0 100644 --- a/packages/devui-vue/docs/components/image-preview/index.md +++ b/packages/devui-vue/docs/components/image-preview/index.md @@ -9,6 +9,7 @@ ### 基本用法 :::demo 使用 v-d-image-preview 指令，对容器内图片进行预览。 + ```vue - - +}) + ``` + ::: ### 自定义开启预览窗口 :::demo 传入 custom 参数,指令会自动注入 open 方法，通过 custom.open 开启预览窗口 + ```vue - - +}) + ``` + ::: ### 设置 zIndex -通过设置 zIndex 控制弹出效果的层级，设置 backDropZIndex 控制弹出层背景的层级。 -可以看到当设置 zIndex 小于 backDropZIndex 时，imagePreview 会显示在背景下方。 -可以通过 Esc 关闭 imagePreview。 +:::demo 通过设置 zIndex 控制弹出效果的层级，设置 backDropZIndex 控制弹出层背景的层级。可以看到当设置 zIndex 小于 backDropZIndex 时，imagePreview 会显示在背景下方。可以通过 Esc 关闭 imagePreview。 -``` -// 待嵌入 modal 组件即可 +```vue + + ``` +::: ### API @@ -120,4 +139,23 @@ | zIndex | `Number` | 1050 | 可选，可选，设置预览时图片的 z-index 值 | | backDropZIndex | `Number` | 1040 | 可选，设置预览时图片背景的 z-index 值 | - + -- Gitee