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>
備注：由于多個地方用了v-viewer，但僅僅想修改部分頁面的默認(rèn)配置，可參考上面代碼。若是作用于整個項(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)
在定義一個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中使用swiper插件,在pc端和h5端也是常用的插件,下面這篇文章主要給大家介紹了關(guān)于vue3中使用swiper的完整版教程,需要的朋友可以參考下2023-04-04
vue3網(wǎng)絡(luò)請求添加loading過程
這篇文章主要介紹了vue3網(wǎng)絡(luò)請求添加loading過程,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法
兩組件間傳值，可能包含多種情況，這篇文章主要介紹了vue兩組件間值傳遞 $router.push實(shí)現(xiàn)方法，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧2019-05-05
使用Vue3-Ace-Editor如何在Vue3項(xiàng)目中集成代碼編輯器
這篇文章主要介紹了使用Vue3-Ace-Editor如何在Vue3項(xiàng)目中集成代碼編輯器,具有很好的參考價值,希望對大家有所幫助,如有錯誤或未考慮完全的地方,望不吝賜教2024-08-08
本篇文章主要介紹了Vue+Element使用富文本編輯器的示例代碼，具有一定的參考價值，有興趣的可以了解一下2017-08-08
關(guān)于vue-admin-element中的動態(tài)加載路由
這篇文章主要介紹了關(guān)于vue-admin-element的動態(tài)加載路由，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2022-08-08
php+vue3實(shí)現(xiàn)點(diǎn)選驗(yàn)證碼功能
這篇文章主要介紹了php+vue3實(shí)現(xiàn)點(diǎn)選驗(yàn)證碼,本文通過實(shí)例代碼給大家介紹的詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價值,需要的朋友參考下吧2023-11-11
這篇文章主要介紹了vue組件中修改組件外元素樣式,本文給大家分享兩種解決方案幫助大家解決這樣的問題，結(jié)合實(shí)例代碼給大家介紹的非常詳細(xì)，需要的朋友可以參考下2023-05-05
這篇文章主要介紹了Vue引入sass并配置全局變量的方法2018-06-06
今天小編就為大家分享一篇關(guān)于vue中$nextTick的用法講解，小編覺得內(nèi)容挺不錯的，現(xiàn)在分享給大家，具有很好的參考價值，需要的朋友一起跟隨小編來看看吧2019-01-01