vue v-viewer組件使用示例詳解(v-viewer輪播圖)
更新時間：2023年02月09日 09:31:24 作者：長安依舊
這篇文章主要介紹了vue v-viewer組件使用示例詳解(v-viewer輪播圖),本文結(jié)合實例代碼給大家介紹的非常詳細，對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值，需要的朋友可以參考下
v-viewer輪播圖
效果圖
Bandicam（錄制視頻）+soogif（視頻轉(zhuǎn)成gif）
實現(xiàn)效果：
輪播圖+縮放、旋轉(zhuǎn)照片
組件介紹
vue 預(yù)覽圖片研究過v-viewer及基于photoswipe的vue-photo-preview插件。
相同點：
兩者都可以實現(xiàn)預(yù)覽、放大、切換圖片（輪播圖效果）的功能，
差異：
1.vue-photo-preview頁面效果會比v-viewer好看些；
2.vue-photo-preview雖然可以實現(xiàn)放大圖片的功能，但是放大倍數(shù)不可進行調(diào)整，v-viewer可隨意放大及縮小；
3.v-viewer另外提供旋轉(zhuǎn)、翻轉(zhuǎn)功能（由于拍攝的照片各種角度都有，若圖片預(yù)覽具有旋轉(zhuǎn)功能，超加分）；
插件安裝
安裝
npm install v-viewer
配置main.js
import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewer' import Vue from 'vue' Vue.use(Viewer)
代碼實現(xiàn)
<template>
<div style="height: 500px;width: 800px;background-color: #222222">
<viewer class="viewer" ref="viewer" :options="optionsViewer" :images="pics"
style="width: 100%;height: 100%;background-size: contain;background-repeat: no-repeat;
background-position: center;background-color: #3e5c9a;">
<img v-for="(img, index) in pics" :src="img"
:key="index" style="opacity: 0.2;display: none;width: 400px;height: 300px;background-color: #42b983;"/>
</viewer>
</div>
</template>
<script>
export default {
name: 'App',
components: {},
data() {
return {
optionsViewer: {
zIndex: 99999,
inline: true,
button: false,
navbar: true,
title: false,
toolbar: true,
tooltip: true,
movable: true,
zoomable: true,
rotatable: true,
scalable: true,
transition: true,
fullscreen: false,
keyboard: true,
url: 'data-source'
},
pics: ['https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943',
'https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943',
'https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943',
'https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943',
'https://wpimg.wallstcn.com/4c69009c-0fd4-4153-b112-6cb53d1cf943'],
}
},
}
</script>
<style lang="scss" scoped>
</style>
備注：由于多個地方用了v-viewer，但僅僅想修改部分頁面的默認配置，可參考上面代碼。若是作用于整個項目，可將配置添加到main.js文件。
參考：v-viewer
補充：v-viewer的使用（vue）
下載插件
npm install v-viewer --save
在需要使用的頁面進行導(dǎo)入
import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewer' import Vue from 'vue' Vue.use(Viewer)
在定義一個div用來存放img
<div v-viewer> ? ? ? <img /> </div>
這樣就好了?。?！
到此這篇關(guān)于vue v-viewer組件使用的文章就介紹到這了,更多相關(guān)vue v-viewer組件使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue發(fā)送websocket請求和http post請求的實例代碼
這篇文章主要介紹了vue發(fā)送websocket請求和http post請求的方法，本文通過實例代碼給大家介紹的非常詳細，具有一定的參考借鑒價值 ,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue3 $attrs和inheritAttrs的用法說明，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-04-04
axios是一個基于promise的HTTP庫,可以用在瀏覽器和?node.js?中,下面這篇文章主要給大家介紹了關(guān)于vue項目實戰(zhàn)之優(yōu)雅使用axios的相關(guān)資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-02-02
這篇文章主要為大家介紹了Vue transx組件切換動畫庫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-07-07
vue3+vite使用History路由模式打包部署項目的步驟及注意事項
這篇文章主要介紹了vue3+vite使用History路由模式打包部署項目的步驟及注意事項,配置過程包括在Vue項目中設(shè)置路由模式、調(diào)整打包配置以及Nginx服務(wù)器的配置,正確的部署配置能夠確保應(yīng)用順利運行,提升用戶體驗,需要的朋友可以參考下2024-10-10
這篇文章主要介紹了解決echarts 一條柱狀圖顯示兩個值,類似進度條的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue如何自定義按鈕單選和多選問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家介紹了Vue 2源碼解讀$mount原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪2022-08-08
這篇文章主要為大家詳細介紹了Vue實現(xiàn)時間軸效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03
vue+element-ui實現(xiàn)頭部導(dǎo)航欄組件
這篇文章主要為大家詳細介紹了vue+element-ui實現(xiàn)頭部導(dǎo)航欄組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09