Vue使用v-viewer實現(xiàn)圖片預覽
本文實例為大家分享了Vue使用v-viewer實現(xiàn)圖片預覽的具體代碼,供大家參考,具體內(nèi)容如下
1.安裝依賴
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://www.leifengta.com.cn/bcjs/image'/> </viewer> </van-swipe-item></van-swipe>
效果

以上就是本文的全部內(nèi)容,希望對大家的學習有所幫助,也希望大家多多支持好吧啦網(wǎng)。
相關文章:
1. Android table布局開發(fā)實現(xiàn)簡單計算器2. 理解PHP5中static和const關鍵字3. jQuery 實現(xiàn)DOM元素拖拽交換位置的實例代碼4. php模擬實現(xiàn)斗地主發(fā)牌5. IntelliJ IDEA安裝插件的方法步驟6. phpstorm恢復默認設置的方法步驟7. Vue封裝一個TodoList的案例與瀏覽器本地緩存的應用實現(xiàn)8. Python random庫使用方法及異常處理方案9. Vuex localStorage的具體使用10. .Net Core使用Coravel實現(xiàn)任務調(diào)度的完整步驟

網(wǎng)公網(wǎng)安備