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 中上传图片组件(图片查看,已有图片渲染)

Vue element-ui之表格内嵌进度条功能实现

封装一个用vue+element-ui实现的远程搜索组件(vue-cli项目中)

Vue如何使用element-ui实现以下功能?

vue图片点击放大功能

基于Vue和elemen-ui做一个点击文字显示图片功能并封装成组件