脚本宝典收集整理的这篇文章主要介绍了

实现一个vue的图片预览插件

脚本宝典小编觉得挺不错的,现在分享给大家,也给大家做个参考,希望能帮助你少写一行代码,多一份安全和惬意。
<p><code></p> <h1 id="articleHeader0">vue-image-swipe</h1> <p>基于photoswipe实现的vue图片预览组件</p> <h3 id="articleHeader1">安装</h3> <p>1 第一步</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="npm install vue-image-swipe -D" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs sql"><code style="word-break: break-word; white-space: initial;">npm <span class="hljs-keyword">install</span> vue-image-swipe -D</code></pre> <p>2 第二步</p> <p>vue 入口文件引入</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="import Vue from 'vue' import VueImageSwipe from 'vue-image-swipe' import 'vue-image-swipe/dist/vue-image-swipe.css' Vue.use(VueImageSwipe)" title="" data-original-title="复制"></span> </div> </p></div> <pre class="javascript hljs"><code class="javascript"><span class="hljs-keyword">import</span> <a href="http://www.js-code.com/tag/vue" title="浏览关于“Vue”的文章" target="_blank" class="tag_link">Vue</a> <span class="hljs-keyword">from</span> <span class="hljs-string">'vue'</span> <span class="hljs-keyword">import</span> VueImageSwipe <span class="hljs-keyword">from</span> <span class="hljs-string">'vue-image-swipe'</span> <span class="hljs-keyword">import</span> <span class="hljs-string">'vue-image-swipe/dist/vue-image-swipe.css'</span> Vue.use(VueImageSwipe)</code></pre> <h3 id="articleHeader2">使用</h3> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="<template></p> <div> hello world</p> <div> <ul> <li :key=&quot;index&quot; @click=&quot;preview(index)&quot; v-for=&quot;(l, index) in images&quot;><br /> <img :src=&quot;l&quot; alt=&quot;&quot;> </li> </ul></div> </div> <p></template><br /> <script> <a href="http://www.js-code.com/tag/export" title="export" target="_blank">export</a> 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) { <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.$imagePreview({ images: <a href="http://www.js-code.com/tag/this" title="this" target="_blank">this</a>.images, index: index, }) } } } </script>" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs xml"><code><span class="hljs-tag">&lt;<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name"><a href="http://www.js-code.com/tag/div" title="浏览关于“div”的文章" target="_blank" class="tag_link">div</a></span>&gt;</span> hello world <span class="hljs-tag">&lt;<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">li</span> <span class="hljs-attr">:key</span>=<span class="hljs-string">"index"</span> @<span class="hljs-attr">click</span>=<span class="hljs-string">"preview(index)"</span> <span class="hljs-attr">v-for</span>=<span class="hljs-string">"(l, index) in images"</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">img</span> <span class="hljs-attr">:src</span>=<span class="hljs-string">"l"</span> <span class="hljs-attr">alt</span>=<span class="hljs-string">""</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">li</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">ul</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">div</span>&gt;</span> <span class="hljs-tag">&lt;/<span class="hljs-name">template</span>&gt;</span> <span class="hljs-tag">&lt;<span class="hljs-name">script</span>&gt;</span><span class="javascript"> <span class="hljs-keyword"><a href="http://www.js-code.com/tag/export" title="浏览关于“export”的文章" target="_blank" class="tag_link">export</a></span> <span class="hljs-keyword">default</span> { <span class="hljs-attr">name</span>: <span class="hljs-string">'app'</span>, data() { <span class="hljs-keyword">return</span> { <span class="hljs-attr">images</span>: [ <span class="hljs-string">'http://oayhezji6.bkt.clouddn.com/preview1.jpg'</span>, <span class="hljs-string">'http://oayhezji6.bkt.clouddn.com/preview2.jpg'</span>, <span class="hljs-string">'http://oayhezji6.bkt.clouddn.com/preview3.jpg'</span>, <span class="hljs-string">'http://oayhezji6.bkt.clouddn.com/preview9.jpg'</span>, <span class="hljs-string">'http://oayhezji6.bkt.clouddn.com/preview10.jpg'</span>, <span class="hljs-string">'http://oayhezji6.bkt.clouddn.com/preview6.jpg'</span> ] } }, created() { }, <span class="hljs-attr">methods</span>: { preview(index) { <span class="hljs-keyword"><a href="http://www.js-code.com/tag/this" title="浏览关于“this”的文章" target="_blank" class="tag_link">this</a></span>.$imagePreview({ <span class="hljs-attr">images</span>: <span class="hljs-keyword">this</span>.images, <span class="hljs-attr">index</span>: index, }) } } } </span><span class="hljs-tag">&lt;/<span class="hljs-name">script</span>&gt;</span></code></pre> <h3 id="articleHeader3">methods</h3> <p>只暴露了一个方法<strong>this.$imagePreview</strong>,并绑定到vue的原型上<br />使用</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="this.$imagePreview(options = {})" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs kotlin"><code style="word-break: break-word; white-space: initial;"><span class="hljs-keyword">this</span>.$imagePreview(options = {})</code></pre> <p>options有三个参数</p> <table> <thead> <tr> <th>参数</th> <th>默认值</th> <th>说明</th> </tr> </thead> <tbody> <tr> <td>images</td> <td>空<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a></td> <td>图片的url<a href="http://www.js-code.com/tag/%e6%95%b0%e7%bb%84" title="数组" target="_blank">数组</a></td> </tr> <tr> <td>index</td> <td>0</td> <td>预览图片的索引值, 默认是0</td> </tr> <tr> <td>defaultOpt</td> <td>{}</td> <td>配置项</td> </tr> </tbody> </table> <p>defaultOpt 的配置项请参考<a href="http://photoswipe.com/documentation/options.html" rel="nofollow noreferrer" target="_blank">photoswipe配置项</a>,<br /><strong>注意:不能保证所有配置项都是可用的</strong></p> <p>列举一些常用的配置</p> <div class="widget-codetool" style="display:none;"> <div class="widget-codetool--inner"> <span class="selectCode code-tool" data-toggle="tooltip" data-placement="top" title="" data-original-title="全选"></span><br /> <span type="button" class="copyCode code-tool" data-toggle="tooltip" data-placement="top" data-clipboard-text="defaultOpt: { fullscreenEl: true, shareEl: false, arrowEl: true, preloaderEl: true, loop: false, bgOpacity: 0.85, showHideOpacity: true, errorMsg: ' <div class=&quot;pswp__error-msg&quot;>图片加载失败</div> <p>',<br /> }" title="" data-original-title="复制"></span> </div> </p></div> <pre class="hljs scala"><code>defaultOpt: { fullscreenEl: <span class="hljs-literal">true</span>, shareEl: <span class="hljs-literal">false</span>, arrowEl: <span class="hljs-literal">true</span>, preloaderEl: <span class="hljs-literal">true</span>, loop: <span class="hljs-literal">false</span>, bgOpacity: <span class="hljs-number">0.85</span>, showHideOpacity: <span class="hljs-literal">true</span>, errorMsg: '&lt;div <span class="hljs-class"><span class="hljs-keyword">class</span></span>=<span class="hljs-string">"pswp__error-msg"</span>&gt;图片加载失败&lt;/div&gt;', }</code></pre> <h3 id="articleHeader4">demo</h3> <p><a href="https://zhhshen.github.io/vue-image-swipe/example/index.html" rel="nofollow noreferrer" target="_blank">demo</a></p> <p><a href="https://github.com/zhhshen/vue-image-swipe" rel="nofollow noreferrer" target="_blank">查看源码</a></p> <p></code></p>

总结

以上是脚本宝典为你收集整理的

实现一个vue的图片预览插件

全部内容,希望文章能够帮你解决

实现一个vue的图片预览插件

所遇到的程序开发问题,欢迎加入QQ群277859234一起讨论学习。如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典网站推荐给程序员好友。 本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。

80%的人都看过