如何在Vue.js项目中使用图片预览插件 - 行业资讯 - 肥雀云

　　介绍

如何在Vue.js项目中使用图片预览插件?针对这个问题,这篇文章详细介绍了相对应的分析和解答,希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

<强> Vue。js是什么

Vue(读音/vju吗?/,类似于视图)是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是,Vue被设计为可以自底向上逐层应用.Vue的核心库只关注视图层,不仅易于上,手还便于与第三方库或既有项目整合。另一方面,当与现代化的工具链以及各种支持类库结合使用时,Vue也完全能够为复杂的单页应用提供驱动。

<强>安装

npm install ,,节省vue-picture-preview-extend

<强>使用

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

import vuePicturePreview 得到& # 39;vue-picture-preview& # 39; 　　Vue.use (vuePicturePreview)

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

& lt; !——, Vue root compoment template ——比; 　　& lt; div id=癮pp"祝辞　　& lt;才能router-view> & lt;/router-view> 　　& lt;才能lg-preview> & lt;/lg-preview> 　　& lt;/div>

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

& lt; img v=?img、索引),imgs"拷贝, 　　,,v-preview=癷mg.url", 　　,,:src=https://www.yisu.com/zixun/癷mg.url” 　　:alt=" img.title” 　　:关键="指数” 　　preview-title-enable=" true " 　　preview-nav-enable=" true " 　　preview-top-title-tnable=" true " 　　preview-title-extend=" false " 　　data-title="这里是顶部标题”>

<强>以上为使用方法、下面说说插件的api

原有api:

1。isTitleEnable:(布尔,可选)设置preview-title-enable=癴alse"将禁用底部标题。默认值:没错。

2。isHorizontalNavEnable:(布尔,可选)设置preview-nav-enable=癴alse"将禁用水平导航。默认值:真

扩展版本api:

1. iscurrentandalltitle:(布尔,可选)设置preview-title-extend=false将底部标题(当前页/总页数)类型进行关闭(开启时isTitleEnable)将无效。默认值:true
2. istoptitleshow:(布尔,可选)设置preview-top-title-tnable=false将顶部标题禁用,默认值:true。
3. toptitle:(字符串,可选)设置data-title设置顶部标题文本,无默认值
扩展版新增功能(含修改):

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

2。新增顶部标题(通过取img上设置的data-title生成)

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

4。新增第一张的提示,最后一张的提示

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