解析 ElementUI 中的 `<el-image>` 源码，挖掘其自定义预览功能

2024-02-16 21:43:25

ElementUI 中的 <el-image>：深入源码解析

如果你是一名 web 开发人员，那么你可能听说过 ElementUI，它是一个流行的前端 UI 库。而 <el-image> 是 ElementUI 中的一个组件，用于显示图像。在本文中，我们将深入研究 <el-image> 的源码，探讨它的实现方式，并分享从中学到的经验教训。

源码解析

import { Component, Prop, Vue } from 'vue';
import { show } from 'uview-ui/components/u-popup';
import { previewImage } from 'uview-ui/function';

@Component({
  name: 'ElImage',
  components: {
    UPreview: show,
  },
})
export default class ElImage extends Vue {
  @Prop({ type: String, default: '' }) src: string;

  // 预览图
  @Prop({ type: String, default: '' }) previewSrcList: string;

  // 预览图是否显示
  @Prop({ type: Boolean, default: false }) preview: boolean;
}

组件导入： ElImage 组件通过 @Component 装饰器导入 Vue、Prop、show 和 previewImage，这些都是 UView UI 库的一部分。
属性： ElImage 接受三个属性：
- src：要显示的图像的 URL。
- previewSrcList：要预览的图像列表的 URL，以逗号分隔。
- preview：指示是否启用预览功能。

自定义预览功能

<el-image> 的一个有趣特征是它的自定义预览功能。当 preview 属性为 true 时，点击图像会打开一个弹出窗口，显示图像的预览。这是通过使用 UPreview 组件实现的。

<template>
  <u-preview :images="previewSrcList" v-if="preview">
    <template #item="item">
      <img :src="item.url" alt="" />
    </template>
  </u-preview>
  <img :src="src" @click="handlePreview" />
</template>

<script>
export default {
  methods: {
    handlePreview() {
      if (!this.previewSrcList) return;
      const srcList = this.previewSrcList.split(',');
      this.$refs.previewRef.show(srcList);
    },
  },
};
</script>

模板： 如果 preview 属性为 true，则渲染 UPreview 组件，并指定 images 属性，该属性包含要预览的图像列表。
方法： handlePreview 方法处理图像点击事件。它检查 previewSrcList 是否存在，然后将图像列表拆分为一个数组，最后调用 show 方法打开预览弹出窗口。