|
|
|
|
|
# 使用方法
|
|
|
|
|
|
|
|
|
|
|
|
```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 值 | 否 |
|
