From e6093aa4f48f3b3c16b1640c56512e6e3cf84c4b Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E9=99=88=E6=96=87=E5=BD=AC?= Date: Wed, 7 Oct 2020 10:11:25 +0800 Subject: [PATCH] feat(img-preview): add imgPreview componnt --- package.json | 12 +-- src/components/Drawer/src/index.less | 2 +- src/components/Preview/src/index.tsx | 108 +++++++++----------- src/components/Preview/src/props.ts | 5 - src/router/menus/modules/demo/feat.ts | 8 +- src/views/demo/feat/img-preview/index.vue | 8 +- yarn.lock | 114 +++++++++++----------- 7 files changed, 119 insertions(+), 138 deletions(-) diff --git a/package.json b/package.json index 6034b4db..8d9cf673 100644 --- a/package.json +++ b/package.json @@ -26,11 +26,11 @@ "lodash-es": "^4.17.15", "mockjs": "^1.1.0", "nprogress": "^0.2.0", - "path-to-regexp": "^6.1.0", + "path-to-regexp": "^6.2.0", "qrcode": "^1.4.4", "vue": "^3.0.0", - "vue-i18n": "^9.0.0-beta.3", - "vue-router": "^4.0.0-beta.12", + "vue-i18n": "^9.0.0-beta.4", + "vue-router": "^4.0.0-beta.13", "vuex": "^4.0.0-beta.4", "vuex-module-decorators": "^1.0.1", "zxcvbn": "^4.4.2" @@ -51,8 +51,8 @@ "@types/rollup-plugin-visualizer": "^2.6.0", "@types/shelljs": "^0.8.8", "@types/zxcvbn": "^4.4.0", - "@typescript-eslint/eslint-plugin": "^4.2.0", - "@typescript-eslint/parser": "^4.2.0", + "@typescript-eslint/eslint-plugin": "^4.4.0", + "@typescript-eslint/parser": "^4.4.0", "@vue/compiler-sfc": "^3.0.0", "autoprefixer": "^9.8.6", "babel-plugin-import": "^1.13.0", @@ -63,7 +63,7 @@ "eslint": "^7.10.0", "eslint-config-prettier": "^6.12.0", "eslint-plugin-prettier": "^3.1.4", - "eslint-plugin-vue": "^7.0.0-beta.4", + "eslint-plugin-vue": "^7.0.1", "fs-extra": "^9.0.1", "husky": "^4.3.0", "inquirer": "^7.3.3", diff --git a/src/components/Drawer/src/index.less b/src/components/Drawer/src/index.less index a0d7e344..4fba57b6 100644 --- a/src/components/Drawer/src/index.less +++ b/src/components/Drawer/src/index.less @@ -1,5 +1,5 @@ @import (reference) '../../../design/index.less'; -@header-height: 50px; +@header-height: 40px; @footer-height: 60px; .basic-drawer { diff --git a/src/components/Preview/src/index.tsx b/src/components/Preview/src/index.tsx index 79a84ff6..2e05a1be 100644 --- a/src/components/Preview/src/index.tsx +++ b/src/components/Preview/src/index.tsx @@ -1,6 +1,4 @@ -import { defineComponent, ref, unref, computed, reactive, watch } from 'vue'; - -import { FadeTransition } from '/@/components/Transition/index'; +import { defineComponent, ref, unref, computed, reactive, watchEffect } from 'vue'; import { basicProps } from './props'; import { Props } from './types'; @@ -11,9 +9,9 @@ import { CloseOutlined, LeftOutlined, RightOutlined } from '@ant-design/icons-vu 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 unScaleSvg from '/@/assets/svg/preview/unscale.svg'; import loadingSvg from '/@/assets/images/loading.svg'; -import unrotateSvg from '/@/assets/svg/preview/unrotate.svg'; +import unRotateSvg from '/@/assets/svg/preview/unrotate.svg'; enum StatueEnum { LOADING, DONE, @@ -29,6 +27,7 @@ interface ImgState { status: StatueEnum; moveX: number; moveY: number; + show: boolean; } const prefixCls = 'img-preview'; @@ -46,7 +45,9 @@ export default defineComponent({ currentIndex: 0, moveX: 0, moveY: 0, + show: props.show, }); + const wrapElRef = ref(null); const imgElRef = ref(null); @@ -133,16 +134,15 @@ export default defineComponent({ } // 关闭 - function handleClose() { - const { instance } = props; - if (instance) { - instance.show = false; - } + function handleClose(e: MouseEvent) { + e && e.stopPropagation(); + imgState.show = false; // 移除火狐浏览器下的鼠标滚动事件 document.body.removeEventListener('DOMMouseScroll', scrollFunc); // 恢复火狐及Safari浏览器下的图片拖拽 document.ondragstart = null; } + // 图片复原 function resume() { initState(); @@ -202,26 +202,15 @@ export default defineComponent({ const { imageList } = props; return imageList.length > 1; }); - watch( - () => props.show, - (show) => { - if (show) { - init(); - } - }, - { - immediate: true, + + watchEffect(() => { + if (props.show) { + init(); } - ); - watch( - () => props.imageList, - () => { + if (props.imageList) { initState(); - }, - { - immediate: true, } - ); + }); const renderClose = () => { return ( @@ -247,7 +236,7 @@ export default defineComponent({ return (
scaleFunc(-0.15)}> - +
scaleFunc(0.15)}> @@ -256,7 +245,7 @@ export default defineComponent({
rotateFunc(-90)}> - +
rotateFunc(90)}> @@ -277,41 +266,32 @@ export default defineComponent({ }; return () => { return ( - - {() => - props.show && ( -
-
- - - - {renderClose()} - {renderIndex()} - {renderController()} - {renderArrow('left')} - {renderArrow('right')} -
-
- ) - } - + imgState.show && ( +
+
+ + + {renderClose()} + {renderIndex()} + {renderController()} + {renderArrow('left')} + {renderArrow('right')} +
+
+ ) ); }; }, diff --git a/src/components/Preview/src/props.ts b/src/components/Preview/src/props.ts index 796a5ce3..c6d7c8af 100644 --- a/src/components/Preview/src/props.ts +++ b/src/components/Preview/src/props.ts @@ -1,14 +1,9 @@ import { PropType } from 'vue'; -import { Props } from './types'; export const basicProps = { show: { type: Boolean as PropType, default: false, }, - instance: { - type: Object as PropType, - default: null, - }, imageList: { type: [Array] as PropType, default: null, diff --git a/src/router/menus/modules/demo/feat.ts b/src/router/menus/modules/demo/feat.ts index d09d2190..685029b4 100644 --- a/src/router/menus/modules/demo/feat.ts +++ b/src/router/menus/modules/demo/feat.ts @@ -13,10 +13,10 @@ const menu: MenuModule = { path: '/context-menu', name: '右键菜单', }, - // { - // path: '/img-preview', - // name: '图片预览', - // }, + { + path: '/img-preview', + name: '图片预览', + }, { path: '/i18n', name: '国际化', diff --git a/src/views/demo/feat/img-preview/index.vue b/src/views/demo/feat/img-preview/index.vue index 30bad1db..5fcab4ef 100644 --- a/src/views/demo/feat/img-preview/index.vue +++ b/src/views/demo/feat/img-preview/index.vue @@ -4,6 +4,8 @@
+ + 预览图片
diff --git a/yarn.lock b/yarn.lock index e2becbf6..9718e27b 100644 --- a/yarn.lock +++ b/yarn.lock @@ -803,61 +803,61 @@ resolved "https://registry.npm.taobao.org/@types/zxcvbn/download/@types/zxcvbn-4.4.0.tgz#fbc1d941cc6d9d37d18405c513ba6b294f89b609" integrity sha1-+8HZQcxtnTfRhAXFE7prKU+Jtgk= -"@typescript-eslint/eslint-plugin@^4.2.0": - version "4.3.0" - resolved "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Feslint-plugin%2Fdownload%2F%40typescript-eslint%2Feslint-plugin-4.3.0.tgz#1a23d904bf8ea248d09dc3761af530d90f39c8fa" - integrity sha1-GiPZBL+OokjQncN2GvUw2Q85yPo= +"@typescript-eslint/eslint-plugin@^4.4.0": + version "4.4.0" + resolved "https://registry.npm.taobao.org/@typescript-eslint/eslint-plugin/download/@typescript-eslint/eslint-plugin-4.4.0.tgz?cache=0&sync_timestamp=1601919840869&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Feslint-plugin%2Fdownload%2F%40typescript-eslint%2Feslint-plugin-4.4.0.tgz#0321684dd2b902c89128405cf0385e9fe8561934" + integrity sha1-AyFoTdK5AsiRKEBc8Dhen+hWGTQ= dependencies: - "@typescript-eslint/experimental-utils" "4.3.0" - "@typescript-eslint/scope-manager" "4.3.0" + "@typescript-eslint/experimental-utils" "4.4.0" + "@typescript-eslint/scope-manager" "4.4.0" debug "^4.1.1" functional-red-black-tree "^1.0.1" regexpp "^3.0.0" semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/experimental-utils@4.3.0": - version "4.3.0" - resolved "https://registry.npm.taobao.org/@typescript-eslint/experimental-utils/download/@typescript-eslint/experimental-utils-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fexperimental-utils%2Fdownload%2F%40typescript-eslint%2Fexperimental-utils-4.3.0.tgz#3f3c6c508e01b8050d51b016e7f7da0e3aefcb87" - integrity sha1-PzxsUI4BuAUNUbAW5/faDjrvy4c= +"@typescript-eslint/experimental-utils@4.4.0": + version "4.4.0" + resolved "https://registry.npm.taobao.org/@typescript-eslint/experimental-utils/download/@typescript-eslint/experimental-utils-4.4.0.tgz?cache=0&sync_timestamp=1601919839188&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fexperimental-utils%2Fdownload%2F%40typescript-eslint%2Fexperimental-utils-4.4.0.tgz#62a05d3f543b8fc5dec4982830618ea4d030e1a9" + integrity sha1-YqBdP1Q7j8XexJgoMGGOpNAw4ak= dependencies: "@types/json-schema" "^7.0.3" - "@typescript-eslint/scope-manager" "4.3.0" - "@typescript-eslint/types" "4.3.0" - "@typescript-eslint/typescript-estree" "4.3.0" + "@typescript-eslint/scope-manager" "4.4.0" + "@typescript-eslint/types" "4.4.0" + "@typescript-eslint/typescript-estree" "4.4.0" eslint-scope "^5.0.0" eslint-utils "^2.0.0" -"@typescript-eslint/parser@^4.2.0": - version "4.3.0" - resolved "https://registry.npm.taobao.org/@typescript-eslint/parser/download/@typescript-eslint/parser-4.3.0.tgz#684fc0be6551a2bfcb253991eec3c786a8c063a3" - integrity sha1-aE/AvmVRor/LJTmR7sPHhqjAY6M= +"@typescript-eslint/parser@^4.4.0": + version "4.4.0" + resolved "https://registry.npm.taobao.org/@typescript-eslint/parser/download/@typescript-eslint/parser-4.4.0.tgz?cache=0&sync_timestamp=1601919839967&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fparser%2Fdownload%2F%40typescript-eslint%2Fparser-4.4.0.tgz#65974db9a75f23b036f17b37e959b5f99b659ec0" + integrity sha1-ZZdNuadfI7A28Xs36Vm1+ZtlnsA= dependencies: - "@typescript-eslint/scope-manager" "4.3.0" - "@typescript-eslint/types" "4.3.0" - "@typescript-eslint/typescript-estree" "4.3.0" + "@typescript-eslint/scope-manager" "4.4.0" + "@typescript-eslint/types" "4.4.0" + "@typescript-eslint/typescript-estree" "4.4.0" debug "^4.1.1" -"@typescript-eslint/scope-manager@4.3.0": - version "4.3.0" - resolved "https://registry.npm.taobao.org/@typescript-eslint/scope-manager/download/@typescript-eslint/scope-manager-4.3.0.tgz?cache=0&sync_timestamp=1601316727982&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fscope-manager%2Fdownload%2F%40typescript-eslint%2Fscope-manager-4.3.0.tgz#c743227e087545968080d2362cfb1273842cb6a7" - integrity sha1-x0Mifgh1RZaAgNI2LPsSc4Qstqc= +"@typescript-eslint/scope-manager@4.4.0": + version "4.4.0" + resolved "https://registry.npm.taobao.org/@typescript-eslint/scope-manager/download/@typescript-eslint/scope-manager-4.4.0.tgz#2f3dd27692a12cc9a046a90ba6a9d8cb7731190a" + integrity sha1-Lz3SdpKhLMmgRqkLpqnYy3cxGQo= dependencies: - "@typescript-eslint/types" "4.3.0" - "@typescript-eslint/visitor-keys" "4.3.0" + "@typescript-eslint/types" "4.4.0" + "@typescript-eslint/visitor-keys" "4.4.0" -"@typescript-eslint/types@4.3.0": - version "4.3.0" - resolved "https://registry.npm.taobao.org/@typescript-eslint/types/download/@typescript-eslint/types-4.3.0.tgz?cache=0&sync_timestamp=1601314224991&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypes%2Fdownload%2F%40typescript-eslint%2Ftypes-4.3.0.tgz#1f0b2d5e140543e2614f06d48fb3ae95193c6ddf" - integrity sha1-HwstXhQFQ+JhTwbUj7OulRk8bd8= +"@typescript-eslint/types@4.4.0": + version "4.4.0" + resolved "https://registry.npm.taobao.org/@typescript-eslint/types/download/@typescript-eslint/types-4.4.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypes%2Fdownload%2F%40typescript-eslint%2Ftypes-4.4.0.tgz#63440ef87a54da7399a13bdd4b82060776e9e621" + integrity sha1-Y0QO+HpU2nOZoTvdS4IGB3bp5iE= -"@typescript-eslint/typescript-estree@4.3.0": - version "4.3.0" - resolved "https://registry.npm.taobao.org/@typescript-eslint/typescript-estree/download/@typescript-eslint/typescript-estree-4.3.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypescript-estree%2Fdownload%2F%40typescript-eslint%2Ftypescript-estree-4.3.0.tgz#0edc1068e6b2e4c7fdc54d61e329fce76241cee8" - integrity sha1-DtwQaOay5Mf9xU1h4yn852JBzug= +"@typescript-eslint/typescript-estree@4.4.0": + version "4.4.0" + resolved "https://registry.npm.taobao.org/@typescript-eslint/typescript-estree/download/@typescript-eslint/typescript-estree-4.4.0.tgz?cache=0&sync_timestamp=1601919838540&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Ftypescript-estree%2Fdownload%2F%40typescript-eslint%2Ftypescript-estree-4.4.0.tgz#16a2df7c16710ddd5406b32b86b9c1124b1ca526" + integrity sha1-FqLffBZxDd1UBrMrhrnBEkscpSY= dependencies: - "@typescript-eslint/types" "4.3.0" - "@typescript-eslint/visitor-keys" "4.3.0" + "@typescript-eslint/types" "4.4.0" + "@typescript-eslint/visitor-keys" "4.4.0" debug "^4.1.1" globby "^11.0.1" is-glob "^4.0.1" @@ -865,12 +865,12 @@ semver "^7.3.2" tsutils "^3.17.1" -"@typescript-eslint/visitor-keys@4.3.0": - version "4.3.0" - resolved "https://registry.npm.taobao.org/@typescript-eslint/visitor-keys/download/@typescript-eslint/visitor-keys-4.3.0.tgz?cache=0&sync_timestamp=1601314225045&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fvisitor-keys%2Fdownload%2F%40typescript-eslint%2Fvisitor-keys-4.3.0.tgz#0e5ab0a09552903edeae205982e8521e17635ae0" - integrity sha1-DlqwoJVSkD7eriBZguhSHhdjWuA= +"@typescript-eslint/visitor-keys@4.4.0": + version "4.4.0" + resolved "https://registry.npm.taobao.org/@typescript-eslint/visitor-keys/download/@typescript-eslint/visitor-keys-4.4.0.tgz?cache=0&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2F%40typescript-eslint%2Fvisitor-keys%2Fdownload%2F%40typescript-eslint%2Fvisitor-keys-4.4.0.tgz#0a9118344082f14c0f051342a74b42dfdb012640" + integrity sha1-CpEYNECC8UwPBRNCp0tC39sBJkA= dependencies: - "@typescript-eslint/types" "4.3.0" + "@typescript-eslint/types" "4.4.0" eslint-visitor-keys "^2.0.0" "@vue/compiler-core@3.0.0": @@ -2476,10 +2476,10 @@ eslint-plugin-prettier@^3.1.4: dependencies: prettier-linter-helpers "^1.0.0" -eslint-plugin-vue@^7.0.0-beta.4: - version "7.0.0-beta.4" - resolved "https://registry.npm.taobao.org/eslint-plugin-vue/download/eslint-plugin-vue-7.0.0-beta.4.tgz?cache=0&sync_timestamp=1600834523329&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-plugin-vue%2Fdownload%2Feslint-plugin-vue-7.0.0-beta.4.tgz#aa13b946702c4de1b8f7c3467698185775b11fdb" - integrity sha1-qhO5RnAsTeG498NGdpgYV3WxH9s= +eslint-plugin-vue@^7.0.1: + version "7.0.1" + resolved "https://registry.npm.taobao.org/eslint-plugin-vue/download/eslint-plugin-vue-7.0.1.tgz?cache=0&sync_timestamp=1601862810095&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Feslint-plugin-vue%2Fdownload%2Feslint-plugin-vue-7.0.1.tgz#8e69a9041bb9719c018f154fdcacbb17713e0240" + integrity sha1-jmmpBBu5cZwBjxVP3Ky7F3E+AkA= dependencies: eslint-utils "^2.1.0" natural-compare "^1.4.0" @@ -5012,10 +5012,10 @@ path-to-regexp@^1.0.0: dependencies: isarray "0.0.1" -path-to-regexp@^6.1.0: - version "6.1.0" - resolved "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-6.1.0.tgz#0b18f88b7a0ce0bfae6a25990c909ab86f512427" - integrity sha1-Cxj4i3oM4L+uaiWZDJCauG9RJCc= +path-to-regexp@^6.2.0: + version "6.2.0" + resolved "https://registry.npm.taobao.org/path-to-regexp/download/path-to-regexp-6.2.0.tgz?cache=0&sync_timestamp=1601400247487&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fpath-to-regexp%2Fdownload%2Fpath-to-regexp-6.2.0.tgz#f7b3803336104c346889adece614669230645f38" + integrity sha1-97OAMzYQTDRoia3s5hRmkjBkXzg= path-type@^1.0.0: version "1.1.0" @@ -7028,15 +7028,15 @@ vue-eslint-parser@^7.1.0: esquery "^1.0.1" lodash "^4.17.15" -vue-i18n@^9.0.0-beta.3: - version "9.0.0-beta.3" - resolved "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-9.0.0-beta.3.tgz#8abb78f5d57fb240edfd955b098dc267e33499f3" - integrity sha1-irt49dV/skDt/ZVbCY3CZ+M0mfM= +vue-i18n@^9.0.0-beta.4: + version "9.0.0-beta.4" + resolved "https://registry.npm.taobao.org/vue-i18n/download/vue-i18n-9.0.0-beta.4.tgz#a6550f6be56fd617a8ab96e26aa305329f06da02" + integrity sha1-plUPa+Vv1heoq5biaqMFMp8G2gI= -vue-router@^4.0.0-beta.12: - version "4.0.0-beta.12" - resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.0-beta.12.tgz?cache=0&sync_timestamp=1601131068569&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.0-beta.12.tgz#873d1bbd16882ab2ae35973e3e691412104f3914" - integrity sha1-hz0bvRaIKrKuNZc+PmkUEhBPORQ= +vue-router@^4.0.0-beta.13: + version "4.0.0-beta.13" + resolved "https://registry.npm.taobao.org/vue-router/download/vue-router-4.0.0-beta.13.tgz?cache=0&sync_timestamp=1601637432000&other_urls=https%3A%2F%2Fregistry.npm.taobao.org%2Fvue-router%2Fdownload%2Fvue-router-4.0.0-beta.13.tgz#4611d09a9e44f231cc401ecc294a7f2dcb30e6a6" + integrity sha1-RhHQmp5E8jHMQB7MKUp/Lcsw5qY= vue@^3.0.0, vue@^3.0.0-rc.5: version "3.0.0"