Le contenu de cet article explique comment créer le plug-in d'aperçu d'image vue (code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.
Composant d'aperçu d'image Vue basé sur photoswipe
1 La première étape
npm instatll vue-image-swipe -D
2 Étape 2
introduction du fichier d'entrée 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>
expose une seule méthodece .$imagePreview , et liez-le au prototype de vue
Utiliser
this.$imagePreview(options = {})
les options ont trois paramètres
参数 | 默认值 | 说明 |
---|---|---|
images | 空数组 | 图片的url数组 |
index | 0 | 预览图片的索引值, 默认是0 |
defaultOpt | {} | 配置项 |
éléments de configuration defaultOpt, veuillez vous référer aux éléments de configuration photoswipe,
Remarque : Il n'y a aucune garantie que tous les éléments de configuration soient disponibles
Répertoriez quelques configurations couramment utilisées
defaultOpt: { fullscreenEl: true, shareEl: false, arrowEl: true, preloaderEl: true, loop: false, bgOpacity: 0.85, showHideOpacity: true, errorMsg: '<p class="pswp__error-msg">图片加载失败</p>', }
Recommandations associées :
Sélectionnez les images HTML et prévisualisez directement le code d'implémentation
Comment utiliser Vue2x pour implémenter le plug-in d'aperçu d'image
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!