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


Posted in Javascript onAugust 27, 2018

Vue.js 是什么

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

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

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

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

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

安装  

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图片预览插件使用详解,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
在网站上应该用的30个jQuery插件整理
Nov 03 Javascript
js字符串转换成xml对象并使用技巧解读
Apr 18 Javascript
jQuery的live()方法对hover事件的处理示例
Feb 27 Javascript
基于Jquery实现焦点图淡出淡入效果
Nov 30 Javascript
js将字符串中的每一个单词的首字母变为大写其余均为小写
Jan 05 Javascript
微信小程序 支付功能开发错误总结
Feb 21 Javascript
详解Angular2学习笔记之Html属性绑定
Jan 03 Javascript
原生js调用json方法总结
Feb 22 Javascript
详解 微信小程序开发框架(MINA)
May 17 Javascript
微信小程序wx.request拦截器使用详解
Jul 09 Javascript
vue+iview框架实现左侧动态菜单功能的示例代码
Jul 23 Javascript
微信小程序中wxs文件的一些妙用分享
Feb 18 Javascript
JavaScript中创建原子的方法总结
Aug 26 #Javascript
解决vue.js 数据渲染成功仍报错的问题
Aug 25 #Javascript
解决Vue.js由于延时显示了{{message}}引用界面的问题
Aug 25 #Javascript
vue中各选项及钩子函数执行顺序详解
Aug 25 #Javascript
vue实现在一个方法执行完后执行另一个方法的示例
Aug 25 #Javascript
JS Object.preventExtensions(),Object.seal()与Object.freeze()用法实例分析
Aug 25 #Javascript
对Vue beforeRouteEnter 的next执行时机详解
Aug 25 #Javascript
You might like
Smarty安装配置方法
2008/04/10 PHP
PHP获取http请求的头信息实现步骤
2012/12/16 PHP
在WordPress中使用PHP脚本来判断访客来自什么国家
2015/12/10 PHP
PHP匿名函数和use子句用法实例
2016/03/16 PHP
thinkPHP框架实现图像裁剪、缩放、加水印的方法
2017/03/14 PHP
jquery 得到当前页面高度和宽度的两个函数
2010/02/21 Javascript
判断对象是否Window的实现代码
2012/01/10 Javascript
js中根据字数截取字符串,不能截断url
2012/01/12 Javascript
Js(JavaScript)中,弹出是或否的选择框示例(confirm用法的实例分析)
2013/07/09 Javascript
jQuery点击自身以外地方关闭弹出层的简单实例
2013/12/24 Javascript
JS按回车键实现登录的方法
2014/08/25 Javascript
javascript实现很浪漫的气泡冒出特效
2020/09/05 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
JavaScript hasOwnProperty() 函数实例详解
2017/08/04 Javascript
vue引入jq插件的实例讲解
2017/09/12 Javascript
详解react内联样式使用webpack将px转rem
2018/09/13 Javascript
vue计算属性computed、事件、监听器watch的使用讲解
2019/01/21 Javascript
vue实现将数据存入vuex中以及从vuex中取出数据
2019/11/08 Javascript
javascript设计模式 ? 代理模式原理与用法实例分析
2020/04/16 Javascript
原生微信小程序开发中 redux 的使用详解
2021/02/18 Javascript
分析Python的Django框架的运行方式及处理流程
2015/04/08 Python
使用 Django Highcharts 实现数据可视化过程解析
2019/07/31 Python
给我一面国旗 python帮你实现
2019/09/30 Python
利用python实现逐步回归
2020/02/24 Python
python保留格式汇总各部门excel内容的实现思路
2020/06/01 Python
Python实现王者荣耀自动刷金币的完整步骤
2021/01/22 Python
CSS3制作精致的照片墙特效
2016/06/07 HTML / CSS
英国太阳镜品牌:Taylor Morris Eyewear
2018/04/18 全球购物
德国购买踏板车网站:Microscooter
2019/10/14 全球购物
诉讼代理人授权委托书
2014/04/08 职场文书
诉讼财产保全担保书
2014/05/20 职场文书
人事专员岗位职责说明书
2014/07/30 职场文书
党建工作整改措施
2014/10/28 职场文书
上学路上观后感
2015/06/16 职场文书
Java 通过手写分布式雪花SnowFlake生成ID方法详解
2022/04/07 Java/Android
WINDOWS下安装mysql 8.x 的方法图文教程
2022/04/19 MySQL