博客

这是一个Uniapp插件，项目实例地址：

uniapp-文本缩略显示&img自适应

<template>
<view>
	<view class="fsc wrap">
		<view :class="imgList.length>=3?'wp-32 mg-lr-5 mg-t-8':'mg-lr-8 mg-t-15'"
		v-for="(item,index) in imgList" :key="index"
		@click="previewImg(index)">
			<block v-if="imgList.length==1">
				<image :src="item" class="w-300 radius20 h-400" mode="widthFix"></image>
			</block>
			<block v-if="imgList.length==2">
				<image :src="item" class="w-260 radius20" mode="widthFix"></image>
			</block>
			<block v-if="imgList.length>=3">
				<image :src="item" class="wp-100 h-260 radius15" mode="aspectFill"></image>
			</block>
		</view>
	</view>
</view>
</template>

<script>
export default {
	name: 'imageAdaptation',
	props: {
		imgList: {
			type: Array,
			default: []
		},
	},
	data() {
		return {
			
		}
	},
	methods: {
		// 预览图片
		previewImg(_index) {
			uni.previewImage({
				current: _index, //  传 Number H5端出现不兼容
				urls: this.imgList,
				longPressActions: {
					itemList: ['保存图片'],
				}
			})
		},
	}
}
</script>

<style lang="scss" scoped>
image{ vertical-align: middle; }
</style>