安装viewer
npm install v-viewer@next
oryarn add viewer@next
vue3 引入
引入v-viewer及必需的css样式,并使用app.use()注册插件
组件、指令和api会被一起安装到app全局
import { createApp } from 'vue'
import App from './App.vue' // 视自己项目而定
import 'viewerjs/dist/viewer.css'
import VueViewer from 'v-viewer'const app = createApp(App)
app.use(VueViewer, {
defaultOptions: {
// 自定义默认配置
}
}
- 局部注册
import 'viewerjs/dist/viewer.css'
import { component as Viewer } from "v-viewer"
export default {
components: { Viewer }
}
使用
-
通过
<div v-viewer>
<img v-for="src in images" :key="src" :src="src"/>
</div>
- 组件形式使用
<viewer :images="images">
<img v-for="src in images" :key="src" :src="src">
</viewer>
- 通过API调用
<template>
<a v-if="images?.length" @click="showImagesInViewer(images)">查看</a>
</template>
<script setup>
import { getCurrentInstance } from 'vue'
const $viewerApi = getCurrentInstance().appContext.config.globalProperties.$viewerApi
function showImagesInViewer(urls) {
urls instanceof Array &&
urls?.length &&
$viewerApi({ images: urls })
}
</script>
- 或者手动导入api
import { api as viewerApi } from 'v-viewer'
viewerApi({ images: [] })