# 使用方法

```html
<template>
	<view class="content">
		<uon-preview src="/static/animo.png"></uon-preview>
		
		<!-- 使用插槽 -->
		<uon-preview src="/static/long.jpg">
			<text>点击预览长图</text>
		</uon-preview>
		
		<!-- Array<String> 展示 -->
		<view v-for="(item, index) in data" :key="index">
			<uon-preview :src="item.img" :list="data" :img-index="index">
				<text>{{ 'list--预览图片----' + index }}</text>
			</uon-preview>
		</view>
		
		<!-- Array<Object> 展示 -->
		<view v-for="(item, index) in objecList" :key="index">
			<uon-preview :src="item.img" :list="objecList" :img-index="index" key-name="img">
				<text>{{ item.label + index }}</text>
			</uon-preview>
		</view>
	</view>
</template>
```
```js
<script>
	export default {
		data() {
			return {
				imageUrl: 'https://img.alicdn.com/imgextra/i4/O1CN01aG16y424E11XsURUd_!!6000000007358-2-tps-206-240.png',
				data: [
					'https://www.001acg.com/wp-content/uploads/2023/09/2e387-006yt1Omgy1h8kvgn9lypj30jn0rswj5.jpg', 
					'https://www.001acg.com/wp-content/uploads/2023/09/78f78-006yt1Omgy1h8pgxy2kknj31jk26p7rq.jpg', 
					'https://img.alicdn.com/imgextra/i4/O1CN01aG16y424E11XsURUd_!!6000000007358-2-tps-206-240.png'
				],
				objecList: [
					{ img: 'https://www.001acg.com/wp-content/uploads/2023/09/2e387-006yt1Omgy1h8kvgn9lypj30jn0rswj5.jpg', label: '预览图片----' },
					{ img: 'https://www.001acg.com/wp-content/uploads/2023/09/78f78-006yt1Omgy1h8pgxy2kknj31jk26p7rq.jpg', label: '预览图片----' },
					{ img: 'https://img.alicdn.com/imgextra/i4/O1CN01aG16y424E11XsURUd_!!6000000007358-2-tps-206-240.png', label: '预览图片----' },
				]
			};
		}
	}
</script>
```


# 组件属性

| 属性名 | 类型 | 默认值 | 说明 | 是否必填 |
| :-----: | :--: | :-------: | :--: | :----: |
| src | String | - | 图片资源地址 | 必填 |
| mode | String | widthFix | 图片裁剪、缩放的模式，与 image 组件用法相同，仅对默认展示图片有效 | 否 |
| width | String | auto | 默认展示图片的宽度 | 否 |
| height | String | auto | 默认展示图片的高度 | 否 |
| preview | Boolean | true | 是否开启预览模式 | 否 |
| list | Array | [] | 可以是 string[] 也可以是 object[]，object[]时必须设置对应的图片 key 值 | 否 |
| imgIndex | Number | -1 | 当前显示图片的索引值 | 否 |
| keyName | String | undefined | 对象数组中对应的图片 key 值 | 否 |