main.ts
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
import { createApp } from "vue"; import "./style.css"; import App from "./App.vue"; import 'viewerjs/dist/viewer.css' import VueViewer from 'v-viewer' const app = createApp(App); app.use(VueViewer) // Mount the app app.mount("#app"); |
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 |
<template> <div> <!-- directive --> <div class="images" v-viewer> <img v-for="src in images" :key="src" :src="src"> </div> <!-- component --> <viewer :images="images"> <img v-for="src in images" :key="src" :src="src"> </viewer> <!-- api --> <button type="button" @click="show">Click to show</button> </div> </template> <!-- Options API --> <script lang="ts"> import { defineComponent } from 'vue' import img1 from './assets/1.jpeg' export default defineComponent({ data() { return { images: [ "https://picsum.photos/200/200", "https://picsum.photos/300/200", "https://picsum.photos/250/200", img1 ] } }, methods: { show() { this.$viewerApi({ images: this.images }) } } }) </script> |
