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

 更新时间:2018年08月27日 08:30:59   作者:金振宗  
Vue是一套用于构建用户界面的渐进式框架。这篇文章主要介绍了Vue.js图片预览插件的相关知识,非常不错,具有一定的参考借鉴价值,需要的朋友可以参考下

Vue.js 是什么

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

如果你想在深入学习 Vue 之前对它有更多了解,我们制作了一个视频,带您了解其核心概念和一个示例工程。

如果你已经是有经验的前端开发者,想知道 Vue 与其它库/框架有哪些区别,请查看对比其它框架。

预览(原文章的预览,非扩展后的)

 

安装  

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

使用

首先在项目的入口文件中引入, 调用 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"
   preview-top-title-tnable="true"
   preview-title-extend="false"
   data-title="这里是顶部标题"
>

以上为使用方法,下面说说插件的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图片预览插件使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

相关文章

  • Vue使用mockjs问题(返回数据、get、post 请求)

    Vue使用mockjs问题(返回数据、get、post 请求)

    这篇文章主要介绍了Vue使用mockjs问题(返回数据、get、post 请求),具有很好的参考价值,希望对大家有所帮助。
    2023-05-05
  • Vue两个版本的区别和使用方法(更深层次了解)

    Vue两个版本的区别和使用方法(更深层次了解)

    在我们使用 vue时,我们可以引用两个不同版本的 Vue,分别是 Vue完整版(vue.js)和 Vue(vue.runtime.js )非完整版,那么它们的区别是什么呢,今天我们就来分析下这两个不同版本之间的区别,一起看看吧
    2020-02-02
  • vue图片懒加载代码实现

    vue图片懒加载代码实现

    这篇文章主要给大家介绍了关于vue图片懒加载代码实现的相关资料,所谓图片懒加载是指当我们浏览页面时,只加载我们浏览器可视区的图片,向下滚动时再继续加载后面的图片,需要的朋友可以参考下
    2023-07-07
  • vue移动端实现红包雨效果

    vue移动端实现红包雨效果

    这篇文章主要为大家详细介绍了vue移动端实现红包雨效果,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • vue-router报错:uncaught error during route navigati问题及解决

    vue-router报错:uncaught error during route 

    这篇文章主要介绍了vue-router报错:uncaught error during route navigati问题及解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2023-06-06
  • 基于vue-cli、elementUI的Vue超简单入门小例子(推荐)

    基于vue-cli、elementUI的Vue超简单入门小例子(推荐)

    这篇文章主要介绍了基于vue-cli、elementUI的Vue超简单入门小例子,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2019-04-04
  • 深入浅析Vue中mixin和extend的区别和使用场景

    深入浅析Vue中mixin和extend的区别和使用场景

    Vue中有两个较为高级的静态方法mixin和extend,接下来给大家介绍Vue中mixin和extend的区别和使用场景,感兴趣的朋友一起看看吧
    2019-08-08
  • vue使用echarts词云图的实战记录

    vue使用echarts词云图的实战记录

    这篇文章主要给大家介绍了关于vue使用echarts词云图的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2021-05-05
  • 详解vue 项目白屏解决方案

    详解vue 项目白屏解决方案

    这篇文章主要介绍了详解vue 项目白屏解决方案,详细的介绍了白屏的解决方案,非常具有实用价值,需要的朋友可以参考下
    2018-10-10
  • vue使用pdf-dist实现pdf预览以及水印添加

    vue使用pdf-dist实现pdf预览以及水印添加

    这篇文章主要为大家详细介绍了vue如何使用pdf-dist实现pdf预览以及水印添加的功能,文中的示例代码讲解详细,感兴趣的小伙伴可以跟随小编一起学习一下
    2023-10-10

最新评论