基于Vue3封装实现图片查看器
作者：视觉CG
这篇文章主要为大家详细介绍了如何基于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 = url
this.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>
到此这篇关于基于Vue3封装实现图片查看器的文章就介绍到这了,更多相关Vue3图片查看器内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！