vue v-viewer組件使用示例詳解(v-viewer輪播圖)
v-viewer輪播圖
效果圖
Bandicam（錄制視頻）+soogif（視頻轉(zhuǎn)成gif）
實(shí)現(xiàn)效果：
輪播圖+縮放、旋轉(zhuǎn)照片
組件介紹
vue 預(yù)覽圖片研究過v-viewer及基于photoswipe的vue-photo-preview插件。
相同點(diǎn)：
兩者都可以實(shí)現(xiàn)預(yù)覽、放大、切換圖片（輪播圖效果）的功能，
差異：
1.vue-photo-preview頁面效果會比v-viewer好看些；
2.vue-photo-preview雖然可以實(shí)現(xiàn)放大圖片的功能，但是放大倍數(shù)不可進(jìn)行調(diào)整，v-viewer可隨意放大及縮?。?br />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)
代碼實(shí)現(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>
備注：由于多個(gè)地方用了v-viewer，但僅僅想修改部分頁面的默認(rèn)配置，可參考上面代碼。若是作用于整個(gè)項(xiàng)目，可將配置添加到main.js文件。
參考：v-viewer
補(bǔ)充：v-viewer的使用（vue）
下載插件
npm install v-viewer --save
在需要使用的頁面進(jìn)行導(dǎo)入
import 'viewerjs/dist/viewer.css' import Viewer from 'v-viewer' import Vue from 'vue' Vue.use(Viewer)
在定義一個(gè)div用來存放img
<div v-viewer> ? ? ? <img /> </div>
這樣就好了！?。?/p>
到此這篇關(guān)于vue v-viewer組件使用的文章就介紹到這了,更多相關(guān)vue v-viewer組件使用內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！
相關(guān)文章
vue發(fā)送websocket請求和http post請求的實(shí)例代碼
這篇文章主要介紹了vue發(fā)送websocket請求和http post請求的方法，本文通過實(shí)例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值 ,需要的朋友可以參考下2019-07-07
這篇文章主要介紹了vue3 $attrs和inheritAttrs的用法說明，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-04-04
vue項(xiàng)目實(shí)戰(zhàn)之優(yōu)雅使用axios
axios是一個(gè)基于promise的HTTP庫,可以用在瀏覽器和?node.js?中,下面這篇文章主要給大家介紹了關(guān)于vue項(xiàng)目實(shí)戰(zhàn)之優(yōu)雅使用axios的相關(guān)資料,文中通過實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2022-02-02
這篇文章主要為大家介紹了Vue transx組件切換動畫庫示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-07-07
vue3+vite使用History路由模式打包部署項(xiàng)目的步驟及注意事項(xiàng)
這篇文章主要介紹了vue3+vite使用History路由模式打包部署項(xiàng)目的步驟及注意事項(xiàng),配置過程包括在Vue項(xiàng)目中設(shè)置路由模式、調(diào)整打包配置以及Nginx服務(wù)器的配置,正確的部署配置能夠確保應(yīng)用順利運(yùn)行,提升用戶體驗(yàn),需要的朋友可以參考下2024-10-10
解決echarts 一條柱狀圖顯示兩個(gè)值,類似進(jìn)度條的問題
這篇文章主要介紹了解決echarts 一條柱狀圖顯示兩個(gè)值,類似進(jìn)度條的問題，具有很好的參考價(jià)值，希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07
這篇文章主要介紹了vue如何自定義按鈕單選和多選問題，具有很好的參考價(jià)值，希望對大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2023-07-07
這篇文章主要為大家介紹了Vue 2源碼解讀$mount原理示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪2022-08-08
這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)時(shí)間軸效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2022-03-03
vue+element-ui實(shí)現(xiàn)頭部導(dǎo)航欄組件
這篇文章主要為大家詳細(xì)介紹了vue+element-ui實(shí)現(xiàn)頭部導(dǎo)航欄組件，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2021-09-09