v-previews

基于PhotoSwipe的 vue 指令，使得更加易用。

Installation 安装

npm install photoswipe v-previews --save

Usage 使用方法

1import Vue from 'vue'
2import VPreviews from 'v-previews'
3import PhotoSwipe from 'photoswipe'
4import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
5
6import 'photoswipe/dist/photoswipe.css'
7import 'photoswipe/dist/default-skin/default-skin.css'
8
9
10Vue.use(VPreviews, {
11  photoswipe: PhotoSwipe,
12  ui: PhotoSwipeUI_Default
13})

Basic Example 基础实例

1<template>
2  <div v-previews>
3    <img src="http://dummyimage.com/200x100" data-src="http://dummyimage.com/200x100"/>
4  </div>
5</template>

Documentation 文档

directive 指令

• 指令参数: v-previews:data-src 绑定图片地址的目标标签属性
• 修饰符: v-previews.click 触发的事件名，可以绑定多个事件 然而并没有什么用
• 绑定值: v-previews="{}" PhotoSwipe的设置，请参考PhotoSwipe Options

说明：

事件是绑定在使用v-previews的对象上，事件触发后判定event.target上是否存在目标标签属性data-src，若不存在则无事发生，存在时获取v-previews的对象下所有设置了data-src属性的对象，以此生成图片列表传递给PhotoSwipe。

示例

设置双击打开预览，并以src属性为准，不显示分享按钮。

1<template>
2  <div v-previews:src.dblclick="options">
3    <img src="http://dummyimage.com/200x100"/>
4  </div>
5</template>
6
7<script>
8export default {
9  data () {
10    return {
11      options: {
12        shareEl: false
13      }
14    }
15  }
16}
17</script>

Tag Attributes 标签属性

1/* PhotoSwipe 官方示例 */
2var items = [
3    {
4        src: 'http://dummyimage.com/400x200',
5        msrc: 'http://dummyimage.com/200x100',
6        w: 400,
7        h: 200
8    },
9    {
10        html: '<div class="hello-slide"><h1>Hello world <a href="http://example.com">example.com</a></h1></div>'
11    }
12]

按之前的设置，我们只能定义src的值，其他属性则需要通过data-msrc, data-w, data-h, data-html来定义。

示例

1<template>
2  <div v-previews>
3    <img
4      src="http://dummyimage.com/200x100"
5      data-src="http://dummyimage.com/400x200"
6      data-msrc="http://dummyimage.com/200x100"
7      data-w="400"
8      data-h="200"
9    />
10    <span
11      data-src="true"
12      data-html='<div class="hello-slide"><h1>Hello world <a href="http://example.com">example.com</a></h1></div>'
13    >Hello World</span>
14  </div>
15</template>
16
17<style>
18.hello-slide {
19  width: 100%;
20  max-width: 400px;
21  color: #FFF;
22  margin: 120px auto 0;
23  text-align: center;
24}
25</style>

设置data-html必须同时设置目标标签属性，如data-src="true"。

设置data-html后，其他属性将失效。

PhotoSwipe中w和h是必须的，v-previews中变得不是必须的了。优先级data-w与data-h > 绑定data-src的尺寸 > 0，当data-src的图片加载完成后，尺寸将会更换为这张图片的实际尺寸。

Group 分组

默认是以v-previews对象下所有子节点为一组，如果需要手动分组，可以在子节点添加data-group标签。

示例

1<template>
2  <div v-previews:src>
3    <img src="http://dummyimage.com/200x100"/>
4    <img src="http://dummyimage.com/200x100"/>
5    <img src="http://dummyimage.com/200x100" data-group="1"/>
6    <img src="http://dummyimage.com/200x100" data-group="1"/>
7    <img src="http://dummyimage.com/200x100" data-group="2"/>
8    <img src="http://dummyimage.com/200x100" data-group="2"/>
9  </div>
10</template>

Global Options 全局设置

1import Vue from 'vue'
2import VPreviews from 'v-previews'
3import PhotoSwipe from 'photoswipe'
4import PhotoSwipeUI_Default from 'photoswipe/dist/photoswipe-ui-default'
5
6import 'photoswipe/dist/photoswipe.css'
7import 'photoswipe/dist/default-skin/default-skin.css'
8
9
10Vue.use(VPreviews, {
11  photoswipe: PhotoSwipe,
12  ui: PhotoSwipeUI_Default,
13
14  /* Global Options */
15  options: {
16    shareEl: false
17  }
18})

options的默认值，在PhotoSwipe Options的基础上，修改了history和getThumbBoundsFn。

• history 和hash路由以及挂载方式有冲突。
• getThumbBoundsFn 点击图片，弹出PhotoSwipe组件时的过渡效果。

Deep Option 深度设置

1<template>
2  <div v-previews>
3    <div
4      class="slide"
5      style="background-image: url(http://dummyimage.com/200x100)"
6      data-src="http://dummyimage.com/200x100"
7    >
8      <div class="slide-description">图片描述</div>
9    </div>
10  </div>
11</template>
12
13<style>
14.slide {
15  width: 200px;
16  height: 100px;
17  position: relative;
18}
19.slide-description {
20  text-align: center;
21  position:absolute;
22  left: 0;
23  right: 0;
24  bottom: 0;
25}
26</style>

当对象是上面这种不是单纯的img的时候，需要在全局设置里设置deep属性，默认为0。

1Vue.use(VPreviews, {
2  photoswipe: PhotoSwipe,
3  ui: PhotoSwipeUI_Default,
4  deep: 1
5})

deep设为1时，点击.slide-description对象，没有查找到data-src属性，则查找其父节点.slide是否存在该属性。查找到目标有data-src属性或超过deep次数为止（最多查到绑定v-previews的对象为止）。

Typescript

npm install @types/photoswipe --save-dev

1Vue.use<VPreviews.Options>(VPreviews, {
2  /* 此处将有类型检查与代码提示 */
3  photoswipe: PhotoSwipe,
4  ui: PhotoSwipeUI_Default,
5  options: {
6    shareEl: false
7  }
8})