用vue实现点击图片预览浏览器满屏大图

谁借莪１个温暖的怀抱￠ 2023-03-04 15:28 10阅读 0赞

# 前提 #

--------------------

*  安装插件

npm install vue-directive-image-previewer -D

*  引入插件

import VueDirectiveImagePreviewer from 'vue-directive-image-previewer'
    import 'vue-directive-image-previewer/dist/assets/style.css'
    Vue.use(VueDirectiveImagePreviewer)

*  使用

转载自[vue 点击图片预览大图][vue]

# 了解配置 #

--------------------

然后就根据自己需求配置你想要的的效果了，我去看了下[官方文档][Link 1]，然后挫劣地翻译了一下：

Vue.use(VueDirectiveImagePreviewer, { 
      //1. wrapper背景颜色———— 你也可以写成background: '#000' //支持rgba、rgb和image: 'url(xxx)'
      background: {     
        color: '#000' 
      },
      
      //2. 转换动画
      animate: { 
        duration: 600,
        delay: 500
      },
    
      //3. 鼠标样式(css)
      cursor: 'pointer',
    })

**其他options**

*  `copy：true`——布尔类型，默认为true。如果是true，那么当你预览图片时，被点击的原始的图片不会消失；如果是false，被点击的原始的图片就会消失
 *  `zIndex:1`——Number类型，默认为1。
 *  `maxWidth:1000|"1000px"|"100%"`——Number类型，限制图片最大宽度
 *  `maxHeight:1000|"1000px"|"100%"`——Number类型，限制图片最大高度
 *  `previewSize:2|20%`——Number类型，预览图片的大小。举例，如果值为2，那么预览图片的宽高就是原始图片大小的两倍

## 如何实现全屏预览 ##

//先获取客户端显示屏幕屏幕的宽高
    var height=screen.height
    var width=screen.width
    
    //previewSize可以设置大一点，之后预览的图片就可以无限放大，直到宽或高达到了限制的最大宽高,即屏幕宽高。它不会压缩拉伸图片的原本比例。
    Vue.use(VueDirectiveImagePreviewer,{ 
      previewSize:10,
      maxWidth:width,
      maxHeight:height
    })

OK，祝你一切顺利~

[vue]: https://blog.csdn.net/allen_csdns/article/details/104511539?ops_request_misc=%257B%2522request%255Fid%2522%253A%2522159650292119195265948852%2522%252C%2522scm%2522%253A%252220140713.130102334..%2522%257D&request_id=159650292119195265948852&biz_id=0&utm_medium=distribute.pc_search_result.none-task-blog-2~all~first_rank_v2~rank_v28-1-104511539.pc_first_rank_v2_rank_v28&utm_term=vue%E7%82%B9%E5%87%BB%E9%A2%84%E8%A7%88%E5%A4%A7%E5%9B%BE&spm=1018.2118.3001.4187
[Link 1]: https://www.npmjs.com/package/vue-directive-image-previewer