更新记录

1.0.0（2023-05-03）

完成

平台兼容性

Image 图片

参数

插槽

示例

裁剪模式

• scaleToFill 不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素
• aspectFit 保持纵横比缩放图片，使图片的长边能完全显示出来
• aspectFill 保持纵横比缩放图片，只保证图片的短边能完全显示出来
• widthFix 宽度不变，高度自动变化，保持原图宽高比不变
• heightFix 高度不变，宽度自动变化，保持原图宽高比不变

<ayi-image  src="/static/bg.jpg" :size="140" mode="scaleToFill"></ayi-image>
<ayi-image  src="/static/bg.jpg" :size="140" mode="aspectFit"></ayi-image>
<ayi-image  src="/static/bg.jpg" :size="140" mode="aspectFill"></ayi-image>
<ayi-image  src="/static/bg.jpg" :size="140" mode="widthFix"></ayi-image>

不同样式

<ayi-image src="/static/avatar.png" :size="140" round></ayi-image>
<ayi-image src="/static/avatar.png" :size="[140, 280]" mode="aspectFill" :margin="[0, 0, 0, 20]"></ayi-image>

点击预览

配置 previewList, 会自动匹配当前的 src 为第一张显示

<ayi-image src="/static/bg.jpg" :size="140" :preview-list="previewList"></ayi-image>

插槽

插槽：地址为空

<ayi-image src="" :size="150"></ayi-image>
<ayi-image src="" :size="150" :margin="[0, 0, 0, 20]">
    <template #placeholder>
        <ayi-text color="red" :size="30" value="自定义"></ayi-text>
    </template>
</ayi-image>

插槽：加载错误

<ayi-image src="https://xxxx.png" :size="150"></ayi-image>
<ayi-image src="https://xxxx.png" :size="150" :margin="[0, 0, 0, 20]">
    <template #error>
        <ayi-text color="red" :size="30" value="自定义"></ayi-text>
    </template>
</ayi-image>