基于Vue3封裝實現(xiàn)圖片查看器
更新時間：2025年02月26日 08:42:55 作者：視覺CG
這篇文章主要為大家詳細介紹了如何基于Vue3封裝實現(xiàn)一個圖片查看器,可以點擊圖片放大和關(guān)閉放大的圖片,感興趣的小伙伴可以了解一下
需求
點擊圖片放大
可關(guān)閉放大的 圖片
下載
cnpm in viewerjs
狀態(tài)管理+方法
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();
// 圖片查看器關(guān)閉事件
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>
到此這篇關(guān)于基于Vue3封裝實現(xiàn)圖片查看器的文章就介紹到這了,更多相關(guān)Vue3圖片查看器內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
Vuex是一個專門為Vue.js應(yīng)用程序開發(fā)的狀態(tài)管理庫。它采用了一個集中式的架構(gòu)，將應(yīng)用程序的所有組件的狀態(tài)存儲在一個單獨的地方。這使得狀態(tài)的管理和維護變得更加容易2023-03-03
vue 輸入框輸入任意內(nèi)容返回數(shù)字的實現(xiàn)
本文主要介紹了vue 輸入框輸入任意內(nèi)容返回數(shù)字的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2022-03-03
vue圓環(huán)百分比進度條組件功能的實現(xiàn)
在一些頁面設(shè)置進度條效果給人一種很好的體驗效果，今天小編教大家vue圓環(huán)百分比進度條組件功能的實現(xiàn)代碼，代碼超級簡單啊，感興趣的朋友快來看下吧2021-05-05
Vue2 實現(xiàn)消息語音報警功能 下面是一個完整的Vue2消息語音報警實現(xiàn)方案，包含多種語音播報方式和自定義配置。 1. 安裝依賴 2. 語音報警組件 核心語音服務(wù)類 Vue2語音報警組件 3. 全局事2025-11-11
vue靜態(tài)配置文件不進行編譯的處理過程(在public中引入js)
這篇文章主要介紹了vue靜態(tài)配置文件不進行編譯的處理過程(在public中引入js)，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-03-03
文章介紹了如何在Vue中設(shè)置頁面全屏,包括下載插件、全屏、退出全屏、全屏切換等操作,同時,還分享了在若依框架中實現(xiàn)主頁面內(nèi)容全屏的方法,包括配置全局變量和在布局文件中進行設(shè)置2025-02-02
本文主要介紹了vite搭建vue3項目的搭建步驟,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧2025-09-09
這篇文章主要給大家介紹了關(guān)于vue3中ace-editor簡單使用的相關(guān)資料,ace-editor是一種代碼編輯器,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2023-10-10
這篇文章主要為大家詳細介紹了vue echarts實現(xiàn)橫向柱狀圖，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
這篇文章主要介紹了通過Vue實現(xiàn)淘寶購物車中三級選中的功能，文中的實現(xiàn)過程講解詳細，對我們學習Vue有一定的幫助，感興趣的可以了解一下2022-01-01