element-ui image 组件源码分享

image 组件源码分享，主要从以下五个方面：

1、image 组件页面结构。

2、image 组件属性。

3、image 组件事件。

4、image 组件 slot 挂载。

5、image-viewer 组件。

一、组件页面结构。

二、组件属性。

2.1 src 图片源，同原生，类型为 string，无默认值。

2.2 fit 确定图片如何适应容器框，同原生 object-fit，类型为 string，可选值 fill / contain / cover / none / scale-down，无默认值。

2.3 alt 原生 alt，类型为 string，无默认值。

2.4 referrer-policy 原生 referrerPolicy，类型为 string，无默认值。

2.5 lazy 是否开启懒加载，类型为 boolean，默认 false。

2.6 scroll-container 开启懒加载后，监听 scroll 事件的容器，类型为 string / HTMLElement，默认最近一个 overflow 值为 auto 或 scroll 的父元素。

2.7 preview-src-list 开启图片预览功能，类型为 array，无默认值。

2.8 z-index 设置图片预览的 z-index，类型为 number，默认 2000。

2.9 initial-index 图片预览初始图片index，类型为 number，无默认值。

三、组件事件。

3.1 load 事件，图片加载成功触发，(e: Event)。

3.2 error 事件，图片加载失败触发，(e: Error)。

四、组件 slot 挂载。

4.1 placeholder 图片未加载的占位内容。

4.2 error 加载失败的内容。

五、image-viewer 组件。图片预览组件是 image 组件内部的组件，未暴露在外部进行使用，这里简单分享组件中的方法。

5.1 组件的页面结构。

5.2  urlList 预览的图片。

5.3 zIndex 层级。

5.4 onSwitch 方法。不过这个方法虽然在 image-viewer 组件中有定义，但是在 image 组件中并未使用这个方法，这里只简单讲解这个方法怎么使用，及获取到什么数据。

5.5 onClose 方法。

5.6 initialIndex 初始化预览的图片索引。

5.7 appendToBody 是否将弹出层的 dom 挂载到 body 中。

5.8 maskClosable 点击遮罩层是否关闭。