npm install --save vue-picture-preview-extend
npm install --save vue-picture-preview
?
// 如果安裝了cnpm，推薦國內用戶使用cnpm進行安裝
cnpm install --save vue-picture-preview-extend
cnpm install --save vue-picture-preview

配置

// 在 main.js 添加以下代碼
import vuePicturePreview from 'vue-picture-preview'
Vue.use(vuePicturePreview)

使用

<!-- 在app.vue添加lg-preview組件 -->
<div id="app">
? <router-view></router-view>
? <lg-preview></lg-preview>
</div>
?
<!-- 給img標簽添加v-preview屬性，放入圖片路徑就能使用了 -->
<img
? v-preview="img.url"
? :src="img.url"
>

使用有贊ImagePreview(圖片預覽)遇到的問題

首先說下有贊ImagePreview的使用

先上個預覽效果圖

問題點：如果圖片預覽彈框沒有隱藏的話，在路由切換的時候也會一直顯示

如圖，路由已切換：

彈框未隱藏

解決方案

beforeRouteLeave 鉤子中調用 close() 方法關閉預覽遮罩

beforeRouteLeave 鉤子：離開路由之前執(zhí)行的函數(shù)

   beforeRouteLeave(to,from,next){
        this.ImagePreviewDialog.close()
        next()
    },

解決方案

然后這個問題就可以完美解決了

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vue項目中使用scss詳細方法步驟
這篇文章主要給大家介紹了關于vue項目中使用scss的詳細方法步驟,scss是一種css預處理語言,定義了一種新的專門的編程語言,編譯后形成正常的css文件,為css增加一些編程特性,無需考慮瀏覽器的兼容性,讓css更加簡潔、適應性更強,可讀性更佳,需要的朋友可以參考下
2023-11-11
vue 實現(xiàn)超長文本截取,懸浮框提示
這篇文章主要介紹了vue 實現(xiàn)超長文本截取,懸浮框提示，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-07-07
vue?LogicFlow自定義邊實現(xiàn)示例詳解
這篇文章主要為大家介紹了vue?LogicFlow自定義邊示例詳解，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進步，早日升職加薪
2023-01-01
vue-cli 3.x配置跨域代理的實現(xiàn)方法
這篇文章主要介紹了vue-cli 3.x配置跨域代理的實現(xiàn)方法，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2019-04-04
配置一個vue3.0項目的完整步驟
這篇文章主要介紹了配置一個vue3.0項目的完整步驟，從0開始配置一個vue項目，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
2019-04-04
vue-router 中 meta的用法詳解
今天小編就為大家分享一篇vue-router 中 meta的用法詳解，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
VUE-ElementUI 自定義Loading圖操作
這篇文章主要介紹了VUE-ElementUI 自定義Loading圖操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-11-11
element-ui實現(xiàn)表格邊框的動態(tài)切換并防抖
這篇文章主要介紹了element-ui實現(xiàn)表格邊框的動態(tài)切換并防抖方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
vue中如何自定義右鍵菜單詳解
這篇文章主要給大家介紹了關于vue中如何自定義右鍵菜單的相關資料，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
2020-12-12
vue+Element實現(xiàn)分頁效果
這篇文章主要為大家詳細介紹了vue+Element實現(xiàn)分頁效果，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2021-09-09