| 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> | |
