超级好用的图片预览查看插件Viewer及在react，vue，jquery以及原生js的使用方法，详解react复用单个组件的写法

时间：2024-04-05 11:16:22

因为项目种常查看大图预览的需求，如果是自己写的用模态框写的查看大图，只是简单看看还可以，如果需要旋转，放大缩小，反转等等操作，就会很麻烦。也看过很多用来查看大图的插件，viewer真的是功能最为全面的，而且在各个框架中均有对应的封装插件，使用起来也很方便，所以这里写一下各个框架内viewer的使用方法。

先放上效果图
超级好用的图片预览查看插件Viewer及在react，vue，jquery以及原生js的使用方法，详解react复用单个组件的写法

下面之说直接使用的方法，具体细节的options可以查看文档,下面也有文档连接

Viewer (JQuery/js)

下面是JQuery和原生js的写法, 要注意JQuery版本和js版本是不一样的，要到对应的地方下载

[]: https://github.com/fengyuanchen/viewerjs “JS版本”
[]: https://github.com/fengyuanchen/jquery-viewer “JQuery版本”

引入

JS版本

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/viewer.min.js"></script>

jQuery 版本：

<link rel="stylesheet" href="css/viewer.min.css">
<script src="js/jquery.min.js"></script>
<script src="js/viewer.min.js"></script>

HTML

<ul id="viewer">
    <li><img src="img/1.jpg" ></li>
    <li><img src="img/2.jpg""></li>
</ul>

JavaScript

JS 版本：

var viewer = new Viewer(document.getElementById('viewer'));

jQuery 版本：

$('#viewer').viewer();

v-viewer (vue)

[]: https://mirari.cc/2017/08/27/Vue图片浏览组件v-viewer，支持旋转、缩放、翻转等操作/ “文档”

安装

npm install v-viewer

引入

  import Viewer from 'v-viewer'
  Vue.use(Viewer)

使用

直接使用组件

  <viewer :images="images">
      <img v-for="src in images" :src="src" :key="src">
    </viewer>

也可以使用指令v-viewer，使用指令的元素下的img都可以就行查看，v-viewer内可以传入样式

<div class="images" v-viewer="{inline: true}">
  <img v-for="src in images" :src="src" :key="src">
</div>

rc-viewer(React)

[]: https://www.ctolib.com/hyk51594176-rc-viewer.html “文档”

直接引入
<script src="https://cdn.bootcss.com/viewerjs/1.0.0/viewer.min.js"></script>
<link href="https://cdn.bootcss.com/viewerjs/1.0.0/viewer.min.css" rel="stylesheet">
安装导入
npm install @hanyk/rc-viewer

//components
import RcViewer from '@hanyk/rc-viewer'

使用

图片列表

<RcViewer options={options} ref='viewer'>
    <ul id="images">
        <li><img src="picture-1.jpg" alt="Picture 1"></li>
        <li><img src="picture-2.jpg" alt="Picture 2"></li>
        <li><img src="picture-3.jpg" alt="Picture 3"></li>
    </ul>
 </RcViewer>

单张图片

<RcViewer options={options}>
   <img src="picture-3.jpg" alt="Picture 3">
</RcViewer>

这种情况下就可以直接点击就可以使用了

当然也可以用js打开图片查看组件

const { viewer } = this.refs.viewer
		viewer.show()

但是，我们在平常使用中有很多查看图片的地方 ，如果每个地方都使用一次RcViwer组件既浪费性能，也会很麻烦，会有很多重复代码，所以我们只要在这个页面里公用一个就可以，然后动态传入图片路由，然后再你需要查看的图片的地方绑定公共方法就可以，这里我就以React的写法举例，用其他框架也是一个道理。

这里我用的是阿里的ant design pro框架：

首先我们开始写global这个model的reducer,用来改变这个图片imgUrl，这里为什么要同时变化viewerFlag这个状态呢，应为图片路由可能不会变化，但是viewerFlag每次都会变化，然后我们就可以在componentWillReceiveProps钩子里看viewerFlag是否变化来决定是否查看图片

//./models/global.js

state: {
    imgUrl: ''
    viewerFlag:true,
},
  
reducers: {
    saveImgUrl(state, { payload }) {
      return {
        ...state,
        viewerFlag:!state.viewerFlag,
        imgUrl: payload,
      };
    },
    ...
}

下一步我们在BasicLayout这个基础布局中使用RcViewer组件：

//.layouts/BasicLayout.js
import RcViewer from '@hanyk/rc-viewer'

...
//引入global的model去除imgUrl，这就是我们要动态变化的url
export default connect(({ global}) => ({
  imgUrl: global.imgUrl,
  viewerFlag: global.viewerFlag,
  ...setting,
}))(props => (
  ....
));

...
//通过判断viwerFlag，判断是否需要展示，因为url可能不会变化，但是viwerFlag是必然变化的
componentWillReceiveProps(nextProps) {
	if(this.props.viewerFlag != nextProps.viewerFlag) {
		const { viewer } = this.refs.viewer
		viewer.show()
	}
}

...

render() {
	{imgUrl} = this.props 
	
    return(
        ...
        <RcViewer ref='viewer'>
            <img style={{display:'none'}} src={imgUrl} alt=""/> //我们这里创建一个不现实的图片，因为这张图片只是为了用来查看放大图片的,不需要显示
        </RcViewer>
        ...
    )

}

然后就可以在各个模块中使用图片查看了，只需要dipatch触发saveImgUrl这个reducer

//./page/demo/demo.js

showPic = (imgUrl)=> {
  this.props.dispatch({type:'global/saveImgUrl',payload:imgUrl})
}
...

<Button type='eye' onClick={this.showPic.bind(this,imageUrl)}><查看图片/Button>
...

这样在每个模块中都可以一直复用一个图片查看组件，是非常方便的，你也可以把这个showPic方法放到公共方法里，这样更为简洁

以上就是我对viewer.js的详解，如果有什么什么问题也可以直接问我

相关文章