From 9bab8765c48eb7508ce8ee4bbe0ede656ffe87c9 Mon Sep 17 00:00:00 2001 From: lishuang Date: Sat, 6 Jun 2020 21:13:27 +0800 Subject: [PATCH] Try to use the old html. --- package.json | 2 + src/assets/css/global/miscellaneous.less | 14 +- src/pages/user/Detail.less | 2 +- src/pages/user/Detail.tsx | 2 +- src/pages/user/List.tsx | 7 +- .../widget/previewer/ImagePreviewer.less | 3 + src/pages/widget/previewer/ImagePreviewer.tsx | 180 ++++++++++++++++++ 7 files changed, 206 insertions(+), 4 deletions(-) create mode 100644 src/pages/widget/previewer/ImagePreviewer.less create mode 100644 src/pages/widget/previewer/ImagePreviewer.tsx diff --git a/package.json b/package.json index 0e1eecb..8b7f26b 100644 --- a/package.json +++ b/package.json @@ -6,6 +6,7 @@ "@ant-design/icons": "^4.2.1", "@testing-library/react": "^9.3.2", "@testing-library/user-event": "^7.1.2", + "@types/photoswipe": "^4.1.0", "antd": "^4.3.1", "axios": "^0.19.2", "camelcase": "^5.3.1", @@ -13,6 +14,7 @@ "dotenv-expand": "5.1.0", "fs-extra": "^8.1.0", "identity-obj-proxy": "3.0.0", + "photoswipe": "^4.1.3", "qs": "^6.9.4", "react": "^16.13.1", "react-app-polyfill": "^1.0.6", diff --git a/src/assets/css/global/miscellaneous.less b/src/assets/css/global/miscellaneous.less index b6d8962..9aa310c 100644 --- a/src/assets/css/global/miscellaneous.less +++ b/src/assets/css/global/miscellaneous.less @@ -24,7 +24,6 @@ } - //超出三行使用点点点 .list-text-restriction { display: -webkit-box; @@ -110,3 +109,16 @@ a { transition: color 0.3s; text-decoration-skip: objects; } + + +//头像 +.avatar-large { + border-radius: 50%; + width: 120px; + height: 120px; +} +.avatar-middle { + border-radius: 50%; + width: 60px; + height: 60px; +} diff --git a/src/pages/user/Detail.less b/src/pages/user/Detail.less index 8915e9b..5831f77 100644 --- a/src/pages/user/Detail.less +++ b/src/pages/user/Detail.less @@ -1,4 +1,4 @@ -.page-profile { +.page-user-detail { background-color: white; diff --git a/src/pages/user/Detail.tsx b/src/pages/user/Detail.tsx index 22b3c4d..3b0f4be 100644 --- a/src/pages/user/Detail.tsx +++ b/src/pages/user/Detail.tsx @@ -42,7 +42,7 @@ export default class Detail extends TankComponent { return ( -
+
+ + + + + + + + + +
+
+
+
+
+
+
+
+ + + + + + + +
+
+
+ +
+ + + + ` + + let div: HTMLElement = document.createElement('div'); + div.className = "pswp"; + div.setAttribute("tabIndex", "-1") + div.setAttribute("role", "dialog") + div.setAttribute("aria-hidden", "true") + + div.innerHTML = innerHTML + + return div + } + + //展示一张图片 + static showSinglePhoto(url: string, width: number = 0, height: number = 0) { + + let that = this; + let items = [{ + src: url, + w: width, + h: height + }]; + + let options = { + //不需要历史纪录 + history: false, + //不需要全屏按钮 + fullscreenEl: false, + //不需要分享按钮 + shareEl: false, + //点击不要让控制按钮消失 + tapToToggleControls: false, + //当前从第0张展示。 + index: 0 + }; + + //获取dom节点 + let div = ImagePreviewer.pswpDom() + //添加到body + document.body.appendChild(div); + + console.log("路径", url, items) + + let photoSwipe = new PhotoSwipe(div, PhotoSwipeUIDefault, items, options); + + photoSwipe.listen('gettingData', function (index, item) { + + console.log("在gettingData", index, item) + if (!item.w || !item.h || item.w < 1 || item.h < 1) { + + const img: HTMLImageElement = new Image() + + img.onload = function () { + console.log("图片加载好了", img.width, img.height) + + item.w = width + item.h = height + + photoSwipe.updateSize(true); // reinit Items + } + img.src = item.src! + } + }) + photoSwipe.init(); + + photoSwipe.listen('close', () => { + console.log("photoSwipe close") + if (div.parentNode) { + //移除节点 + div.parentNode.removeChild(div); + } + }) + photoSwipe.listen('afterChange', () => { + console.log("photoSwipe afterChange") + + }) + + + } + + + render() { + + let that = this + + return ( +
+ +
+ ); + } +} +