vue-picture-preview-extend


 

  vue-picture-preview的扩展版本,本文中插件是由其他大神开发,我做了一些扩展,原文链接:。

一,效果图。

所谓meta标记就是用来描述一个HTML网页文档的属性,也称为元信息,这些信息并不会显示在浏览器的页面中,例如作者、日期和时间、网页描述、页面刷新等。

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

 图片 1

 

基本语法:

安装


 

  

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

图片 2

<meta name = ” “content=” “>

使用


 

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

 

<meta http-equiv=” ” content = ” “>

以上为使用方法,下面说说插件的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进行分组然后具体思路,如果有大佬想扩展的话
我可以无条件奉上我现有扩展的代码,

  2.
本插件取自vue-picture-preview,原文链接:

  3. 本人qq:421217189 15274527 欢迎加我一起讨论前端技术

 

二,代码。

name属性与content属性

发表评论

电子邮件地址不会被公开。 必填项已用*标注