Vue中使用element-ui的内置组件实现图片预览全局调用功能el-image-viewer
Posted 单身girl
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了Vue中使用element-ui的内置组件实现图片预览全局调用功能el-image-viewer相关的知识,希望对你有一定的参考价值。
1.先通过element-ui引入它内置图片预览组件
// preview.vue
<template>
<el-image-viewer
v-if="showPreview"
:urlList="previewImages"
:on-close="closeViewer"
></el-image-viewer>
</template>
<script>
// 可自行去对应目录查看该组件
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
export default
data()
return
showPreview: false,
previewImages: []
;
,
components:
ElImageViewer
,
methods:
closeViewer()
this.showPreview = false;
;
</script>
2.在Vue上注册全局调用的方法
// preview.js
import PreviewItem from "./preview.vue";
const Preview = ;
// 注册
Preview.install = function(Vue)
const PreviewConstructor = Vue.extend(PreviewItem);
const instance = new PreviewConstructor();
instance.$mount(document.createElement("div"));
document.body.appendChild(instance.$el);
/**
* 挂载在vue原型上
* @param Array imgs 需要预览的图片数组
*/
Vue.prototype.$openPreview = function(imgs = [])
instance.showPreview = true;
instance.previewImages = imgs;
;
;
export default Preview;
3.在main.js文件中引入
import Preview from "@/components/PreviewItem/preview.js";
Vue.use(Preview);
复制代码
准备完毕,我们就可以开始使用啦!
// 在需要使用的地方中调用
this.$openPreview(['http://...image-url.png'])
创作挑战赛
新人创作奖励来咯,坚持创作打卡瓜分现金大奖
以上是关于Vue中使用element-ui的内置组件实现图片预览全局调用功能el-image-viewer的主要内容,如果未能解决你的问题,请参考以下文章
vue2.x,element-ui 中上传图片组件(图片查看,已有图片渲染)