Vue.js图片预览插件使用详解

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

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

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

<img v-for="(img,index) in imgs" 
   v-preview="img.url" 
   :src="/UploadFiles/2021-04-02/img.url">

以上为使用方法，下面说说插件的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. 新增第一张的提示，最后一张的提示
其他想说：
　　1. 本来想给大家做分组（就是同一个页面上大家想预览的图片可能是好多组，所以插件可能不满足）。但是因为公司时间紧，没有做，思路就是增加一个字段比如data-group 然后对list进行分组然后具体思路，如果有大佬想扩展的话 我可以无条件奉上我现有扩展的代码。
总结
以上所述是小编给大家介绍的Vue.js图片预览插件使用详解，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对网站的支持！