如何在Vue.js项目中使用图片预览插件-创新互联

npm install --save vue-picture-preview-extend

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

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

以上为使用方法，下面说说插件的api

原有api：

1.isTitleEnable: (boolean, optional) 设置 preview-title-enable="false" 将禁用底部标题. 默认值: true.

2.isHorizontalNavEnable: (boolean, optional) 设置 preview-nav-enable="false" 将禁用水平导航. 默认值: true

扩展版本api：

1.isCurrentAndAllTitle：(boolean,optional) 设置 preview-title-extend=false 将底部标题(当前页/总页数)类型进行关闭(开启时isTitleEnable)将无效。默认值：true
2.isTopTitleShow：(boolean,optional) 设置preview-top-title-tnable=false 将顶部标题禁用,默认值：true.
3.topTitle:(string,optional) 设置data-title 设置顶部标题文本，无默认值
扩展版新增功能（含修改）：

　　1. 新增底部标题类型（原有类型取alt属性，考虑到alt可能别有用途或者就是想直接要一个index/total这样的当前页/总页数的底部标题，设置了这种类型取alt的底部标题类型就不会显示）

　　2. 新增顶部标题（通过取img上设置的data-title生成）

      3. 新增一个左右滑动切换图片

　　4. 新增第一张的提示，最后一张的提示

关于如何在Vue.js项目中使用图片预览插件问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注创新互联成都网站设计公司行业资讯频道了解更多相关知识。

另外有需要云服务器可以了解下创新互联scvps.cn，海内外云服务器15元起步，三天无理由+7*72小时售后在线，公司持有idc许可证，提供“云服务器、裸金属服务器、高防服务器、香港服务器、美国服务器、虚拟主机、免备案服务器”等云主机租用服务以及企业上云的综合解决方案，具有“安全稳定、简单易用、服务可用性高、性价比高”等特点与优势，专为企业上云打造定制，能够满足用户丰富、多元化的应用场景需求。