inleft
2022-08-23 93768186ca58acd0fc0b6963d0e017979c087631
commit | author | age
6461f5 1 <template>
I 2     <div>
3         <button type="button" class="button" @click="previewURL">URL Array</button>
4         <button type="button" class="button" @click="previewImgObject">Img-Object Array</button>
5     </div>
6 </template>
7 <script>
8     import 'viewerjs/dist/viewer.css'
9     import {
10         api as viewerApi
11     } from "v-viewer"
12     export default {
13         data() {
14             return {
15                 sourceImageURLs: [
16                     'https://picsum.photos/200/200?random=1',
17                     'https://picsum.photos/200/200?random=2',
18                 ],
19                 sourceImageObjects: [{
20                         'src': 'https://picsum.photos/200/200?random=3',
21                         'data-source': 'https://picsum.photos/800/800?random=3'
22                     },
23                     {
24                         'src': 'https://picsum.photos/200/200?random=4',
25                         'data-source': 'https://picsum.photos/800/800?random=4'
26                     }
27                 ]
28             }
29         },
30         methods: {
31             previewURL() {
32                 // 如果使用`app.use`进行全局安装, 你就可以像这样直接调用`this.$viewerApi`
33                 const $viewer = this.$viewerApi({
34                     images: this.sourceImageURLs
35                 })
36             },
37             previewImgObject() {
38                 // 或者你可以单独引入api然后执行它
39                 const $viewer = viewerApi({
40                     options: {
41                         inline:true,
42                         toolbar: true,
43                         url: 'data-source',
44                         initialViewIndex: 1
45                     },
46                     images: this.sourceImageObjects
47                 })
48             }
49         }
50     }
51 </script>