图片 Image

常用的基础组件之一

• 必须指定样式中的宽度和高度，否则无法工作。

基础用法

点击查看源码

TypeScript

<script lang="ts">
import {defineComponent} from 'vue';
export default defineComponent({
	setup() {
		// ...
	},
});
</script>
<style lang="css" scoped>
.qt-image {
	width: 260px;
	height: 320px;
}
</style>
<template>
	<qt-image
		src="https://img1.baidu.com/it/u=2666955302,2339578501&fm=253"
		class="qt-image"
	/>
</template>

属性

参数	描述	类型
src	图片地址	string
fullQuality	是否使用高质量图片	boolean
loadImgDelay	图片加载的delay时间(毫秒），常用在ul里，用来优化性能.	number
*showOnState	根据状态设置是否可见	enum

• showOnState 相应焦点状态时显示，三个状态一组使用。
• normal: string - 正常 ；
• focused: string - 焦点 ；
• selected: string - 选中，在ul组件中生效，移出ul时触发，如果不需要selected状态，ul标签中添加:enableSelectOnFocus="false" ；

样式内特殊属性

参数	描述	类型
resize-mode	决定当组件尺寸和图片尺寸不成比例的时候如何调整图片的大小。	string(cover, contain, stretch, repeat, center)

事件

事件名称	描述	类型
layout	当元素挂载或者布局改变的时候调用，参数为： { nativeEvent: { layout: { x, y, width, height } } }。	Function
load	加载成功完成时调用此回调函数。	Function
loadStart	加载开始时调用。	Function
*loadEnd	加载结束后，不论成功还是失败，调用此回调函数。	Function
error	当加载错误的时候调用此回调函数。	Function
progress	当加载错误的时候调用此回调函数。	Function

• loadEnd参数
• success: bool - 加载成功或者失败 ；
• image.width: number - 图片宽度 ；
• image.height: number - 图片高度 ；