artwork-repair-h5/uni_modules/uon-preview

使用方法

<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>

<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 值	否