使用 element 图片放大全屏

мо仙堡杠把子灬

已于 2023-03-28 09:35:52 修改

阅读量974

点赞数

分类专栏： vue 文章标签：前端 vue.js javascript

于 2021-11-15 09:35:20 首次发布

本文链接：https://blog.csdn.net/weixin_43553701/article/details/121328054

版权

vue 专栏收录该内容

62 篇文章 1 订阅

订阅专栏

这篇博客介绍了如何在饿了么源码中找到并使用未公开的组件ElImageViewer。通过导入'element-ui/packages/image/src/image-viewer'，可以将组件添加到项目中，并展示了一个简单的例子，包括如何在数据中设置图片列表，以及如何开启和关闭图片预览。此技术适用于前端开发，特别是熟悉Vue.js和Element UI的开发者。

摘要由CSDN通过智能技术生成

你要藏好软弱，世界大雨滂沱。万物苟且而活，无人为你背负更多。

在这里插入图片描述

饿了么源码里面有一个未开放的组件ElImageViewer

<ElImageViewer v-if="showViewer" :on-close="closeViewer" :url-list="srcList" />

// 导入的时候这样
import ElImageViewer from 'element-ui/packages/image/src/image-viewer';

components: {
   ElImageViewer,
 },
 data(){
 return {
	showViewer: false,
	url: 'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
	srcList: [
        'https://fuss10.elemecdn.com/e/5d/4a731a90594a4af544c0c25941171jpeg.jpeg',
        'https://fuss10.elemecdn.com/8/27/f01c15bb73e1ef3793e64e6b7bbccjpeg.jpeg',
        'https://fuss10.elemecdn.com/1/8e/aeffeb4de74e2fde4bd74fc7b4486jpeg.jpeg',
      ],
   }
},
methods: {
    onPreview() {
      this.showViewer = true;
    },
    closeViewer() {
      this.showViewer = false;
    },
  },