From 18ad1bcc6e927f70dc16bf7e3c1627c1f7f376f3 Mon Sep 17 00:00:00 2001 From: vben Date: Mon, 11 Jan 2021 21:15:34 +0800 Subject: [PATCH] fix: upload component not work #169 --- src/assets/svg/preview/p-rotate.svg | 1 - src/assets/svg/preview/resume.svg | 1 - src/assets/svg/preview/scale.svg | 1 - src/assets/svg/preview/unrotate.svg | 1 - src/assets/svg/preview/unscale.svg | 1 - src/components/Modal/src/BasicModal.vue | 6 +- .../Modal/src/components/ModalWrapper.vue | 11 +- src/components/Preview/index.ts | 4 - src/components/Preview/src/functional.ts | 22 - src/components/Preview/src/index.less | 118 ----- src/components/Preview/src/index.tsx | 303 ------------ src/components/Preview/src/index.vue | 33 +- src/components/Preview/src/props.ts | 15 - src/components/Preview/src/types.ts | 30 -- .../Table/src/components/TableAction.vue | 11 +- src/components/Upload/src/FileList.tsx | 13 +- src/components/Upload/src/ThumbUrl.vue | 10 +- src/components/Upload/src/UploadModal.vue | 17 +- .../Upload/src/UploadPreviewModal.vue | 17 +- src/components/Upload/src/data.tsx | 36 +- src/views/demo/feat/img-preview/index.vue | 20 +- test/upload-server/README.md | 5 +- test/upload-server/yarn.lock | 467 ++++++++++++++++++ 23 files changed, 566 insertions(+), 577 deletions(-) delete mode 100644 src/assets/svg/preview/p-rotate.svg delete mode 100644 src/assets/svg/preview/resume.svg delete mode 100644 src/assets/svg/preview/scale.svg delete mode 100644 src/assets/svg/preview/unrotate.svg delete mode 100644 src/assets/svg/preview/unscale.svg delete mode 100644 src/components/Preview/src/functional.ts delete mode 100644 src/components/Preview/src/index.less delete mode 100644 src/components/Preview/src/index.tsx delete mode 100644 src/components/Preview/src/props.ts delete mode 100644 src/components/Preview/src/types.ts create mode 100644 test/upload-server/yarn.lock diff --git a/src/assets/svg/preview/p-rotate.svg b/src/assets/svg/preview/p-rotate.svg deleted file mode 100644 index fc6cc80e..00000000 --- a/src/assets/svg/preview/p-rotate.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svg/preview/resume.svg b/src/assets/svg/preview/resume.svg deleted file mode 100644 index 94676114..00000000 --- a/src/assets/svg/preview/resume.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svg/preview/scale.svg b/src/assets/svg/preview/scale.svg deleted file mode 100644 index 4c1dea73..00000000 --- a/src/assets/svg/preview/scale.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svg/preview/unrotate.svg b/src/assets/svg/preview/unrotate.svg deleted file mode 100644 index 82d28d13..00000000 --- a/src/assets/svg/preview/unrotate.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/assets/svg/preview/unscale.svg b/src/assets/svg/preview/unscale.svg deleted file mode 100644 index 6aa8d48a..00000000 --- a/src/assets/svg/preview/unscale.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/src/components/Modal/src/BasicModal.vue b/src/components/Modal/src/BasicModal.vue index a3afa0a4..d530f61e 100644 --- a/src/components/Modal/src/BasicModal.vue +++ b/src/components/Modal/src/BasicModal.vue @@ -14,7 +14,11 @@ maxHeight ? maxHeight - : realHeight + 46; + : realHeight; } emit('height-change', unref(realHeightRef)); } catch (error) { diff --git a/src/components/Preview/index.ts b/src/components/Preview/index.ts index eebe6cab..bc62f160 100644 --- a/src/components/Preview/index.ts +++ b/src/components/Preview/index.ts @@ -1,7 +1,3 @@ -// export { createImgPreview } from './src/functional'; - -export const createImgPreview = () => {}; - // import { createAsyncComponent } from '/@/utils/factory/createAsyncComponent'; // export const ImagePreview = createAsyncComponent(() => import('./src/index.vue')); diff --git a/src/components/Preview/src/functional.ts b/src/components/Preview/src/functional.ts deleted file mode 100644 index 0f9eba0a..00000000 --- a/src/components/Preview/src/functional.ts +++ /dev/null @@ -1,22 +0,0 @@ -import ImgPreview from './index'; -import { isClient } from '/@/utils/is'; - -import type { Options, Props } from './types'; - -import { createVNode, render } from 'vue'; - -let instance: any = null; -export function createImgPreview(options: Options) { - if (!isClient) return; - const { imageList, show = true, index = 0 } = options; - - const propsData: Partial = {}; - const container = document.createElement('div'); - propsData.imageList = imageList; - propsData.show = show; - propsData.index = index; - - instance = createVNode(ImgPreview, propsData); - render(instance, container); - document.body.appendChild(container); -} diff --git a/src/components/Preview/src/index.less b/src/components/Preview/src/index.less deleted file mode 100644 index 0732a24d..00000000 --- a/src/components/Preview/src/index.less +++ /dev/null @@ -1,118 +0,0 @@ -.img-preview { - position: fixed; - top: 0; - right: 0; - bottom: 0; - left: 0; - z-index: @preview-comp-z-index; - background: rgba(0, 0, 0, 0.5); - user-select: none; - - &-content { - display: flex; - width: 100%; - height: 100%; - color: @white; - justify-content: center; - align-items: center; - } - - &-image { - cursor: pointer; - transition: transform 0.3s; - } - - &__close { - position: absolute; - top: -40px; - right: -40px; - width: 80px; - height: 80px; - overflow: hidden; - color: @white; - cursor: pointer; - background-color: rgba(0, 0, 0, 0.5); - border-radius: 50%; - transition: all 0.2s; - - &-icon { - position: absolute; - top: 46px; - left: 16px; - font-size: 16px; - } - - &:hover { - background-color: rgba(0, 0, 0, 0.8); - } - } - - &__index { - position: absolute; - bottom: 5%; - left: 50%; - padding: 0 22px; - font-size: 16px; - background: rgba(109, 109, 109, 0.6); - border-radius: 15px; - transform: translateX(-50%); - } - - &__controller { - position: absolute; - bottom: 10%; - left: 50%; - display: flex; - width: 260px; - height: 44px; - padding: 0 22px; - margin-left: -139px; - background: rgba(109, 109, 109, 0.6); - border-radius: 22px; - justify-content: center; - - &-item { - display: flex; - height: 100%; - padding: 0 9px; - font-size: 24px; - cursor: pointer; - transition: all 0.2s; - - &:hover { - transform: scale(1.2); - } - - img { - width: 1em; - } - } - } - - &__arrow { - position: absolute; - top: 50%; - display: flex; - align-items: center; - justify-content: center; - width: 50px; - height: 50px; - font-size: 28px; - cursor: pointer; - background-color: rgba(0, 0, 0, 0.5); - border-radius: 50%; - transition: all 0.2s; - - &:hover { - background-color: rgba(0, 0, 0, 0.8); - } - - &.left { - left: 50px; - } - - &.right { - right: 50px; - } - } -} diff --git a/src/components/Preview/src/index.tsx b/src/components/Preview/src/index.tsx deleted file mode 100644 index 8d915605..00000000 --- a/src/components/Preview/src/index.tsx +++ /dev/null @@ -1,303 +0,0 @@ -import './index.less'; - -import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue'; - -import { basicProps } from './props'; -import { Props } from './types'; - -import { CloseOutlined, LeftOutlined, RightOutlined, LoadingOutlined } from '@ant-design/icons-vue'; -import { Spin } from 'ant-design-vue'; - -import resumeSvg from '/@/assets/svg/preview/resume.svg'; -import rotateSvg from '/@/assets/svg/preview/p-rotate.svg'; -import scaleSvg from '/@/assets/svg/preview/scale.svg'; -import unScaleSvg from '/@/assets/svg/preview/unscale.svg'; -import unRotateSvg from '/@/assets/svg/preview/unrotate.svg'; -enum StatueEnum { - LOADING, - DONE, - FAIL, -} -interface ImgState { - currentUrl: string; - imgScale: number; - imgRotate: number; - imgTop: number; - imgLeft: number; - currentIndex: number; - status: StatueEnum; - moveX: number; - moveY: number; - show: boolean; -} - -const prefixCls = 'img-preview'; -export default defineComponent({ - name: 'ImagePreview', - props: basicProps, - setup(props: Props) { - const imgState = reactive({ - currentUrl: '', - imgScale: 1, - imgRotate: 0, - imgTop: 0, - imgLeft: 0, - status: StatueEnum.LOADING, - currentIndex: 0, - moveX: 0, - moveY: 0, - show: props.show, - }); - - const wrapElRef = ref(null); - const imgElRef = ref(null); - - // 初始化 - function init() { - initMouseWheel(); - const { index, imageList } = props; - - if (!imageList || !imageList.length) { - throw new Error('imageList is undefined'); - } - imgState.currentIndex = index; - handleIChangeImage(imageList[index]); - } - - // 重置 - function initState() { - imgState.imgScale = 1; - imgState.imgRotate = 0; - imgState.imgTop = 0; - imgState.imgLeft = 0; - } - - // 初始化鼠标滚轮事件 - function initMouseWheel() { - const wrapEl = unref(wrapElRef); - if (!wrapEl) { - return; - } - (wrapEl as any).onmousewheel = scrollFunc; - // 火狐浏览器没有onmousewheel事件，用DOMMouseScroll代替 - document.body.addEventListener('DOMMouseScroll', scrollFunc); - // 禁止火狐浏览器下拖拽图片的默认事件 - document.ondragstart = function () { - return false; - }; - } - - // 监听鼠标滚轮 - function scrollFunc(e: any) { - e = e || window.event; - e.delta = e.wheelDelta || -e.detail; - - e.preventDefault(); - if (e.delta > 0) { - // 滑轮向上滚动 - scaleFunc(0.015); - } - if (e.delta < 0) { - // 滑轮向下滚动 - scaleFunc(-0.015); - } - } - // 缩放函数 - function scaleFunc(num: number) { - if (imgState.imgScale <= 0.2 && num < 0) return; - imgState.imgScale += num; - } - - // 旋转图片 - function rotateFunc(deg: number) { - imgState.imgRotate += deg; - } - - // 鼠标事件 - function handleMouseUp() { - const imgEl = unref(imgElRef); - if (!imgEl) return; - imgEl.onmousemove = null; - } - - // 更换图片 - function handleIChangeImage(url: string) { - imgState.status = StatueEnum.LOADING; - const img = new Image(); - img.src = url; - img.onload = () => { - imgState.currentUrl = url; - imgState.status = StatueEnum.DONE; - }; - img.onerror = () => { - imgState.status = StatueEnum.FAIL; - }; - } - - // 关闭 - function handleClose(e: MouseEvent) { - e && e.stopPropagation(); - imgState.show = false; - // 移除火狐浏览器下的鼠标滚动事件 - document.body.removeEventListener('DOMMouseScroll', scrollFunc); - // 恢复火狐及Safari浏览器下的图片拖拽 - document.ondragstart = null; - } - - // 图片复原 - function resume() { - initState(); - } - - // 上一页下一页 - function handleChange(direction: 'left' | 'right') { - const { currentIndex } = imgState; - const { imageList } = props; - if (direction === 'left') { - imgState.currentIndex--; - if (currentIndex <= 0) { - imgState.currentIndex = imageList.length - 1; - } - } - if (direction === 'right') { - imgState.currentIndex++; - if (currentIndex >= imageList.length - 1) { - imgState.currentIndex = 0; - } - } - handleIChangeImage(imageList[imgState.currentIndex]); - } - - function handleAddMoveListener(e: MouseEvent) { - e = e || window.event; - imgState.moveX = e.clientX; - imgState.moveY = e.clientY; - const imgEl = unref(imgElRef); - if (imgEl) { - imgEl.onmousemove = moveFunc; - } - } - - function moveFunc(e: MouseEvent) { - e = e || window.event; - e.preventDefault(); - const movementX = e.clientX - imgState.moveX; - const movementY = e.clientY - imgState.moveY; - imgState.imgLeft += movementX; - imgState.imgTop += movementY; - imgState.moveX = e.clientX; - imgState.moveY = e.clientY; - } - - // 获取图片样式 - const getImageStyle = computed(() => { - const { imgScale, imgRotate, imgTop, imgLeft } = imgState; - return { - transform: `scale(${imgScale}) rotate(${imgRotate}deg)`, - marginTop: `${imgTop}px`, - marginLeft: `${imgLeft}px`, - }; - }); - - const getIsMultipleImage = computed(() => { - const { imageList } = props; - return imageList.length > 1; - }); - - watchEffect(() => { - if (props.show) { - init(); - } - if (props.imageList) { - initState(); - } - }); - - const renderClose = () => { - return ( -
- -
- ); - }; - - const renderIndex = () => { - if (!unref(getIsMultipleImage)) { - return null; - } - const { currentIndex } = imgState; - const { imageList } = props; - return ( -
- {currentIndex + 1} / {imageList.length} -
- ); - }; - - const renderController = () => { - return ( -
-
scaleFunc(-0.15)}> - -
-
scaleFunc(0.15)}> - -
-
- -
-
rotateFunc(-90)}> - -
-
rotateFunc(90)}> - -
-
- ); - }; - - const renderArrow = (direction: 'left' | 'right') => { - if (!unref(getIsMultipleImage)) { - return null; - } - return ( -
handleChange(direction)}> - {direction === 'left' ? : } -
- ); - }; - - return () => { - return ( - imgState.show && ( -
-
- } - spinning={true} - class={[ - `${prefixCls}-image`, - { - hidden: imgState.status !== StatueEnum.LOADING, - }, - ]} - /> - - {renderClose()} - {renderIndex()} - {renderController()} - {renderArrow('left')} - {renderArrow('right')} -
-
- ) - ); - }; - }, -}); diff --git a/src/components/Preview/src/index.vue b/src/components/Preview/src/index.vue index b80e6bdd..ba621008 100644 --- a/src/components/Preview/src/index.vue +++ b/src/components/Preview/src/index.vue @@ -1,16 +1,18 @@