vue-cli項目使用vue-picture-preview圖片預(yù)覽組件方式

更新時間：2022年09月01日 08:41:41 作者：weixin_44093149

這篇文章主要介紹了vue-cli項目使用vue-picture-preview圖片預(yù)覽組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

使用vue-picture-preview圖片預(yù)覽組件

下載安裝

npm install --save vue-picture-preview-extend
npm install --save vue-picture-preview
?
// 如果安裝了cnpm，推薦國內(nèi)用戶使用cnpm進(jìn)行安裝
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標(biāo)簽添加v-preview屬性，放入圖片路徑就能使用了 -->
<img
? v-preview="img.url"
? :src="img.url"
>

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

首先說下有贊ImagePreview的使用

先上個預(yù)覽效果圖

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

如圖，路由已切換：

彈框未隱藏

解決方案

beforeRouteLeave 鉤子中調(diào)用 close() 方法關(guān)閉預(yù)覽遮罩

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

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

解決方案

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

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

您可能感興趣的文章:

相關(guān)文章

使用electron將vue-cli項目打包成exe的方法
今天小編就為大家分享一篇使用electron將vue-cli項目打包成exe的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-09-09
使用vue-cli創(chuàng)建項目的圖文教程(新手入門篇)
這篇文章主要介紹了新手入門vue 使用vue-cli創(chuàng)建項目的圖文教程，本文是針對完全不了解過vue和npm的小白而寫的,需要的朋友可以參考下
2018-05-05
Vue3前端生成隨機(jī)id(生成?UUID)實際運用
前端在做增刪改查時通常會使??個唯?數(shù)值做為數(shù)據(jù)的key值,下面這篇文章主要給大家介紹了關(guān)于Vue3前端生成隨機(jī)id(生成?UUID)的相關(guān)資料,文中給出了詳細(xì)的代碼示例,需要的朋友可以參考下
2024-04-04
Nuxt.js實戰(zhàn)和配置詳解
這篇文章主要介紹了Nuxt.js實戰(zhàn)和配置，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧
2019-08-08
vue-quill-editor富文本編輯器簡單使用方法
這篇文章主要為大家詳細(xì)介紹了vue-quill-editor富文本編輯器簡單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2018-09-09
vue-cli3.0之配置productionGzip方式
這篇文章主要介紹了vue-cli3.0之配置productionGzip方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2023-05-05
vue實現(xiàn)后臺管理權(quán)限系統(tǒng)及頂欄三級菜單顯示功能
這篇文章主要介紹了vue實現(xiàn)后臺管理權(quán)限系統(tǒng)及頂欄三級菜單顯示功能，本文圖文并茂給大家介紹的非常詳細(xì)，具有一定的參考借鑒價值,需要的朋友可以參考下
2019-06-06
vue實現(xiàn)帶復(fù)選框的樹形菜單
這篇文章主要為大家詳細(xì)介紹了vue實現(xiàn)帶復(fù)選框的樹形菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2019-05-05
使用Vue3實現(xiàn)交互式雷達(dá)圖的代碼實現(xiàn)
雷達(dá)圖是一種可視化數(shù)據(jù)的方式,用于比較多個類別中不同指標(biāo)的相對值,它適用于需要展示多個指標(biāo)之間的關(guān)系和差異的場景,本文給大家介紹了如何用Vue3輕松創(chuàng)建交互式雷達(dá)圖,需要的朋友可以參考下
2024-06-06
element自定義表單驗證上傳身份證正反面的實現(xiàn)
表單驗證在很多地方都可以用的到，本文主要介紹了element自定義表單驗證上傳身份證正反面的實現(xiàn)，文中根據(jù)實例編碼詳細(xì)介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下
2022-03-03