-
![]()
+
+
+
![img]()
+
@@ -10,9 +12,9 @@ import { ref, defineComponent, onMounted } from 'vue'
export default defineComponent({
name: 'LoadImage',
props: {
- src: {
- type: String,
- default: ''
+ imageList: {
+ type: Array,
+ default: () => []
},
fallback: {
type: String,
@@ -25,47 +27,48 @@ export default defineComponent({
},
setup(props) {
const pictureUrl = ref("")
- const imgRef = ref(null)
-
- const loadImage = () => {
- const img = new Image()
- img.src = props.src
- img.onload = function() {
- pictureUrl.value = this.src
- }
- img.onerror = function() {
- pictureUrl.value = this.fallback || "https://pic.616pic.com/ys_img/00/58/34/XibLrSEeQF.jpg"
- }
- }
-
- const preLoad = () => {
- const img = new Image()
- img.src = props.loading
- img.onload = function() {
- // TODO: 最好还是做个限时，不然会闪现
- // 防止图片加载完成后，src已经有值了
- if (pictureUrl.value) return
- pictureUrl.value = this.src
- }
- }
+ const imageContainerRef = ref(null)
onMounted(() => {
- preLoad()
+ const queue = []
+ const imageListDOM = imageContainerRef.value.querySelectorAll('img')
const observer = new IntersectionObserver((entries) => {
entries.forEach((entry) => {
if (entry.isIntersecting) {
- loadImage()
- observer.unobserve(entry.target)
+ const imgDOM = entry.target
+ const imgUrl = imgDOM.getAttribute("data-src")
+ queue.push({ imgDOM, imgUrl })
+ observer.unobserve(imgDOM)
+ runQueue()
}
})
+ }, {
+ root: null,
+ rootMargin: '160px',
+ threshold: 0.1
+ })
+
+ imageListDOM.forEach((imgDOM) => {
+ observer.observe(imgDOM);
})
- observer.observe(imgRef.value);
+
+
+ const runQueue = () => {
+ requestAnimationFrame(() => {
+ if (queue.length === 0) return
+
+ const { imgDOM, imgUrl } = queue.shift()
+ imgDOM.setAttribute("src", imgUrl)
+ runQueue()
+ })
+ }
+
})
return {
pictureUrl,
- imgRef
+ imageContainerRef
}
}
})
@@ -73,15 +76,21 @@ export default defineComponent({
From fb2e4cb21a6987f71b900e3cc6500a8e93865f9c Mon Sep 17 00:00:00 2001
From: xahy123 <2985450893@qq.com>
Date: Wed, 22 Mar 2023 18:29:10 +0800
Subject: [PATCH 3/6] =?UTF-8?q?feat:=20modal=E7=BB=84=E4=BB=B6=E5=92=8C?=
=?UTF-8?q?=E9=A1=B5=E9=9D=A2=E6=8A=A5=E9=94=99?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
package.json | 4 +-
src/_test.tsx | 141 +-
src/components/myModal/index.less | 32 +
src/components/myModal/index.tsx | 46 +
yarn.lock | 7167 +++++++++++++++++++++++++++++
5 files changed, 7325 insertions(+), 65 deletions(-)
create mode 100644 src/components/myModal/index.less
create mode 100644 src/components/myModal/index.tsx
create mode 100644 yarn.lock
diff --git a/package.json b/package.json
index 6f4b3ba..da5eb03 100644
--- a/package.json
+++ b/package.json
@@ -77,6 +77,8 @@
"dependencies": {
"@types/uuid": "^9.0.1",
"framer-motion": "^8.5.5",
+ "less": "^4.1.3",
+ "react-dom": "^18.2.0",
"uuid": "^9.0.0"
}
-}
\ No newline at end of file
+}
diff --git a/src/_test.tsx b/src/_test.tsx
index 4e3a04d..2819a6c 100644
--- a/src/_test.tsx
+++ b/src/_test.tsx
@@ -1,17 +1,18 @@
import React, { useState } from 'react';
-import ReactDom from 'react-dom'
import Modal from './components/modal/modal';
import Upload from './components/upload/upload';
import Tab from './components/tab/tab';
+import { createRoot } from 'react-dom/client'
import * as GOJI from 'goji_ui'
+import MyModal from './components/myModal';
function App() {
- const [visible, setVisible] = useState(false)
- const [ev, setEv] = useState(false)
- return
}
items={[
@@ -29,40 +30,52 @@ function App() {
/> */}
-
test
-
-
{
- setEv(true)
- }}
- hiddenStyle={{
- height:'0px',
- overflow:'hidden'
- }}
- tabContentVisible={ev}
- extSelector={'[aria-label="tab"]'}
- extension={ { setEv(!ev) }} className="ext">这是扩展的内容
}
- items={[
- {
- title: "tab1",
- key: "tab1",
- children: tab1
- },
- {
- title: "tab2",
- key: "tab2",
- children: tab2
- }
- ]}
- />
-
- test
+
+ {
+ setEv(true)
+ }}
+ hiddenStyle={{
+ height: '0px',
+ overflow: 'hidden'
+ }}
+ tabContentVisible={ev}
+ extSelector={'[aria-label="tab"]'}
+ extension={ { setEv(!ev) }} className="ext">这是扩展的内容
}
+ items={[
+ {
+ title: "tab1",
+ key: "tab1",
+ children: tab1
+ },
+ {
+ title: "tab2",
+ key: "tab2",
+ children: tab2
+ }
+ ]}
+ />
+ setVisible(false)}
+ header={
+ 自定义头部
+ }
+ footer={
+ 自定义尾部
+ }
+ >
+ 我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区我是内容区
+
+ {/* {
setVisible(false)
@@ -73,31 +86,31 @@ function App() {
how to set default value for typescript interface field