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()
    },

解决方案

然后这个问题就可以完美解决了

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

使用electron将vue-cli项目打包成exe的方法
今天小编就为大家分享一篇使用electron将vue-cli项目打包成exe的方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
使用vue-cli创建项目的图文教程(新手入门篇)
这篇文章主要介绍了新手入门vue 使用vue-cli创建项目的图文教程，本文是针对完全不了解过vue和npm的小白而写的,需要的朋友可以参考下
2018-05-05
Vue3前端生成随机id(生成 UUID)实际运用
前端在做增删改查时通常会使⽤⼀个唯⼀数值做为数据的key值,下面这篇文章主要给大家介绍了关于Vue3前端生成随机id(生成 UUID)的相关资料,文中给出了详细的代码示例,需要的朋友可以参考下
2024-04-04
Nuxt.js实战和配置详解
这篇文章主要介绍了Nuxt.js实战和配置，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-08-08
vue-quill-editor富文本编辑器简单使用方法
这篇文章主要为大家详细介绍了vue-quill-editor富文本编辑器简单使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2018-09-09
vue-cli3.0之配置productionGzip方式
这篇文章主要介绍了vue-cli3.0之配置productionGzip方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-05-05
vue实现后台管理权限系统及顶栏三级菜单显示功能
这篇文章主要介绍了vue实现后台管理权限系统及顶栏三级菜单显示功能，本文图文并茂给大家介绍的非常详细，具有一定的参考借鉴价值,需要的朋友可以参考下
2019-06-06
vue实现带复选框的树形菜单
这篇文章主要为大家详细介绍了vue实现带复选框的树形菜单，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2019-05-05
使用Vue3实现交互式雷达图的代码实现
雷达图是一种可视化数据的方式,用于比较多个类别中不同指标的相对值,它适用于需要展示多个指标之间的关系和差异的场景,本文给大家介绍了如何用Vue3轻松创建交互式雷达图,需要的朋友可以参考下
2024-06-06
element自定义表单验证上传身份证正反面的实现
表单验证在很多地方都可以用的到，本文主要介绍了element自定义表单验证上传身份证正反面的实现，文中根据实例编码详细介绍的十分详尽，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03