您现在的位置是：网站首页> 编程资料编程资料
vue-cli项目使用vue-picture-preview图片预览组件方式_vue.js_
2023-05-24
455人已围观
简介 vue-cli项目使用vue-picture-preview图片预览组件方式_vue.js_
使用vue-picture-preview图片预览组件
下载安装
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)
使用
使用有赞ImagePreview(图片预览)遇到的问题
首先说下有赞ImagePreview的使用
先上个预览效果图
问题点：如果图片预览弹框没有隐藏的话，在路由切换的时候也会一直显示
如图，路由已切换：
解决方案
beforeRouteLeave 钩子中调用 close() 方法关闭预览遮罩
beforeRouteLeave 钩子：离开路由之前执行的函数
beforeRouteLeave(to,from,next){ this.ImagePreviewDialog.close() next() }, 
然后这个问题就可以完美解决了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持。
您可能感兴趣的文章:
相关内容
- React的生命周期函数初始挂载更新移除详解_React_
- Vuex中如何getters动态获取state的值_vue.js_
- JavaScript常用数组元素搜索或过滤的四种方法详解_javascript技巧_
- React的createElement和render手写实现示例_React_
- 手把手教你Vue3实现路由跳转_vue.js_
- VueX mapGetters获取Modules中的Getters方式_vue.js_
- Vue 自定义组件 v-model 使用详解_vue.js_
- React详细讲解JSX和组件的使用_React_
- React State与生命周期详细介绍_React_
- vuex通过getters访问数据为undefined问题及解决_vue.js_
