Skip to content

Commit

Permalink
Merge pull request #296 from Golevka2001/v3
Browse files Browse the repository at this point in the history 
为文档和 Live Demo 添加了插件在 Vue3 组合 API 风格下的用法
  • Loading branch information
@mirari
mirari authored Oct 16, 2023
2 parents 2484a05 + 42713e9 commit 77577c9
Show file tree
Hide file tree
Showing 5 changed files with 411 additions and 27 deletions.
160 changes: 136 additions & 24 deletions README.md
View file
Original file line number Diff line number Diff line change
Expand Up @@ -42,6 +42,8 @@ To use `v-viewer`, simply import it and the `css` file, and call `app.use()` to

The component, directive and api will be installed together in the global.

Two different API styles are both supported: **Options API** and **Composition API**.

```ts
import { createApp } from 'vue'
import App from './App.vue'
Expand All @@ -67,6 +69,7 @@ app.mount('#app')
<button type="button" @click="show">Click to show</button>
</div>
</template>
<!-- Options API -->
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
Expand All @@ -77,17 +80,31 @@ app.mount('#app')
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
};
}
},
methods: {
show() {
this.$viewerApi({
images: this.images,
images: this.images
})
},
},
}
}
})
</script>
<!-- Composition API -->
<!-- <script lang="ts" setup>
import { api as viewerApi } from 'v-viewer'
const images = [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
const show = () => {
viewerApi({
images
})
}
</script> -->
```

### Support UMD
Expand Down Expand Up @@ -133,15 +150,16 @@ Get the element by selector and then use `el.$viewer` to get the `viewer` instan
<button type="button" @click="show">Show</button>
</div>
</template>
<!-- Options API -->
<script lang="ts">
import { defineComponent } from 'vue'
import 'viewerjs/dist/viewer.css'
import { directive as viewer } from "v-viewer"
export default defineComponent({
directives: {
viewer: viewer({
debug: true,
}),
debug: true
})
},
data() {
return {
Expand All @@ -150,7 +168,7 @@ Get the element by selector and then use `el.$viewer` to get the `viewer` instan
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
};
}
},
methods: {
show () {
Expand All @@ -160,6 +178,23 @@ Get the element by selector and then use `el.$viewer` to get the `viewer` instan
}
})
</script>
<!-- Composition API -->
<!-- <script lang="ts" setup>
import 'viewerjs/dist/viewer.css'
import { directive as viewer } from "v-viewer"
const vViewer = viewer({
debug: true
})
const images = [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
const show = () => {
const viewer = document.querySelector('.images').$viewer
viewer.show()
}
</script> -->
```

#### Directive modifiers
Expand Down Expand Up @@ -195,9 +230,10 @@ You can simply import the component and register it locally too.
```vue
<template>
<div>
<viewer :options="options" :images="images"
<viewer :images="images"
@inited="inited"
class="viewer" ref="viewer"
class="viewer"
ref="viewer"
>
<template #default="scope">
<img v-for="src in scope.images" :src="src" :key="src">
Expand All @@ -207,6 +243,7 @@ You can simply import the component and register it locally too.
<button type="button" @click="show">Show</button>
</div>
</template>
<!-- Options API -->
<script lang="ts">
import { defineComponent } from 'vue'
import 'viewerjs/dist/viewer.css'
Expand All @@ -222,7 +259,7 @@ You can simply import the component and register it locally too.
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
};
}
},
methods: {
inited (viewer) {
Expand All @@ -234,6 +271,23 @@ You can simply import the component and register it locally too.
}
})
</script>
<!-- Composition API -->
<!-- <script lang="ts" setup>
import 'viewerjs/dist/viewer.css'
import { component as Viewer } from "v-viewer"
const images = [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
let $viewer:any = null
const inited = (viewer) => {
$viewer = viewer
}
const show = () => {
$viewer.show()
}
</script> -->
```

#### Component props
Expand Down Expand Up @@ -303,26 +357,29 @@ The function returns the current viewer instance.
<button type="button" class="button" @click="previewImgObject">Img-Object Array</button>
</div>
</template>
<!-- Options API -->
<script lang="ts">
import { defineComponent } from 'vue'
import 'viewerjs/dist/viewer.css'
import { api as viewerApi } from "v-viewer"
export default defineComponent({
data() {
sourceImageURLs: [
'https://picsum.photos/200/200?random=1',
'https://picsum.photos/200/200?random=2',
],
sourceImageObjects: [
{
'src':'https://picsum.photos/200/200?random=3',
'data-source':'https://picsum.photos/800/800?random=3'
},
{
'src':'https://picsum.photos/200/200?random=4',
'data-source':'https://picsum.photos/800/800?random=4'
}
]
return {
sourceImageURLs: [
'https://picsum.photos/200/200?random=1',
'https://picsum.photos/200/200?random=2'
],
sourceImageObjects: [
{
'src': 'https://picsum.photos/200/200?random=3',
'data-source': 'https://picsum.photos/800/800?random=3'
},
{
'src': 'https://picsum.photos/200/200?random=4',
'data-source': 'https://picsum.photos/800/800?random=4'
}
]
}
},
methods: {
previewURL () {
Expand All @@ -345,6 +402,42 @@ The function returns the current viewer instance.
}
})
</script>
<!-- Composition API -->
<!-- <script lang="ts" setup>
import 'viewerjs/dist/viewer.css'
import { api as viewerApi } from 'v-viewer'
const sourceImageURLs = [
'https://picsum.photos/200/200?random=1',
'https://picsum.photos/200/200?random=2'
]
const sourceImageObjects = [
{
src: 'https://picsum.photos/200/200?random=3',
'data-source': 'https://picsum.photos/800/800?random=3'
},
{
src: 'https://picsum.photos/200/200?random=4',
'data-source': 'https://picsum.photos/800/800?random=4'
}
]
const previewURL = () => {
// If you use the `app.use` full installation, you can use `this.$viewerApi` directly like this
const $viewer = this.$viewerApi({
images: sourceImageURLs
})
}
const previewImgObject = () => {
// Or you can just import the api method and call it.
const $viewer = viewerApi({
options: {
toolbar: true,
url: 'data-source',
initialViewIndex: 1
},
images: sourceImageObjects
})
}
</script> -->
```

## Options & Methods of Viewer
Expand Down Expand Up @@ -388,6 +481,7 @@ app.mount('#app')
</vuer>
</div>
</template>
<!-- Options API -->
<script lang="ts">
import { defineComponent } from 'vue'
export default defineComponent({
Expand All @@ -413,6 +507,24 @@ app.mount('#app')
}
})
</script>
<!-- Composition API -->
<script lang="ts" setup>
import { api as vuerApi } from 'v-viewer'
const images = [
"https://picsum.photos/200/200",
"https://picsum.photos/300/200",
"https://picsum.photos/250/200"
]
const show = () => {
// viewerjs instance name
const vuer = document.querySelector('.images').$vuer
vuer.show()
// api name
vuerApi({
images
})
}
</script>
```

### defaultOptions
Expand Down
40 changes: 40 additions & 0 deletions example/views/example/ApiExample.vue
View file
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!-- Options API -->
<script lang="ts">
import {
defineComponent,
Expand Down Expand Up @@ -49,6 +50,45 @@ export default defineComponent({
},
})
</script>
<!-- Composition API -->
<!-- <script lant="ts" setup>
import VueViewer, { api as viewerApi } from '../../../src'

VueViewer.setDefaults({
zIndex: 2021,
})

const sourceImageURLs = []
const sourceImageObjects = []
const base = Math.floor(Math.random() * 60) + 10
for (let i = 0; i < 5; i++) {
sourceImageURLs.push(`https://picsum.photos/id/${base + i}/1440/900`)
sourceImageObjects.push({
'data-source': `https://picsum.photos/id/${base + i}/1440/900`,
'src': `https://picsum.photos/id/${base + i}/346/216`,
'alt': `Image: ${base + i}`,
})
}

const previewURL = () => {
const $viewer = viewerApi({
images: sourceImageURLs,
})
console.log($viewer)
}

const previewImgObject = () => {
const $viewer = viewerApi({
options: {
toolbar: true,
url: 'data-source',
initialViewIndex: 2,
},
images: sourceImageObjects,
})
console.log($viewer)
}
</script> -->

<template>
<div>
Expand Down
Loading

0 comments on commit 77577c9

Please sign in to comment.