图片

介绍

图片展示组件

基本使用

<z-image width="200" height="200" :src="image" />
data() {
	return {
		image: 'https://cdn.zebraui.com/zebra-ui/images/demo.jpg',
	}
},

填充模式

与uniapp的image组件保持一致

<z-image :mode="fit" width="100%" height="200" :src="image" />
data() {
	return {
		fits: ['scaleToFill', 'aspectFit', 'aspectFill', 'widthFix', 'heightFix'],
	}
},

圆形图片

使用round属性即可将图片变为圆形

<z-image round :mode="fit" width="100%" height="200" :src="image" />

提示

图片分为加载中的提示,和加载失败的提示。当然,你也可以使用插槽自定义提示。

加载中

<z-image width="100%" height="27vw" />

自定义

<z-image width="100%" height="27vw" use-loading-slot>
	<template #loading>
		<z-loading type="spinner" size="40" />
	</template>
</z-image>

加载失败

<z-image width="100%" height="27vw" src="x" />

自定义

<z-image width="100%" height="27vw" src="x" use-error-slot>
	<template #error>加载失败</template>
</z-image>

Props

参数 说明 类型 可选值 默认值
width 图片宽度 string|number 100%
height 图片高度 string|number auto
radius 图片圆角尺寸 string|number 0
round 图片是否展示为圆形 boolean false
src 图片路径 string -
mode 图片裁剪、缩放的模式,可选值与与 uniapp 中的图片保持一致 string aspectFill
lazy-load 图片懒加载。只针对 page 与 scroll-view 下的 image 有效 boolean false
show-menu-by-longpress微信小程序 开启长按图片显示识别小程序码菜单 boolean false
show-loading 是否展示图片加载中提示 boolean true
use-loading-slot 是否使用 loading 插槽 boolean false
show-error 是否展示图片加载失败提示 boolean true
use-error-slot 是否使用 error 插槽 boolean false

Events

事件名 回调参数 说明
load event object - event 图片加载完成事件
error event object - event 图片加载失败事件
click event object - event 点击图片事件

Slots

名称 说明 Bindings
loading loading 插槽
error 图片加载失败插槽