8000 docs: Add guide for Vue 3.x · john015/vue-load-image@3839426 · GitHub
[go: up one dir, main page]
Skip to content

Commit 3839426

Browse files
john015john015
committed
docs: Add guide for Vue 3.x
1 parent 0dadf05 commit 3839426

File tree

2 files changed

+153
-23
lines changed

2 files changed

+153
-23
lines changed

‎README-ko.md

Lines changed: 79 additions & 13 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,35 @@ vue-load-image 는 이미지로드 중 이미지 로더를 표시하며 이미
88

99
## Demo
1010

11-
[vue-load-image Demo](https://john015.github.io/vue-load-image/)
11+
[vue-load-image Demo](https://john015.github.io/vue-load-image/) / [(Source Code)](https://github.com/john015/vue-load-image/tree/master/example)
1212

1313
## Installation
1414

15-
### NPM
15+
### Via NPM:
1616

17-
`npm i vue-load-image`
18-
19-
### CDN
17+
```bash
18+
# for Vue 2.x
19+
npm i vue-load-image
2020

21+
# for Vue 3.x
22+
npm i vue-load-image@next
2123
```
24+
25+
### Via CDN:
26+
27+
```html
28+
<!-- for Vue 2.x -->
2229
<script src='https://unpkg.com/vue-load-image'></script>
30+
31+
<!-- for Vue 3.x -->
32+
<script src='https://unpkg.com/vue-load-image@next'></script>
2333
```
2434

2535
## Usage
2636

27-
### img
37+
### Image
38+
39+
#### Vue 2.x
2840

2941
```js
3042
<template>
@@ -38,10 +50,7 @@ vue-load-image 는 이미지로드 중 이미지 로더를 표시하며 이미
3850
</template>
3951

4052
<script>
41-
// es6
4253
import VueLoadImage from 'vue-load-image'
43-
// es5
44-
var VueLoadImage = require('vue-load-image').default
4554

4655
export default {
4756
components: {
@@ -51,7 +60,37 @@ export default {
5160
</script>
5261
```
5362

54-
### background-image
63+
#### Vue 3.x
64+
65+
```js
66+
<template>
67+
<div>
68+
<vue-load-image>
69+
<template v-slot:image>
70+
<img src="./image.png"/>
71+
</template>
72+
<template v-slot:preloader>
73+
<img src="./image-loader.gif" />
74+
</template>
75+
<template v-slot:error>Image load fails</template>
76+
</vue-load-image>
77+
</div>
78+
</template>
79+
80+
<script>
81+
import VueLoadImage from 'vue-load-image'
82+
83+
export default {
84+
components: {
85+
'vue-load-image': VueLoadImage
86+
}
87+
}
88+
</script>
89+
```
90+
91+
### Background-image
92+
93+
#### Vue 2.x
5594

5695
```js
5796
<template>
@@ -65,10 +104,7 @@ export default {
65104
</template>
66105

67106
<script>
68-
// es6
69107
import VueLoadImage from 'vue-load-image'
70-
// es5
71-
var VueLoadImage = require('vue-load-image').default
72108

73109
export default {
74110
components: {
@@ -78,6 +114,36 @@ export default {
78114
</script>
79115
```
80116

117+
#### Vue 3.x
118+
119+
```js
120+
<template>
121+
<div>
122+
<vue-load-image>
123+
<template v-slot:image>
124+
<div style="background-image: url(./image.png)" data-src='./image.png' />
125+
</template>
126+
<template v-slot:preloader>
127+
<img src="./image-loader.gif" />
128+
</template>
129+
<template v-slot:error>Image load fails</template>
130+
</vue-load-image>
131+
</div>
132+
</template>
133+
134+
<script>
135+
import VueLoadImage from 'vue-load-image'
136+
137+
export default {
138+
components: {
139+
'vue-load-image': VueLoadImage
140+
}
141+
}
142+
</script>
143+
```
144+
145+
#### ⚠️유의사항
146+
81147
data-src 값을 background-image url 과 동일하게 설정 해주세요.
82148

83149
## Events

‎README.md

Lines changed: 74 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -8,23 +8,35 @@ Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader
88

99
## Demo
1010

11-
[vue-load-image Demo](https://john015.github.io/vue-load-image/)
11+
[vue-load-image Demo](https://john015.github.io/vue-load-image/) / [(Source Code)](https://github.com/john015/vue-load-image/tree/master/example)
1212

1313
## Installation
1414

1515
### Via NPM:
1616

17-
`npm i vue-load-image`
17+
```bash
18+
# for Vue 2.x
19+
npm i vue-load-image
20+
21+
# for Vue 3.x
22+
npm i vue-load-image@next
23+
```
1824

1925
### Via CDN:
2026

21-
```
27+
```html
28+
<!-- for Vue 2.x -->
2229
<script src='https://unpkg.com/vue-load-image'></script>
30+
31+
<!-- for Vue 3.x -->
32+
<script src='https://unpkg.com/vue-load-image@next'></script>
2333
```
2434

2535
## Usage
2636

27-
### Img
37+
### Image
38+
39+
#### Vue 2.x
2840

2941
```js
3042
<template>
@@ -38,10 +50,35 @@ Vue-load-image is 1KB(gzipped size) minimalist Vue component that display loader
3850
</template>
3951

4052
<script>
41-
// es6
4253
import VueLoadImage from 'vue-load-image'
43-
// es5
44-
var VueLoadImage = require('vue-load-image').default
54+
55+
export default {
56+
components: {
57+
'vue-load-image': VueLoadImage
58+
}
59+
}
60+
</script>
61+
```
62+
63+
#### Vue 3.x
64+
65+
```js
66+
<template>
67+
<div>
68+
<vue-load-image>
69+
<template v-slot:image>
70+
<img src="./image.png"/>
71+
</template>
72+
<template v-slot:preloader>
73+
<img src="./image-loader.gif" />
74+
</template>
75+
<template v-slot:error>Image load fails</template>
76+
</vue-load-image>
77+
</div>
78+
</template>
79+
80+
<script>
81+
import VueLoadImage from 'vue-load-image'
4582

4683
export default {
4784
components: {
@@ -53,6 +90,8 @@ export default {
5390

5491
### Background-image
5592

93+
#### Vue 2.x
94+
5695
```js
5796
<template>
5897
<div>
@@ -65,10 +104,35 @@ export default {
65104
</template>
66105

67106
<script>
68-
// es6
69107
import VueLoadImage from 'vue-load-image'
70-
// es5
71-
var VueLoadImage = require('vue-load-image').default
108+
109+
export default {
110+
components: {
111+
'vue-load-image': VueLoadImage
112+
}
113+
}
114+
</script>
115+
```
116+
117+
#### Vue 3.x
118+
119+
```js
120+
<template>
121+
<div>
122+
<vue-load-image>
123+
<template v-slot:image>
124+
<div style="background-image: url(./image.png)" data-src='./image.png' />
125+
</template>
126+
<template v-slot:preloader>
127+
<img src="./image-loader.gif" />
128+
</template>
129+
<template v-slot:error>Image load fails</template>
130+
</vue-load-image>
131+
</div>
132+
</template>
133+
134+
<script>
135+
import VueLoadImage from 'vue-load-image'
72136

73137
export default {
74138
components: {

0 commit comments

Comments
 (0)
0