assess-app/components/en-utils/en-image/en-image.vue

<template>
	<view>
		<view class="row image-box">
			<image class="image-item r-10 m-r20 m-b20" :style="[{width},{height}]" :src="item" mode="aspectFill"
				v-for="(item,index) in imgList" @click="onPreviewImage(item)"></image>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			is_both: {
				type: Boolean,
				default: false
			},
			width: {
				type: String,
				default: '160rpx'
			},
			height: {
				type: String,
				default: '90rpx'
			},
			img: {
				default: []
			},
			previewImage: {
				default: []
			}
		},
		data() {
			return {
				imgList: []
			}
		},
		watch: {
			'img': function() {
				this.setImgList()
			}
		},
		mounted() {
			this.setImgList()
		},
		methods: {
			setImgList() {
				if (typeof this.img === "string") {
					this.imgList = [this.img]
				} else {
					this.imgList = this.img
				}
			},
			onPreviewImage(index) {
				uni.previewImage({
					urls: this.previewImage ? this.previewImage : this.imgList,
					current: index
				});
			}
		}
	}
</script>

<style lang="scss" scoped>
	.image-box {
		flex-wrap: wrap;
	}

	.image-item {
		display: block;
	}
</style>