File tree Expand file tree Collapse file tree 3 files changed +20
-8
lines changed Expand file tree Collapse file tree 3 files changed +20
-8
lines changed Original file line number Diff line number Diff line change 1
1
<script setup lang="ts">
2
-
2
+ const flush = () => {
3
+ document .location .reload (true )
4
+ }
3
5
</script >
4
6
5
7
<template >
6
8
<div class =" demo" >
7
- <img v-lazy =" 'https://i.pinimg.com/474x/89/56/a1/8956a199a913cfa5a4a8696e6f08f821.jpg'" alt =" " />
9
+ <img
10
+ v-for =" it in 20"
11
+ :key =" it"
12
+ v-lazy =" 'https://i.pinimg.com/474x/2e/b9/c1/2eb9c1a03b3b995e001915af141283b6.jpg?random=' + Math.random()"
13
+ alt =" img" />
8
14
</div >
9
15
</template >
10
16
11
17
<style >
12
18
.demo {
13
19
text-align : center ;
14
- width : 100vw ;
15
- height : 100vh ;
20
+ flex-wrap : wrap ;
16
21
display : flex ;
17
- justify-content : center ;
22
+ justify-content : space-around ;
18
23
align-items : center ;
19
24
}
25
+ img {
26
+ width : 250px ;
27
+ margin : 2em ;
28
+ height : 200px ;
29
+ }
20
30
</style >
Original file line number Diff line number Diff line change 1
1
{
2
2
"name" : " vue-img-lazy-tiny" ,
3
3
"packageManager" : " pnpm@6.32.3" ,
4
- "version" : " 1.0 .0" ,
4
+ "version" : " 1.1 .0" ,
5
5
"description" : " component based on vue3.x" ,
6
6
"main" : " index.ts" ,
7
7
"scripts" : {
Original file line number Diff line number Diff line change @@ -3,8 +3,10 @@ import type { App } from 'vue'
3
3
export function install ( app : App ) {
4
4
app . directive ( 'lazy' , {
5
5
mounted ( el , binding ) {
6
- el . src = 'https://img-blog.csdnimg.cn/4dc2155d272343ff9b9cc71e0044d9f0.gif'
7
- el . onload = ( ) => {
6
+ const img = new Image ( )
7
+ img . src = binding . value
8
+ el . src = 'https://hnust-ticknet-swzl.oss-cn-hangzhou.aliyuncs.com/secondClass/2022/03/31/02c9ddd3-aac8-44e7-82d1-13bfead2d07a.gif'
9
+ img . onload = ( ) => {
8
10
el . src = binding . value
9
11
}
10
12
} ,
You can’t perform that action at this time.
0 commit comments