脚本宝典收集整理的这篇文章主要介绍了移动端Vue.js图片预览插件，脚本宝典觉得挺不错的，现在分享给大家，也给大家做个参考。

小宝典致力于为广大程序猿（媛）提供高品质的代码服务，请大家多多光顾小站，小宝典在此谢过。

vue-picture-preview

移动端Vue.js图片预览插件 | mobile-friendly picture file PReview Vue.js plugin wITh horizontal nav and bottom title.

安装

NPM

npm install --save vue-picture-preview

使用

首先在项目的入口文件中引入, 调用 Vue.use 安装。

import vuePicturePreview From 'vue-picture-preview' Vue.use(vuePicturePreview)

在根组件添加 lg-preview 组件的位置

<!-- Vue root compoment template --> <div id="app">     <router-view></router-view>     <lg-preview></lg-preview> </div>

对于所有图片都可以使用 v-preview 指令来绑定他们的预览功能

<img v-for="(img,index) in imgs"       v-preview="img.url"       :src="img.url"       :alt="img.title"       :key="index"      preview-title-enable="true"      preview-nav-enable="true">

export default {     data () {         return {             imgs: [                 {                   url: 'http://covteam.u.qiniudn.COM/ka2.jpg',                   title: 'pic1'                 },                 {                   url: 'http://covteam.u.qiniudn.com/poster.png',                   title: 'pic2'                 }             ]         }     } }

<style scoPEd> img {    width: 100%;    height: 100%; } </style>

API

• isTitleEnable: (boolean, optional) 设置 preview-title-enable="false" 将禁用底部标题. 默认值: true.
• isHorizontalNavEnable: (boolean, optional) 设置 preview-nav-enable="false" 将禁用水平导航. 默认值: true.

觉得可用，就经常来吧！ 脚本宝典 欢迎评论哦！ vue，巧夺天工，精雕玉琢。小宝典献丑了！

脚本宝典总结

以上是脚本宝典为你收集整理的移动端Vue.js图片预览插件全部内容，希望文章能够帮你解决移动端Vue.js图片预览插件所遇到的问题。

如果觉得脚本宝典网站内容还不错，欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ：384754419，请注明来意。