elementui中自带的图片预览组件使用如下

最新推荐文章于 2024-05-08 14:56:20 发布

探索未知zxx

最新推荐文章于 2024-05-08 14:56:20 发布

阅读量677

点赞数

文章标签： vue.js 前端 javascript

本文链接：https://blog.csdn.net/qq_33444716/article/details/131167001

版权

vue图片预览组件

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


组件如下：
<template>
  <el-image-viewer
    v-if="showPreview"
    :urlList="previewImages"
    :on-close="closeViewer"
    :zIndex="99999"
  ></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;
      document.querySelector('body').classList.remove('el-popup-imageView--hidden')
    }
  }
};
</script>



// preview.js

import PreviewItem from "./preview.vue";

const Preview = {};

// 注册
Preview.install = function(Vue) {
  const PreviewConstructor = Vue.extend(PreviewItem);
  const instance = new PreviewConstructor();
  let div = document.createElement("div")
  div.style.position = 'absolute'
  div.style.zIndex = '999999'
  instance.$mount(document.createElement("div"));
  document.body.appendChild(instance.$el);

  /**
   * 挂载在vue原型上
   * @param {Array} imgs 需要预览的图片数组
   */
  Vue.prototype.$openPreview = function(imgs = []) {
    instance.showPreview = true;
    document.querySelector('body').classList.add('el-popup-imageView--hidden')
    instance.previewImages = imgs;
  };
};

export default Preview;