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