vue |實現點擊圖片預覽瀏覽器滿屏大圖

前提

• 安裝插件

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) 

• 使用

  <img v-image-preview src="picture-url"/>

轉載自vue 點擊圖片預覽大圖

了解配置

---

然后就是根據自己需求配置你想要的的效果了，我去看了下官方文檔，挫劣地翻譯了一下：

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
})