重新封装element ui 大图查看（无需点击图片，点击按钮也可，超简单）

黛玉葬花也葬你

于 2022-08-08 17:19:31 发布

阅读量815

点赞数 4

文章标签： ui javascript vue.js

本文链接：https://blog.youkuaiyun.com/weixin_48802343/article/details/126231773

版权

这篇博客详细介绍了如何在Vue项目中利用Element UI的image组件创建一个图片预览功能。通过定义一个名为《vue名.vue》的组件，结合data和methods，实现了图片预览的开关控制以及关闭预览的方法。同时，创建了一个外部JS文件，注册了一个名为Preview的插件，使得在Vue实例上调用$openPreview方法即可触发图片预览，从而在任意页面都能方便地使用这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

现在你项目中的components中定义一个叫《vue名.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>

在你任意的文件夹下创建一个js文件

import PreviewItems from " "; //引入你刚刚创建的vue

const Preview = {};
// 注册
Preview.install = function(Vue) {
  const PreviewConstructor = Vue.extend(PreviewItems);
  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;

包括注册

在mian.js中引入这个js

import Preview from "@/utils/preview.js";
Vue.use(Preview)

在你想要引入的页面加上

this.$openPreview([file.url])