Vue使用v-viewer實(shí)現(xiàn)圖片預(yù)覽
本文實(shí)例為大家分享了Vue使用v-viewer實(shí)現(xiàn)圖片預(yù)覽的具體代碼,供大家參考,具體內(nèi)容如下
1.安裝依賴(lài)
npm install v-viewer --save
2.在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’ } })
3.在組件中引用
<van-swipe :autoplay='3000'> <van-swipe-item v-for='(image, index) in moodsImg' :key='index'> <viewer :images = 'moodsImg' > <img :src='http://m.piao2010.com/bcjs/image'/> </viewer> </van-swipe-item></van-swipe>
效果
以上就是本文的全部?jī)?nèi)容,希望對(duì)大家的學(xué)習(xí)有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關(guān)文章:
1. 低版本IE正常運(yùn)行HTML5+CSS3網(wǎng)站的3種解決方案2. jsp實(shí)現(xiàn)局部刷新頁(yè)面、異步加載頁(yè)面的方法3. xml文件的結(jié)構(gòu)解讀第1/2頁(yè)4. Jsp中request的3個(gè)基礎(chǔ)實(shí)踐5. 使用python修改文件并立即寫(xiě)回到原始位置操作(inplace讀寫(xiě))6. Java map.getOrDefault()方法的用法詳解7. 什么是python的id函數(shù)8. python GUI庫(kù)圖形界面開(kāi)發(fā)之PyQt5工具欄控件QToolBar的詳細(xì)使用方法與實(shí)例9. Python填充任意顏色,不同算法時(shí)間差異分析說(shuō)明10. Android 解決sqlite無(wú)法創(chuàng)建新表的問(wèn)題
