VUE中點擊圖片放大
在我們開辟后臺里面我們經常會用到點擊圖片放大的功能，然后實現這個功能若是本身手寫的話需要破費的時候又比力的多，并且思慮的層面可能沒有那么的深，隨時城市需求發生改變還需要繼續擴展！這個時辰我們就需要利用一個插件來達到快速開辟
東西/原料
- Visual Studio Code
- vue2.0+element ui+v-viewer
方式/步調
- 1
起首我們來看下今天的本家兒角【v-viewer】，v-viewer供給點擊下一張，上一張，扭轉，主動播放，放大等一些我們常用的功能，結果見圖
- 2
此刻我們起頭安裝這個組件到我們的項目里面，號令面板里面我們需要執行一個安裝號令【npm install v-viewer --save】
- 3
安裝完之后我們在vue項目里面的main.js需要對這個組件進行引用
import Viewer from 'v-viewer'
import 'viewerjs/dist/viewer.css'
Vue.use(Viewer)
Viewer.setDefaults({
Options: { 'inline': true, 'button': true, 'navbar': true, 'title': true, 'toolbar': true, 'tooltip': true, 'movable': true, 'zoomable': true, 'rotatable': true, 'scalable': true, 'transition': true, 'fullscreen': true, 'keyboard': true, 'url': 'data-source' }
})
- 4
到了這里我們根基就把【v-viewer】這個組件放在我們的項目里面。在將來我們需要進行利用的時辰，只要在在頁面上面直接用就好了，起首在模板里面加上HTML代碼
<viewer :images="arrayList">
<img
v-for="(src,index) in arrayList"
:src="src"
:key="index"
class="pro-img"
>
</viewer>
這里的【arrayList】是利用者本身界說的一個數組，這里出格的本家兒意必然如果變量，若是你的圖片后臺返回的不是一個變量，你就需要本身把它進行一個組裝當作數組就好了，圖片給的是我今朝在利用的代碼，大師看的時辰要連系起來一路理解一下
- 5
好了，到這里就們就實現了點擊圖片放大的功能了！
注重事項
- 遍歷的時辰必然要弄當作一個數組，可能數組對象也可以，我沒有測驗考試，大師可以去嘗嘗
- 按照步調走的話，根基是沒有問題的
- 感覺不錯的話，記得投個票哦
- 發表于 2019-05-16 23:40
- 閱讀 ( 911 )
- 分類：其他類型
0 篇文章
作家榜 ?
-
xiaonan123
189 文章
-
湯依妹兒
97 文章
-
luogf229
46 文章
-
jy02406749
45 文章
-
小凡
34 文章
-
Daisy萌
32 文章
-
我的QQ3117863681
24 文章
-
華志健
23 文章