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 相关文章推荐
Javascript 判断Flash是否加载完成的代码
Apr 12 Javascript
JSQL  一个 web DB 的封装
May 05 Javascript
jQuery LigerUI 插件介绍及使用之ligerDrag和ligerResizable示例代码打包
Apr 06 Javascript
33个优秀的jQuery 教程分享(幻灯片、动画菜单)
Jul 08 Javascript
Javascript对象中关于setTimeout和setInterval的this介绍
Jul 21 Javascript
JavaScript栏目列表隐藏/显示简单实现
Apr 03 Javascript
常用的js方法合集
Mar 10 Javascript
jQuery ajax请求struts action实现异步刷新
Apr 19 jQuery
送你43道JS面试题(收藏)
Jun 17 Javascript
vue在路由中验证token是否存在的简单实现
Nov 11 Javascript
react 生命周期实例分析
May 18 Javascript
jQuery实现可以计算进制转换的计算器
Oct 19 jQuery
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
Yii编程开发常见调用技巧集锦
2016/07/15 PHP
PHP实现在数据库百万条数据中随机获取20条记录的方法
2017/04/19 PHP
PHP基于回溯算法解决n皇后问题的方法示例
2017/11/07 PHP
Jquery AutoComplete自动完成 的使用方法实例
2010/03/19 Javascript
(jQuery,mootools,dojo)使用适合自己的编程别名命名
2010/09/14 Javascript
关于JavaScript定义类和对象的几种方式
2010/11/09 Javascript
js动态为代码着色显示行号
2013/05/29 Javascript
jQuery实现仿Google首页拖动效果的方法
2015/05/04 Javascript
移动端js图片查看器
2016/11/17 Javascript
微信小程序 input输入框控件详解及实例(多种示例)
2016/12/14 Javascript
详解PHP中pathinfo()函数导致的安全问题
2017/01/05 Javascript
Vue 进阶教程之v-model详解
2017/05/06 Javascript
详解Vue路由钩子及应用场景(小结)
2017/11/07 Javascript
JS构造一个html文本内容成文件流形式发送到后台
2018/07/31 Javascript
Nuxt.js之自动路由原理的实现方法
2018/11/21 Javascript
详解package.json版本号规则
2019/08/01 Javascript
微信小程序防止多次点击跳转和防止表单组件输入内容多次验证功能(函数防抖)
2019/09/19 Javascript
Vue解析带html标签的字符串为dom的实例
2019/11/13 Javascript
JavaScript封装单向链表的示例代码
2020/09/17 Javascript
使用Python对MySQL数据操作
2017/04/06 Python
python 读取excel文件生成sql文件实例详解
2017/05/12 Python
python实现简易版计算器
2020/06/22 Python
python OpenCV学习笔记直方图反向投影的实现
2018/02/07 Python
将python图片转为二进制文本的实例
2019/01/24 Python
python如何给字典的键对应的值为字典项的字典赋值
2019/07/05 Python
Python中新式类与经典类的区别详析
2019/07/10 Python
python numpy库np.percentile用法说明
2020/06/08 Python
c/c++某大公司的两道笔试题
2014/02/02 面试题
教育孩子心得体会
2014/01/01 职场文书
集体备课反思
2014/02/12 职场文书
2014年社区学雷锋活动总结
2014/03/09 职场文书
图书馆志愿者活动总结
2014/06/27 职场文书
珍惜资源的建议书
2014/08/26 职场文书
目标责任书格式范文
2015/05/11 职场文书
2016年大学生社会实践心得体会
2015/10/09 职场文书
Python如何利用pandas读取csv数据并绘图
2022/07/07 Python