图片展示组件
<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>
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
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 |
事件名 | 回调参数 | 说明 |
---|---|---|
load | event object - event |
图片加载完成事件 |
error | event object - event |
图片加载失败事件 |
click | event object - event |
点击图片事件 |
名称 | 说明 | Bindings |
---|---|---|
loading | loading 插槽 | |
error | 图片加载失败插槽 |