這篇文章帶給大家的內容是關於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中文網其他相關文章！
