点击图标（文字）预览图片

视力

已于 2022-04-22 19:12:16 修改

阅读量706

点赞数

分类专栏： # jsPc 文章标签： vue.js elementui 图片

于 2022-04-22 19:10:52 首次发布

本文链接：https://blog.csdn.net/pentakillwusha/article/details/124352867

版权

jsPc 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

<template>
  <div class="preview-page">
    <i class="el-icon-question" @click="openViewer"></i>
    <el-image-viewer
      v-if="showViewer"
      :on-close="closeViewer"
      :url-list="picArr"
    />
  </div>
</template>

<script>
import ElImageViewer from "element-ui/packages/image/src/image-viewer";
import lizi from "@/assets/img/lizi.png";
export default {
  props: {
    type: {
      type: String,
      default: "lizi",
    },
  },
  components: {
    ElImageViewer,
  },
  data() {
    return {
      picArr: [],
      showViewer: false,
    };
  },
  methods: {
    openViewer() {
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    },
  },
  mounted() {
    that.picArr = [lizi];
  },
};
</script>
<style scoped>
.preview-page {
}
</style>