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，推荐国内用户使用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 钩子：离开路由之前执行的函数
beforeRouteLeave(to,from,next){
this.ImagePreviewDialog.close()
next()
},
然后这个问题就可以完美解决了
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。
相关文章
本文主要介绍了vue中使用h5 video标签实现弹窗播放本地视频的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2022-04-04
这篇文章主要介绍了Vue之计算属性的相关知识，文中讲解非常细致，代码帮助大家更好的理解和学习，感兴趣的朋友可以了解下2020-06-06
这篇文章主要为大家详细介绍了Vue实现星空效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2022-04-04
在Vue中,组件的props属性用于定义组件可以接收的外部数据,这些数据来自父组件并传递给子组件,本文给大家介绍了Vue使用Props实现组件数据交互,文中有详细的代码示例供大家参考,需要的朋友可以参考下2024-06-06
今天小编就为大家分享一篇在vue-cli中引入lodash.js并使用详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2019-11-11
这篇文章主要介绍了vue和react的区别及优缺点说明，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2023-03-03
这篇文章主要介绍了vue 中常见的时间格式转换,需要的朋友可以参考下2022-05-05
最近遇到一个需求,需要把内容下载生成pdf文件,但转换过程中内容总是会被截断,就很难受,从网上找到了解决办法分享给大家,这篇文章主要给大家介绍了关于vue生成pdf文件步骤及pdf分页隔断处理的相关资料,需要的朋友可以参考下2024-02-02
在开发过程中,启动项目是必不可少的一步,本文介绍了两种启动项目的方法,第一种方法是通过命令提示符(cmd)进入项目目录,然后输入npm run serve来启动项目,第二种方法是直接在项目目录下打开命令提示符(cmd),输入npm run serve即可启动项目2024-10-10
这篇文章主要介绍了vue在自定义组件中使用v-model进行数据绑定的方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2019-03-03
最新评论