因项目需求(ui框架element-ui),需要实现图片的点击放大,还要能旋转以及上下切换。当时第一反应,element-ui好像没有这样的组件,就想过自己写,但是那个旋转翻页上下切换感觉有点麻烦,不甘心,就在GitHub找找找.........还真找到一个适合vue的插件,叫 viewerjs ,GitHub地址:https://github.com/fengyuanchen/viewerjs 。

说实话,它的功能还是很多很强大的,大家可以自己去看。主要使用的旋转、翻转、缩放、上下切换、键盘操作等功能都有。

1、首先是安装

npm install v-viewer --save

2、安装完引用(还要记得引用它的css样式)


 
 
  1. import Vue from 'vue';
  2. import Viewer from 'v-viewer'
  3. import 'viewerjs/dist/viewer.css'

3、vue注册调用,再调用setDefaults方法,根据自己项目需求配置。


 
 
  1. Vue.use(Viewer);
  2. Viewer.setDefaults({
  3. 'inline': true,
  4. 'button': true, //右上角按钮
  5. "navbar": true, //底部缩略图
  6. "title": true, //当前图片标题
  7. "toolbar": true, //底部工具栏
  8. "tooltip": true, //显示缩放百分比
  9. "movable": true, //是否可以移动
  10. "zoomable": true, //是否可以缩放
  11. "rotatable": true, //是否可旋转
  12. "scalable": true, //是否可翻转
  13. "transition": true, //使用 CSS3 过度
  14. "fullscreen": true, //播放时是否全屏
  15. "keyboard": true, //是否支持键盘
  16. "url": "data-source",
  17. ready: function (e) {
  18. console.log(e.type, '组件以初始化');
  19. },
  20. show: function (e) {
  21. console.log(e.type, '图片显示开始');
  22. },
  23. shown: function (e) {
  24. console.log(e.type, '图片显示结束');
  25. },
  26. hide: function (e) {
  27. console.log(e.type, '图片隐藏完成');
  28. },
  29. hidden: function (e) {
  30. console.log(e.type, '图片隐藏结束');
  31. },
  32. view: function (e) {
  33. console.log(e.type, '视图开始');
  34. },
  35. viewed: function (e) {
  36. console.log(e.type, '视图结束');
  37. // 索引为 1 的图片旋转20度
  38. if(e.detail.index === 1){
  39. this.viewer.rotate( 20);
  40. }
  41. },
  42. zoom: function (e) {
  43. console.log(e.type, '图片缩放开始');
  44. },
  45. zoomed: function (e) {
  46. console.log(e.type, '图片缩放结束');
  47. }
  48. });

为理解方便,配一张表格说明以及图片说明

表格说明:

名称默认值说明
inlinefalse启用 inline 模式
buttontrue显示右上角关闭按钮
navbartrue显示缩略图导航
titletrue显示当前图片的标题
toolbartrue显示工具栏
tooltiptrue显示缩放百分比
movabletrue图片是否可移动
zoomabletrue图片是否可缩放
rotatabletrue图片是否可旋转
scalabletrue图片是否可翻转
transitiontrue使用 CSS3 过度
fullscreentrue播放时是否全屏
keyboardtrue是否支持键盘
urlsrc设置大图片的 url

图片说明:

4、代码中使用

4.1、图片列表代码


 
 
  1. <div>
  2. <viewer :images="images" style="height: 800px;">
  3. <img v-for="item in images" :src="item.src" :key="item.index" height="100">
  4. </viewer>
  5. </div>

 
 
  1. data() {
  2. return {
  3. images:[
  4. {src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3272199364,3404297250&fm=26&gp=0.jpg', index: 1},
  5. {src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3267295166,2381808815&fm=26&gp=0.jpg', index: 2},
  6. {src: 'https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3429654663,2972188411&fm=26&gp=0.jpg', index: 3},
  7. {src: 'https://ss3.bdstatic.com/70cFv8Sh_Q1YnxGkpoWK1HF6hhy/it/u=3597323878,2962972725&fm=26&gp=0.jpg', index: 4},
  8. ]
  9. }
  10. }

最终效果就是上面图片说明的样子,具体还需要小伙伴们自己多试验试验。

新增一张GIF看起来直观点(变形了,建议点击放大看)

 

转载:https://blog.csdn.net/guozhangqiang/article/details/82251893

Logo

前往低代码交流专区

更多推荐