使用el-image-viewer的预览功能

使用el-image-viewer预览图片

在main.js中引用组件

import {Image} from 'element-ui' // 按需引入
Vue.component('el-image-viewer', Image.components.ImageViewer)

然后在文件中使用

<template><el-button type="primary" @click="onPreview">预览</el-button><el-image-viewer v-if="showViewer":on-close="()=>{showViewer=false}" :url-list="[viewUrl]" />
</template>
<script>export default {data() {return {showViewer:false,viewUrl:''}},methods: {//预览onPreview(){this.showViewer=truethis.viewUrl='https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fimg.jj20.com%2Fup%2Fallimg%2F1114%2F121420113514%2F201214113514-1-1200.jpg&refer=http%3A%2F%2Fimg.jj20.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=jpeg'}}
}
</script>

使用el-image-viewer的预览功能相关推荐

vue+vant使用图片预览功能ImagePreview的问题
如果您搜到这篇文章的话,那员外估计您遇到跟我一样的问题了,即在打开图片预览功能后,如果不关闭预览的图片,同时改变路由的话,会发现即使路由改变了,预览的图片还在文档的最顶层显示,如图: 着实让员外百思不 ...
uni-app实现PDF预览功能（避坑看这）
目录前言一.下载PDF预览相关文件二.使用步骤前言去年就想写一篇关于uni-app的pdf预览功能,拖很久了,补上. 一.下载PDF预览相关文件下载地址解压后效果: 二.使用步骤在 ...
实现微信小程序和手机app（基于vue）PDF预览功能
引言:最近在做微信小程序和手机端app开发(基于vue),实现一个pdf预览功能. 需求:点击pdf列表,跳转到预览pdf页面,页面上强制阅读10s后,显示一个按钮返回,更新阅读状态: 要求:不能调用 ...
word转图片 java_Java 利用LibreOffice将Office文档转换成 PDF，进而转图片，实现在线预览功能...
项目中需要将 Office 文档上传并实现在线预览,用到了 LibreOffice 将 Office 文档转换为 PDF 文档,然后再用 pdfbox 将 PDF 转为图片. 本文介绍借助 Libre ...
Office文件转化PDF实现预览功能
OpenOffice文件转PDF 实测有用 OpenOffice办公文件预览功能 OpenOffice操作 aspose-words来实现预览预览操作 OpenOffice办公文件预览功能 Hell ...
alert()的功能_前端实现简单的图片上传小图预览功能
<!DOCTYPE html> <html lang="en"> <head><meta charset="UTF-8" ...
智能媒体管理产品文档转换/预览功能介绍(4)--快速搭建
摘要: 智能媒体管理提供了 Cloud Native 架构的文档转换/预览服务,本文介绍快速搭建的示例,让您用 DIY 的体验方式实现文档预览功能. 一.导语智能媒体管理提供了 Cloud Nat ...
window下实现在线预览功能
window下实现在线预览功能最近用到文档在线预览功能,之前没接触过,一切从零开始,整了一段时间终于实现,现在把方法分享给大家! 一.主要思路先将其他格式的文档(office文档.txt.图片等等 ...
Java实现图片裁剪预览功能
Java实现图片裁剪预览功能在项目中,我们需要做些类似头像上传,图片裁剪的功能,ok看下面文章! 需要插件:jQuery Jcrop 后端代码: package org.csg.upload;imp ...
uniapp实现图片预览功能
点击图片实现预览功能如下:  <view class="ms_shops"><swiper class="ms_swi ...

使用el-image-viewer的预览功能

使用el-image-viewer预览图片

在main.js中引用组件

然后在文件中使用

使用el-image-viewer的预览功能相关推荐

最新文章

热门文章