vue-cli項目使用vue-picture-preview圖片預覽組件方式
更新時間：2022年09月01日 08:41:41 作者：weixin_44093149
這篇文章主要介紹了vue-cli項目使用vue-picture-preview圖片預覽組件方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
使用vue-picture-preview圖片預覽組件
下載安裝
npm install --save vue-picture-preview-extend npm install --save vue-picture-preview ? // 如果安裝了cnpm，推薦國內(nèi)用戶使用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 鉤子中調(diào)用 close() 方法關閉預覽遮罩
beforeRouteLeave 鉤子：離開路由之前執(zhí)行的函數(shù)
beforeRouteLeave(to,from,next){
this.ImagePreviewDialog.close()
next()
},
然后這個問題就可以完美解決了
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
今天小編就為大家分享一篇使用electron將vue-cli項目打包成exe的方法，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
使用vue-cli創(chuàng)建項目的圖文教程(新手入門篇)
這篇文章主要介紹了新手入門vue 使用vue-cli創(chuàng)建項目的圖文教程，本文是針對完全不了解過vue和npm的小白而寫的,需要的朋友可以參考下2018-05-05
前端在做增刪改查時通常會使??個唯?數(shù)值做為數(shù)據(jù)的key值,下面這篇文章主要給大家介紹了關于Vue3前端生成隨機id(生成?UUID)的相關資料,文中給出了詳細的代碼示例,需要的朋友可以參考下2024-04-04
這篇文章主要介紹了Nuxt.js實戰(zhàn)和配置，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2019-08-08
這篇文章主要為大家詳細介紹了vue-quill-editor富文本編輯器簡單使用方法，具有一定的參考價值，感興趣的小伙伴們可以參考一下2018-09-09
這篇文章主要介紹了vue-cli3.0之配置productionGzip方式，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教2023-05-05
vue實現(xiàn)后臺管理權限系統(tǒng)及頂欄三級菜單顯示功能
這篇文章主要介紹了vue實現(xiàn)后臺管理權限系統(tǒng)及頂欄三級菜單顯示功能，本文圖文并茂給大家介紹的非常詳細，具有一定的參考借鑒價值,需要的朋友可以參考下2019-06-06
這篇文章主要為大家詳細介紹了vue實現(xiàn)帶復選框的樹形菜單，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-05-05
使用Vue3實現(xiàn)交互式雷達圖的代碼實現(xiàn)
雷達圖是一種可視化數(shù)據(jù)的方式,用于比較多個類別中不同指標的相對值,它適用于需要展示多個指標之間的關系和差異的場景,本文給大家介紹了如何用Vue3輕松創(chuàng)建交互式雷達圖,需要的朋友可以參考下2024-06-06
element自定義表單驗證上傳身份證正反面的實現(xiàn)
表單驗證在很多地方都可以用的到，本文主要介紹了element自定義表單驗證上傳身份證正反面的實現(xiàn)，文中根據(jù)實例編碼詳細介紹的十分詳盡，具有一定的參考價值，感興趣的小伙伴們可以參考一下2022-03-03