Advertisement

比较vue2和vue3中的element UI Image组件,并详细说明它们的属性、事件和方法的使用方式,并附上实例说明

阅读量:

在 Vue 2 的框架体系中,Element UI 组件库并未包含一个明确标识为 el-image 的图片组件。尽管如此,官方文档中仍然介绍了通过 Vue 指令(例如 v-bind:src)以及 Vue 基础功能实现图片展示的方法,这表明开发者通常会借助原生的 <img> 标签,并结合 Vue 的特性来处理图片相关内容。

而在 Element Plus,即 Element UI 针对 Vue 3 的升级版本中,确实引入了一个名为 ElImage 的图片组件,该组件具备更丰富的功能与更高的灵活性。

Vue 3 + Element Plus 的 ElImage

属性(Props)

  • src: 图片资源的来源链接。
    • fit: 用于设定图片填充方式,可选参数包括 fillcontaincovernonescale-down,系统默认采用 cover 模式。
    • alt: 当图片无法显示时所使用的替代性文字内容。
    • lazy: 是否启用懒加载功能,默认状态为关闭(即 false)。
    • lazy-load: 指定懒加载状态下所展示的占位内容,可以是具体的图片路径或者自定义函数。
    • error: 图片加载出现异常时所展示的备用图像。
    • `preview

全部评论 (0)

还没有任何评论哟~