react-wxpreview

v1.1.6

Published

4 years ago

react-preview ([demo](https://browniu.com/react-preview))

Downloads

0High
0Medium
0Low

browniu

react-preview (demo)

Image preview in react

Install（命名冲突请使用 wxpreview 安装）

npm install --save react-wxpreview

Usage

import React, { Component } from 'react'

import Preview from 'react-preview'

class Example extends Component {
  render () {
    return (
      <div>
        
        {/*method 1-图片元素查询*/}
        <Preview loop={true} bgOpacity={0.95} fullClose={true}>
          <div className="gallery">
       			<img src="static/preview_1.jpeg" data-preview-proto='static/preview_1_l.jpeg' data-preview-title='Van Gogh' />
            <br />
            <img src="static/preview_2.png" data-preview-proto='static/preview_2_l.png' data-preview-title='Northern Europe' />
          </div>
        </Preview>

        {/*method 2-非图片元素查询*/}
        <Preview animationDuration={300} button={{dom: '.open1', index: 0}}>
          <div className="mount" data-preview-proto='static/preview_3_l.jpg' data-preview-src="static/preview_3.jpg" style={{backgroundImage: 'url(static/preview_3.jpg)'}} />
        </Preview>

        <button className="open1">open1</button>

        {/*method 3-非包裹式调用*/}
        <Preview openButton={{
          dom: '.open2',
          index: 1
        }} list={this.state.list} />
        
        {/*异步更新数据-JS激活*/}
        <button onClick={async () => {
          this.setState({list: await this.getList(this.state.serve[0])})
          setTimeout(() => window.wxPreviewActive())
        }}>open3
        </button>

        {/*异步更新数据-JS激活*/}
        <button onClick={async () => {
          this.setState({list: await this.getList(this.state.serve[1])})
          setTimeout(() => window.wxPreviewActive())
        }}>open4
        </button>
        
      </div>
    )
  }
}

标准的可被查询的标签

<img src="image_m.jpg" data-preview-proto='image_l.jpg' data-preview-title='image' />

<div data-preview-src="image_2_m.jpg" data-preview-proto='image_2_l.jpg' data-preview-title='image' />

Theory

`data-preview-proto` (必须携带的参数)

组件会查询体内任意位置具有 data-preview-proto 属性的html标签，提取属性值（链接）组成预览图集，并为之绑定弹窗触发事件。为已有元素赋予弹窗预览的能力只需要添加该属性，属性值是图片链接。

`data-preview-src`（可选）

组件会自动把查询到的img的src属性作为缩略图，其他标签 还可以（非必要） 添加另外一个属性data-preview-src作为缩略图链接。如果图片资源较大时，建议设置缩略图。

`data-preview-title`（可选）

组件会读取属性值作为当前图片附带的标题信息，提供默认显示样式，可通过titleStyle覆盖自定义样式

Props

| Name | Description | Defalt | Example | Type | | :-------- | -------------------------- | ------ | :-------- | :---------- | | loop | 是否允许图集循环 | false | true | boolean | | bgOpacity | 背景透明度 | 0.8 | 0.8 | number(0-1) | | spacing | 图集间距 | 0.12 | 0.12 | Number(0-1) | | showHideOpacity | 显示和关闭时是否开启透明渐变 | true | false | boolean | | fromPosition | 从点击位置弹出的持续时间（设置为0时禁用） | true | false | number(ms) | | maxSpreadZoom | 双指缩放的最大比率 | 2 | 1 | number | | rate | 高分辨率与预览图的比率 | 3 | 3 | number | | closeListen | 关闭图集时的回调函数 | undefalut | ()=>{console.log('close')} | function | | closeButtonSize | 自定义默认关闭按钮尺寸 | 50 | 60 | number(px) | | fullClose | 移动端遮罩层点击触发关闭（对性能有一定影响） | false | fullClose={true} | boolean | | openButton | 单独绑定的触发按钮 | undefault | {dom:'.button',index:0} | object | | list | 无需包裹单独传入的图集链接 | undefault | ['image1.jpg',{src:'image2.jpg',tit:'something'}] | array | | titleStyle | 图片标题的自定义样式 | {} | {color:'pink'} | object |

Event

激活组件

| Name | Description | | ------------------------ | ---------------- | | window.wxPreviewActive() | 全局激活图集事件 |

图集被打开的时候会注册下列全局事件，关闭的时候会自动销毁，请在图集打开状态下进行调用

| Name | Description | | ---------------------------------- | -------------------- | | window.wxPreview.close() | 全局关闭图集事件 | | window.wxPreview.destroy() | 全局销毁图集事件 | | window.wxPreview.getCurrentIndex() | 获取当前活动元素序列 |

Q&A

多个图集分组

在同一个页面可以使用多个图集分组，分别使用Preview组件包裹即可

<Preview>
   <img src="some_m.jpg" data-preview-proto='some_l.jpg' alt='anything' />
</Preview>
<Preview>
   <img src="some_m.jpg" data-preview-proto='some_l.jpg' alt='anything' />
</Preview>

异步获取列表时无法对应当前请求

更新列表与激活组件必须异步调用

this.setState({list: await this.getList(this.state.serve[1])})
setTimeout(() => window.wxPreviewActive())

Requirements

PhotoSwipe

Update

1.1.6

修复连续点击引发的错误
优化异步请求数据时的列表更新机制

1.1.3

移动端开放遮罩层关闭接口

1.1.2

新增全局激活事件
新增全局关闭/销毁/查询索引事件
内置自更新机制，列表数据变更时自动重载组件

1.0.9

可添加图片标题
提供自定义标题样式接口
提供图集关闭时的回调接口
从点击位置弹出属性：更改 animationDuration 为 fromPosition

1.0.8

添加可单独绑定激活事件元素的接口
拓展非包裹的画集生成方式
优化部分执行逻辑，提高稳定性

1.0.7

将生产代码编译至ES5

1.0.3

异步查询图片尺寸，无需缓存图片或者设置背景样式

1.0.2

扩展为可查询任意标签
优化图集分组的方式，无需传入分组ID

1.0.1

修复切换图片后无法更新返回位置的错误
将photoSwipe转为外置依赖