這篇文章帶給大家的內容是關於vue圖片預覽外掛如何創造(程式碼),有一定的參考價值,有需要的朋友可以參考一下,希望對你有幫助。
基於photoswipe實現的vue圖片預覽元件
1 第一步
npm instatll vue-image-swipe -D
2第二步
vue 入口檔案引入
import Vue from 'vue' import VueImageSwipe from 'vue-image-swipe' import 'vue-image-swipe/dist/vue-image-swipe.css' Vue.use(VueImageSwipe)
<template> <div> hello world <div> <ul> <li :key="index" @click="preview(index)" v-for="(l, index) in images"> <img :src="l" alt=""> </li> </ul> </div> </div> </template> <script> export default { name: 'app', data() { return { images: [ 'http://oayhezji6.bkt.clouddn.com/preview1.jpg', 'http://oayhezji6.bkt.clouddn.com/preview2.jpg', 'http://oayhezji6.bkt.clouddn.com/preview3.jpg', 'http://oayhezji6.bkt.clouddn.com/preview9.jpg', 'http://oayhezji6.bkt.clouddn.com/preview10.jpg', 'http://oayhezji6.bkt.clouddn.com/preview6.jpg' ] } }, created() { }, methods: { preview(index) { this.$imagePreview({ images: this.images, index: index, }) } } } </script>
只揭露了一個方法this.$imagePreview ,並綁定到vue的原型上
使用
this.$imagePreview(options = {})
options有三個參數
預設值 | 說明 | |
---|---|---|
空數組 | 圖片的url數組 | |
0 | 預覽圖片的索引值, 預設是0 | |
{} | 設定項 |
注意:無法保證所有設定項都是可用的
defaultOpt: { fullscreenEl: true, shareEl: false, arrowEl: true, preloaderEl: true, loop: false, bgOpacity: 0.85, showHideOpacity: true, errorMsg: '<p class="pswp__error-msg">图片加载失败</p>', }相關推薦:
以上是基於photoswipe實現的vue圖片預覽組件(程式碼)的詳細內容。更多資訊請關注PHP中文網其他相關文章!