vue |實現點選圖片預覽瀏覽器滿屏大圖
阿新 • • 發佈:2022-04-02
- 安裝外掛
npm install vue-directive-image-previewer -D
- 引入外掛main.js檔案中
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.use(VueDirectiveImagePreviewer, { //1. wrapper背景顏色———— 你也可以寫成background: '#000' //支援rgba、rgb和image: 'url(xxx)' background: { color: '#000' }, //2. 轉換動畫 animate: { duration: 600, delay: 500 }, //3. 滑鼠樣式(css) cursor: 'pointer', copy:true——布林型別,預設為true。如果是true,那麼當你預覽圖片時,被點選的原始的圖片不會消失;如果是false,被點選的原始的圖片就會消失 zIndex:1——Number型別,預設為1。 maxWidth:1000|"1000px"|"100%"——Number型別,限制圖片最大寬度 maxHeight:1000|"1000px"|"100%"——Number型別,限制圖片最大高度 previewSize:2|20%——Number型別,預覽圖片的大小。舉例,如果值為2,那麼預覽圖片的寬高就是原始圖片大小的兩倍 })
參考連結:https://www.cnblogs.com/sanhuamao/p/13596753.html