cover-image
基础库 3.27.0 开始支持，低版本需做兼容处理。
仅支持在 cover-view 中使用。
| 属性 | 类型 | 是否必填 | 说明 | 版本 |
|---|---|---|---|---|
animation | string | "" | 执行动画的id（animation） | 3.34.0 |
| src | string | 图标路径，支持临时路径、网络地址 | 3.27.0 | |
| click | eventhandle | 用户点击触发 | 3.27.0 | |
| load | eventhandle | 图片加载成功时触发 | 3.27.0 | |
| touchstart | eventhandle | 手指触摸动作开始 | 3.27.0 | |
| touchmove | eventhandle | 手指触摸后移动 | 3.27.0 | |
| touchend | eventhandle | 手指触摸动作结束 | 3.27.0 | |
| touchcancel | eventhandle | 手指触摸动作被打断，如来电提醒，弹窗 | 3.27.0 | |
| error | eventhandle | 图片加载失败时触发 | 3.27.0 |
支持的格式
| 格式 | iOS | Android |
|---|---|---|
| JPG | √ | √ |
| PNG | √ | √ |
| WEBP | √ | √ |
默认样式
.bl___cover-image {
width: 320px;
height: 240px;
overflow: hidden
}
示例代码
<template>
<cover-view>
<cover-image src="https://i0.hdslb.com/bfs/archive/10641bbc5189591221c00958f3458f33798c7caa.png" class="image"></cover-image>
</cover-view>
</template>
<script>
export default {
data() {}
}
</script>
<style scoped>
.image{
width: 162px;
height: auto;
}
</style>
Bug & Tip
tip: cover-image 的宽和高必须指定其中一个值（或两者都指定），否则以父容器宽高适配。