この記事の内容は、vue 画像プレビュー プラグイン (コード) の作成方法に関するものです。必要な方は参考にしていただければ幸いです。
vue-image-swipe
photoswipe に基づく Vue 画像プレビュー コンポーネント
インストール
1 最初のステップ
1 | npm instatll vue-image-swipe -D
|
ログイン後にコピー
2 2 番目のステップ
vue エントリ ファイルの紹介
1 2 3 4 | import Vue from 'vue'
import VueImageSwipe from 'vue-image-swipe'
import 'vue-image-swipe/dist/vue-image-swipe.css'
Vue. use (VueImageSwipe)
|
ログイン後にコピー
Use
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | <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>
|
ログイン後にコピー
methods
公開されるメソッドは 1 つだけですthis.$imagePreview 、 vue のプロトタイプにバインドされています
Use
1 | this. $imagePreview (options = {})
|
ログイン後にコピー
options には 3 つのパラメータがあります
画像##画像の URL 配列#index0プレビュー画像のインデックス値、デフォルトは 0設定項目defaultOpt の設定項目については、photoswipe の設定項目を参照してください。注: すべての設定が保証されるわけではありません。項目が利用可能です
Parameters |
Default value |
説明 |
##空の配列 | | |
|
##defaultOpt |
{} |
|
| |
一般的に使用される構成をいくつかリストします
#
1 2 3 4 5 6 7 8 9 10 | defaultOpt: {
fullscreenEl: true,
shareEl: false,
arrowEl: true,
preloaderEl: true,
loop: false,
bgOpacity: 0.85,
showHideOpacity: true,
errorMsg: '<p class="pswp__error-msg">图片加载失败</p>' ,
}
|
ログイン後にコピー
関連する推奨事項:
#HTML 画像を選択し、実装コードを直接プレビューします
Vue2x を使用して画像プレビュー プラグインを実装する方法
以上がフォトスワイプに基づいて実装された Vue 画像プレビュー コンポーネント (コード)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。