Element-ui图片懒加载

Element-ui图片懒加载_第1张图片

 Element-ui图片懒加载_第2张图片

 核心代码


	加载失败

	加载失败

重点

该代码必须在vue下才能正常运行。 如果你的项目是Vue脚手架搭建,请自动绕过。

如果你是的Element-ui是引入的,操作方式如下




	橙-极纪元JJY.Cheng
	
	
	
	


	
加载失败

文档说明

地址:

Element - The world's most popular Vue UI framework

标签属性说明

参数 说明 类型 可选值 默认值
src 图片源,同原生 string -
fit 确定图片如何适应容器框,同原生 object-fit string fill / contain / cover / none / scale-down -
alt 原生 alt string - -
referrer-policy 原生 referrerPolicy string - -
lazy 是否开启懒加载 boolean false
scroll-container 开启懒加载后,监听 scroll 事件的容器 string / HTMLElement 最近一个 overflow 值为 auto 或 scroll 的父元素
preview-src-list 开启图片预览功能 Array -
z-index 设置图片预览的 z-index Number 2000
initial-index 图片预览初始图片index Number -

事件说明

事件名称 说明 回调参数
load 图片加载成功触发 (e: Event)
error 图片加载失败触发 (e: Error)

Slots占位说明

名称 说明
placeholder 图片未加载的占位内容
error 加载失败的内容

如下面代码中的


	加载中...
	加载失败

你可能感兴趣的:(VUE,vue.js,javascript,前端,Element-ui图片懒加载)