vue3 笔记② - 使用viewer图片预览工具

安装viewer

npm install v-viewer@next or yarn 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: [] })