From 76b504702b3d77013b9417d93a2efbccb8151e6d Mon Sep 17 00:00:00 2001 From: master1lan <278457198@qq.com> Date: Tue, 27 Dec 2022 16:45:04 +0800 Subject: [PATCH] =?UTF-8?q?=E8=A7=A3=E5=86=B3cls=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- package.json | 1 + pnpm-lock.yaml | 13 +++++++--- src/App.tsx | 41 +++++++------------------------- src/components/image/index.tsx | 23 ++++++++++++++++++ src/components/image/tool.ts | 22 +++++++++++++++++ src/components/masonry/index.tsx | 38 +++++++++++++++++++++++++++++ src/main.tsx | 6 ++--- src/utils/index.js | 9 +++++++ tsconfig.json | 15 ++++++++---- tsconfig.node.json | 9 ------- vite.config.ts | 14 ++++++++--- 11 files changed, 135 insertions(+), 56 deletions(-) create mode 100644 src/components/image/index.tsx create mode 100644 src/components/image/tool.ts create mode 100644 src/components/masonry/index.tsx create mode 100644 src/utils/index.js delete mode 100644 tsconfig.node.json diff --git a/package.json b/package.json index 646e794..691adfd 100644 --- a/package.json +++ b/package.json @@ -18,6 +18,7 @@ "devDependencies": { "@faker-js/faker": "^7.6.0", "@types/imagesloaded": "^4.1.2", + "@types/node": "^18.11.18", "@types/react": "^18.0.26", "@types/react-dom": "^18.0.9", "@vitejs/plugin-react-swc": "^3.0.0", diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml index 647337d..3cfeba6 100644 --- a/pnpm-lock.yaml +++ b/pnpm-lock.yaml @@ -3,6 +3,7 @@ lockfileVersion: 5.4 specifiers: '@faker-js/faker': ^7.6.0 '@types/imagesloaded': ^4.1.2 + '@types/node': ^18.11.18 '@types/react': ^18.0.26 '@types/react-dom': ^18.0.9 '@vitejs/plugin-react-swc': ^3.0.0 @@ -27,12 +28,13 @@ dependencies: devDependencies: '@faker-js/faker': 7.6.0 '@types/imagesloaded': 4.1.2 + '@types/node': 18.11.18 '@types/react': 18.0.26 '@types/react-dom': 18.0.10 '@vitejs/plugin-react-swc': 3.0.1_vite@4.0.3 less: 4.1.3 typescript: 4.9.4 - vite: 4.0.3_less@4.1.3 + vite: 4.0.3_dprl76twtlijnqpm3fdjsbkzqm packages: @@ -448,6 +450,10 @@ packages: '@types/sizzle': 2.3.3 dev: true + /@types/node/18.11.18: + resolution: {integrity: sha512-DHQpWGjyQKSHj3ebjFI/wRKcqQcdR+MoFBygntYOZytCqNfkd2ZC4ARDJ2DQqhjH5p85Nnd3jhUJIXrszFX/JA==} + dev: true + /@types/prop-types/15.7.5: resolution: {integrity: sha512-JCB8C6SnDoQf0cNycqd/35A7MjcnK+ZTqE7judS6o7utxUCg6imJg3QK2qzHKszlTjcj2cn+NwMB2i96ubpj7w==} dev: true @@ -484,7 +490,7 @@ packages: vite: ^4 dependencies: '@swc/core': 1.3.24 - vite: 4.0.3_less@4.1.3 + vite: 4.0.3_dprl76twtlijnqpm3fdjsbkzqm dev: true /copy-anything/2.0.6: @@ -844,7 +850,7 @@ packages: hasBin: true dev: true - /vite/4.0.3_less@4.1.3: + /vite/4.0.3_dprl76twtlijnqpm3fdjsbkzqm: resolution: {integrity: sha512-HvuNv1RdE7deIfQb8mPk51UKjqptO/4RXZ5yXSAvurd5xOckwS/gg8h9Tky3uSbnjYTgUm0hVCet1cyhKd73ZA==} engines: {node: ^14.18.0 || >=16.0.0} hasBin: true @@ -869,6 +875,7 @@ packages: terser: optional: true dependencies: + '@types/node': 18.11.18 esbuild: 0.16.10 less: 4.1.3 postcss: 8.4.20 diff --git a/src/App.tsx b/src/App.tsx index 9b74e07..311feb2 100644 --- a/src/App.tsx +++ b/src/App.tsx @@ -1,39 +1,14 @@ -import React, { useEffect, useRef } from "react"; -import { Masonry } from "masonic"; -import { useFakerImages } from "./utils/faker/index"; +// import Masonry from "@components/masonry"; + +import Image from "@components/image"; + export default function App() { - const lists = useFakerImages(100); + // return ; + const url = `https://images.pexels.com/photos/5702958/pexels-photo-5702958.jpeg?auto=compress&cs=tinysrgb&w=1260&h=750&dpr=1`; return ( -
-
- -
+
+
); } - -function FakerCard({ data: { id, image, name } }) { - return ( -
- -
-

- {name} -

-
-
- ); -} diff --git a/src/components/image/index.tsx b/src/components/image/index.tsx new file mode 100644 index 0000000..2e95812 --- /dev/null +++ b/src/components/image/index.tsx @@ -0,0 +1,23 @@ +import { useEffect, useState } from "react"; +import { getImageSize } from "./tool"; +export default function Image({ url }) { + const [loading, setLoading] = useState(true); + const [obj, setObj] = useState({}); + useEffect(() => { + getImageSize(url).then((data) => { + setLoading(() => false); + setObj(() => ({ + width: data.width, + height: data.height, + })); + }); + }, [url]); + if (loading) { + return
loading
; + } + return ( +
+ +
+ ); +} diff --git a/src/components/image/tool.ts b/src/components/image/tool.ts new file mode 100644 index 0000000..e6382d1 --- /dev/null +++ b/src/components/image/tool.ts @@ -0,0 +1,22 @@ +import { Once } from "@utils/index"; +import { resolve } from "path"; +/** + * image组件的工具库 + */ +export function getImageSize(imageSrc: string) { + return new Promise((resolve, reject) => { + const image = new Image(); + image.src = imageSrc; + if (image.complete) { + resolve({ + width: image.width, + height: image.height, + }); + } + image.onload = () => + resolve({ + width: image.width, + height: image.height, + }); + }); +} diff --git a/src/components/masonry/index.tsx b/src/components/masonry/index.tsx new file mode 100644 index 0000000..a854f2d --- /dev/null +++ b/src/components/masonry/index.tsx @@ -0,0 +1,38 @@ +import { Masonry } from "masonic"; +import { useFakerImages } from "@utils/faker/index"; +export default function App() { + const lists = useFakerImages(100); + + return ( +
+
+ +
+
+ ); +} + +function FakerCard({ data: { id, image, name } }) { + return ( +
+ +
+

+ {name} +

+
+
+ ); +} diff --git a/src/main.tsx b/src/main.tsx index 813b1ea..20c9ef8 100644 --- a/src/main.tsx +++ b/src/main.tsx @@ -4,7 +4,7 @@ import App from "./App"; import "./index.less"; ReactDOM.createRoot(document.getElementById("root") as HTMLElement).render( - - - + // + + // ); diff --git a/src/utils/index.js b/src/utils/index.js new file mode 100644 index 0000000..c74a357 --- /dev/null +++ b/src/utils/index.js @@ -0,0 +1,9 @@ +export function Once(fn) { + let tag = fn; + return function () { + if (tag) { + tag.apply(this, arguments); + tag = null; + } + }; +} diff --git a/tsconfig.json b/tsconfig.json index a37309b..5fb5ce5 100644 --- a/tsconfig.json +++ b/tsconfig.json @@ -1,9 +1,9 @@ { "compilerOptions": { - "target": "ESNext", + "target": "ES5", "useDefineForClassFields": true, "lib": ["DOM", "DOM.Iterable", "ESNext"], - "allowJs": false, + "allowJs": true, "skipLibCheck": true, "esModuleInterop": true, "allowSyntheticDefaultImports": true, @@ -14,8 +14,13 @@ "resolveJsonModule": true, "isolatedModules": true, "noEmit": true, - "jsx": "react-jsx" + "jsx": "react-jsx", + "baseUrl": ".", + "paths": { + "@utils/*": ["src/utils/*"], + "@components/*": ["src/components/*"], + "@store/*": ["src/store/*"] + } }, - "include": ["src"], - "references": [{ "path": "./tsconfig.node.json" }] + "include": ["src"] } diff --git a/tsconfig.node.json b/tsconfig.node.json deleted file mode 100644 index 9d31e2a..0000000 --- a/tsconfig.node.json +++ /dev/null @@ -1,9 +0,0 @@ -{ - "compilerOptions": { - "composite": true, - "module": "ESNext", - "moduleResolution": "Node", - "allowSyntheticDefaultImports": true - }, - "include": ["vite.config.ts"] -} diff --git a/vite.config.ts b/vite.config.ts index 861b04b..845ad50 100644 --- a/vite.config.ts +++ b/vite.config.ts @@ -1,7 +1,15 @@ -import { defineConfig } from 'vite' -import react from '@vitejs/plugin-react-swc' +import { defineConfig } from "vite"; +import path from "path"; +import react from "@vitejs/plugin-react-swc"; // https://vitejs.dev/config/ export default defineConfig({ + resolve: { + alias: { + "@utils": path.resolve(__dirname, "src/utils"), + "@components": path.resolve(__dirname, "src/components"), + "@store": path.resolve(__dirname, "src/store"), + }, + }, plugins: [react()], -}) +});