vue3中使用viewerjs實(shí)現(xiàn)圖片預(yù)覽效果的項(xiàng)目實(shí)踐
更新時(shí)間：2023年09月07日 14:49:24 作者：前端~初學(xué)者
viewer.js是一款開(kāi)源的圖片預(yù)覽插件,功能十分強(qiáng)大,本文主要介紹了vue3中使用viewerjs實(shí)現(xiàn)圖片預(yù)覽效果的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下
1、前言
viewer.js是一款開(kāi)源的圖片預(yù)覽插件，功能十分強(qiáng)大:
- 支持移動(dòng)設(shè)備觸摸事件
- 支持響應(yīng)式
- 支持放大/縮小
- 支持旋轉(zhuǎn)（類似微博的圖片旋轉(zhuǎn)）
- 支持水平/垂直翻轉(zhuǎn)
- 支持圖片移動(dòng)
- 支持鍵盤
- 支持全屏幻燈片模式（可做屏保）
- 支持縮略圖
- 支持標(biāo)題顯示
- 支持多種自定義事件
GitHub 地址：https://github.com/fengyuanchen/viewerjs
常用配置參數(shù)：
2、實(shí)現(xiàn)效果
3、在vue3項(xiàng)目中使用viewer.js
3.1 安裝
npm install v-viewer -S
3.2 在main.js中引入
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
app.use(Viewer, {
defaultOptions: {
// 需要配置的屬性 注意屬性并沒(méi)有引號(hào)
title: false,
toolbar: false
}
})3.3 組件中使用
<viewer class="image-box" :images="sceneData"> <div v-for="img in sceneData" :key="img.id"> <img class="image" :src="img.url" alt=""> </div> </viewer>
到此這篇關(guān)于vue3中使用viewerjs實(shí)現(xiàn)圖片預(yù)覽效果的項(xiàng)目實(shí)踐的文章就介紹到這了,更多相關(guān)vue3 viewerjs圖片預(yù)覽內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關(guān)文章
vue3中使用reactive定義的變量響應(yīng)式丟失問(wèn)題解決方案
這篇文章主要介紹了vue3中使用reactive定義的變量響應(yīng)式丟失問(wèn)題的具體例子和解決方案,文章通過(guò)代碼示例給大家講解的非常詳細(xì),對(duì)大家的學(xué)習(xí)或工作有一定的幫助,需要的朋友可以參考下2024-06-06
vue中優(yōu)雅實(shí)現(xiàn)數(shù)字遞增特效的詳細(xì)過(guò)程
項(xiàng)目中需要做數(shù)字滾動(dòng)增加的效果,一開(kāi)始很懵,研究了一下原理,發(fā)現(xiàn)很簡(jiǎn)單,下面這篇文章主要給大家介紹了關(guān)于vue中優(yōu)雅實(shí)現(xiàn)數(shù)字遞增特效的詳細(xì)過(guò)程,需要的朋友可以參考下2022-12-12
詳解vue-cli3開(kāi)發(fā)Chrome插件實(shí)踐
這篇文章主要介紹了vue-cli3開(kāi)發(fā)Chrome插件實(shí)踐，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-05-05
Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法
今天小編就為大家分享一篇Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
當(dāng)我們未設(shè)置keepAlive的最大緩存數(shù)時(shí),當(dāng)緩存組件太多,會(huì)導(dǎo)致內(nèi)存溢出,本文給大家介紹了vue3手動(dòng)刪除keepAlive緩存的方法,文中通過(guò)代碼示例介紹的非常詳細(xì),需要的朋友可以參考下2024-03-03
Vue3項(xiàng)目的3種創(chuàng)建方式代碼示例
使用VUE3開(kāi)發(fā)很久了,但一直沒(méi)進(jìn)行總結(jié)和記錄,忙里偷閑整理搭建一套VUE3項(xiàng)目,正好記錄一下,這篇文章主要給大家介紹了關(guān)于Vue3項(xiàng)目的3種創(chuàng)建方式,需要的朋友可以參考下2024-03-03
Vuepress 搭建帶評(píng)論功能的靜態(tài)博客的實(shí)現(xiàn)
這篇文章主要介紹了Vuepress 搭建帶評(píng)論功能的靜態(tài)博客的實(shí)現(xiàn)，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-02-02
Slots Emit和Props穿透組件封裝實(shí)現(xiàn)摸魚(yú)加鐘
這篇文章主要為大家介紹了Slots Emit和Props穿透組件封裝實(shí)現(xiàn)示例詳解，為摸魚(yú)加個(gè)鐘，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
vue修改對(duì)象的屬性值后頁(yè)面不重新渲染的實(shí)例
今天小編就為大家分享一篇vue修改對(duì)象的屬性值后頁(yè)面不重新渲染的實(shí)例，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-08-08
el-tree樹(shù)設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式
這篇文章主要介紹了el-tree樹(shù)設(shè)置懶加載以及設(shè)置默認(rèn)勾選方式，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-04-04