vue3中使用viewerjs實(shí)現(xiàn)圖片預(yù)覽效果的項(xiàng)目實(shí)踐
更新時(shí)間：2023年09月07日 14:49:24 作者：前端~初學(xué)者
viewer.js是一款開源的圖片預(yù)覽插件,功能十分強(qiáng)大,本文主要介紹了vue3中使用viewerjs實(shí)現(xiàn)圖片預(yù)覽效果的項(xiàng)目實(shí)踐,具有一定的參考價(jià)值,感興趣的可以了解一下
1、前言
viewer.js是一款開源的圖片預(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: {
// 需要配置的屬性 注意屬性并沒有引號(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)文章
解決基于 keep-alive 的后臺(tái)多級(jí)路由緩存問題
這篇文章主要介紹了解決基于 keep-alive 的后臺(tái)多級(jí)路由緩存問題,本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2020-12-12
vue.js云存儲(chǔ)實(shí)現(xiàn)圖片上傳功能
示對(duì)象存儲(chǔ)是騰訊云提供的一種存儲(chǔ)海量文件的分布式存儲(chǔ)服務(wù)，本文主要介紹了用vue.js實(shí)現(xiàn)圖片上傳功能，感興趣的小伙伴們可以參考一下2021-05-05
Vue3+Vite+Nginx部署后刷新404白屏問題的完整排查指南
文章詳細(xì)介紹了Vue單頁應(yīng)用（SPA）首次進(jìn)入頁面正常,一刷新就白屏或404的兩種情況及其背后的原因,文章還提供了完整的修復(fù)步驟,包括修改Vite打包配置、檢查Nginx配置、重新構(gòu)建并部署等,需要的朋友可以參考下2026-03-03
Vue封裝Swiper實(shí)現(xiàn)圖片輪播效果
圖片輪播是前端中經(jīng)常需要實(shí)現(xiàn)的一個(gè)功能。最近學(xué)習(xí)Vue.js，就針對(duì)Swiper進(jìn)行封裝，實(shí)現(xiàn)一個(gè)簡(jiǎn)單的圖片輪播組件。感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-02-02
這篇文章主要為大家詳細(xì)介紹了vue實(shí)現(xiàn)簡(jiǎn)單分頁功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
Vue如何實(shí)現(xiàn)數(shù)據(jù)的上移和下移
這篇文章主要介紹了Vue如何實(shí)現(xiàn)數(shù)據(jù)的上移和下移問題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-06-06
vue之郵箱、密碼、手機(jī)號(hào)碼等輸入驗(yàn)證規(guī)則說明
這篇文章主要介紹了vue之郵箱、密碼、手機(jī)號(hào)碼等輸入驗(yàn)證規(guī)則說明,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-10-10
這篇文章主要介紹了vue全局自定義指令和局部自定義指令的使用，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-01-01
swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法
今天小編就為大家分享一篇swiper在vue項(xiàng)目中l(wèi)oop循環(huán)輪播失效的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過來看看吧2018-09-09
安裝vue-cli的前提是你已經(jīng)安裝了npm，安裝npm你可以直接下載node的安裝包進(jìn)行安裝。接下來通過本文給大家介紹安裝vue-cli的簡(jiǎn)易過程，感興趣的朋友跟隨腳本之家小編一起學(xué)習(xí)吧2018-05-05