【Viewer.js】vue3封装图片查看器

效果图

在这里插入图片描述

需求

点击图片放大
可关闭放大的图片

下载

cnpm in viewerjs

状态管理+方法

stores/imgSeeStore.js

import { defineStore } from 'pinia'
export const imgSeeStore = defineStore('imgSeeStore', {state: () => ({showImgSee: false,ImgUrl: '',}),getters: {},actions: {openImgShow(url) {this.ImgUrl = urlthis.showImgSee = true},resetSeeImg() {this.ImgUrl = ''this.showImgSee = false}}
})

封装的组件

<template><img ref="el" :src="ImgUrl" />
</template><script setup>
import "viewerjs/dist/viewer.css";
import Viewer from "viewerjs";
import { nextTick, onMounted, ref } from "vue";
import { storeToRefs } from "pinia";
import { globalStateStore } from "src/stores/globalState";const useGlobalStateStore = globalStateStore(),{ ImgUrl } = storeToRefs(useGlobalStateStore),{ resetSeeImg } = useGlobalStateStore;const el = ref();
onMounted(async () => {await nextTick();//   图片查看器关闭事件el.value.addEventListener("hide", () => resetSeeImg());new Viewer(el.value, {navbar: false,title: false,}).show();
});
</script>

使用

TestVue.vue

<template><!-- 这个是要点击查看的图片 --><img style="max-width: 200px" :src="img"@click="openImgShow(img)"/><img-see v-if="showImgSee" />
</template><script setup>
import { ref} from "vue";
import { storeToRefs } from "pinia";
import ImgSee from "src/components/ImgSee.vue";
import { imgSeeStore} from "src/stores/imgSeeStore";  const img = ref('/public/test.jpg')
const useImgSeeStore= imgSeeStore(),{ showImgSee } = storeToRefs(useImgSeeStore),{ openImgShow } = useImgSeeStore;
</script>