vue3中使用viewerjs實現(xiàn)圖片預覽效果的項目實踐
更新時間：2023年09月07日 14:49:24 作者：前端~初學者
viewer.js是一款開源的圖片預覽插件,功能十分強大,本文主要介紹了vue3中使用viewerjs實現(xiàn)圖片預覽效果的項目實踐,具有一定的參考價值,感興趣的可以了解一下
1、前言
viewer.js是一款開源的圖片預覽插件，功能十分強大:
- 支持移動設備觸摸事件
- 支持響應式
- 支持放大/縮小
- 支持旋轉（類似微博的圖片旋轉）
- 支持水平/垂直翻轉
- 支持圖片移動
- 支持鍵盤
- 支持全屏幻燈片模式（可做屏保）
- 支持縮略圖
- 支持標題顯示
- 支持多種自定義事件
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圖片預覽內容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關文章希望大家以后多多支持腳本之家！
您可能感興趣的文章:
相關文章
vue3中使用reactive定義的變量響應式丟失問題解決方案
這篇文章主要介紹了vue3中使用reactive定義的變量響應式丟失問題的具體例子和解決方案,文章通過代碼示例給大家講解的非常詳細,對大家的學習或工作有一定的幫助,需要的朋友可以參考下2024-06-06
vue中優(yōu)雅實現(xiàn)數(shù)字遞增特效的詳細過程
項目中需要做數(shù)字滾動增加的效果,一開始很懵,研究了一下原理,發(fā)現(xiàn)很簡單,下面這篇文章主要給大家介紹了關于vue中優(yōu)雅實現(xiàn)數(shù)字遞增特效的詳細過程,需要的朋友可以參考下2022-12-12
這篇文章主要介紹了vue-cli3開發(fā)Chrome插件實踐，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-05-05
Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法
今天小編就為大家分享一篇Vuex 在Vue 組件中獲得Vuex 狀態(tài)state的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
當我們未設置keepAlive的最大緩存數(shù)時,當緩存組件太多,會導致內存溢出,本文給大家介紹了vue3手動刪除keepAlive緩存的方法,文中通過代碼示例介紹的非常詳細,需要的朋友可以參考下2024-03-03
使用VUE3開發(fā)很久了,但一直沒進行總結和記錄,忙里偷閑整理搭建一套VUE3項目,正好記錄一下,這篇文章主要給大家介紹了關于Vue3項目的3種創(chuàng)建方式,需要的朋友可以參考下2024-03-03
Vuepress 搭建帶評論功能的靜態(tài)博客的實現(xiàn)
這篇文章主要介紹了Vuepress 搭建帶評論功能的靜態(tài)博客的實現(xiàn)，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-02-02
Slots Emit和Props穿透組件封裝實現(xiàn)摸魚加鐘
這篇文章主要為大家介紹了Slots Emit和Props穿透組件封裝實現(xiàn)示例詳解，為摸魚加個鐘，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
今天小編就為大家分享一篇vue修改對象的屬性值后頁面不重新渲染的實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-08-08
這篇文章主要介紹了el-tree樹設置懶加載以及設置默認勾選方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-04-04