appApplet/components/choose-imgs/choose-img-one.vue

<template>
	<view>
		<view class="img-outside-box">
			<!-- 标题 -->
			<view v-if="ifTitle" class="img-title">标题</view>
			<view :class="(imgList.length==showAmount*1 || imgList.length==showAmount*2) ? 'dis-jbac-fw' : 'dis-ac-fw'">
				<!-- 图片列表 -->
				<view class="img-box animated bounceIn" 
					:style="{
						width: ['100%','100%','48.4%','31.4%','22.8%'][showAmount*1],
						marginRight: (imgList.length==showAmount*1 && imgList.length==showAmount*2) ? '' : '20rpx'
					}" 
					:class="[(showAmount*1-1==index || showAmount*2-1==index || showAmount*3-1==index || showAmount*4-1==index || showAmount*5-1==index || showAmount*6-1==index || showAmount*7-1==index || showAmount*8-1==index || showAmount*9-1==index || showAmount*10-1==index) ? 'img-box-right' : '',delIndex==index ? 'bounceOut' : '' ]"
					v-for="(item,index) in imgList" :key="index" >
					<!-- 图片 -->
					<image @tap="preImg(index)" 
						class="picker-img" 
						:style="{
							width: '100%',
							height: imgH+'px',
							borderRadius: imgR
						}"
						:src="item" mode="aspectFill" lazy-load>
					</image>
					<!-- 删除按钮 -->
					<view class="img-del-box">
						<view class="del-btn" :style="{
							width: [60,60,60,50,40][showAmount*1]+'rpx',
							height:[60,60,60,50,40][showAmount*1]+'rpx'
						}"
						@tap="delImg(index)"></view></view>
				</view>
				<!-- 添加图片按钮 -->
				<view class="add-img-btn icon" :class="addIconList[addNum*1]" 
					v-if="imgList.length!=20"
					:style="{
						width: ['100%','100%','48.4%','31.4%','22.8%'][showAmount*1],
						height: imgH+'px',
						borderRadius: imgR}" 
					style="font-size: 90rpx;color: #CCCCCC;"
					@tap="chooseImg">
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		name:"img-one",
		props: {
			// 一排显示数量
			showAmount: {
				type:String,
				default:'3'
			},
			// 是否显示图片标题
			ifTitle: {
				type: Boolean,
				default:true
			},
			// 图片圆角
			imgR: {
				type:String,
				default:'10rpx'
			},
			// 一次选择图片张数1~9
			imgN: {
				type:String,
				default:'9'
			},
			// 哪种添加图标
			addNum: {
				type:String,
				default:'0'
			}
		},
		mounted() {
			// #ifdef APP-PLUS || H5
				let info = uni.createSelectorQuery().select(".add-img-btn");
				info.boundingClientRect((data)=> { //data - 各种参数  
					// console.log(data.width)  // 获取元素宽度  
					this.imgH = data.width;
				}).exec() 
			// #endif
			
			// #ifdef MP-WEIXIN
				// 获取选择图片按钮的宽，并设置选择图片按钮的高
				const query = wx.createSelectorQuery().in(this)
				query.select('.add-img-btn').boundingClientRect((rect) => {
					this.imgH = rect.width;
				}).exec()
			// #endif
		},
		data() {
			return {
				imgList:[],//图片列表
				imgH:'',//图片高度
				delIndex:'-1',
				// 添加按钮的icon图标
				addIconList:['icon-add','icon-add-picture01','icon-add-picture02','icon-add-picture03','icon-add-picture04','icon-add-picture05'],
			};
		},
		methods:{
			// 选择图片
			chooseImg() {
				uni.chooseImage({
					count: this.imgN*1,
					sizeType: ['original', 'compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						let files = res.tempFilePaths;
						this.imgList = [...this.imgList,...files];
						this.$emit('chooseEv',this.imgList);
					}
				})
			},
			// 删除图片
			delImg(index) {
				this.delIndex = index;
				setTimeout(()=>{
					this.delIndex = '-1';
					this.imgList.splice(index,1);
					this.$emit('chooseEv',this.imgList);
				},1000)
			},
			// 预览图片
			preImg(index) {
				uni.previewImage({
					current: index,
					urls: this.imgList
				})
			}
		}
	}
</script>

<style>
	.img-outside-box{padding-top: 20rpx;}
	.img-title{font-size: 28rpx;margin-bottom: 20rpx;}
	image {vertical-align: middle;}
	.dis-ac-fw{display: flex;align-items: center;flex-wrap: wrap;}
	.dis-jbac-fw{display: flex;justify-content: space-between;align-items: center;flex-wrap: wrap;}
	.img-box{margin-bottom: 20rpx;position: relative;}
	.img-box-right {
		margin-right: 0rpx!important;
	}
	.add-img-btn {
		position: relative;
		background-color: #DFDFDF;
		display: flex;justify-content: center;align-items: center;
		margin-bottom: 20rpx;
	}
	.icon-add::before,.icon-add::after {
		content:'';
		display: block;
		position: absolute;
		width: 4rpx;
		height: 50%;
		background-color: #CCCCCC;
		border-radius: 4rpx;
	}
	.icon-add::after{
		transform: rotate(90deg);
	}
	
	/* 删除按钮 */
	.img-del-box {
		position: absolute;
		top: 10rpx;
		right: 10rpx;
	}
	.del-btn{
		position: relative;
		display: flex;justify-content: center;align-items: center;
		background-color: rgba(0,0,0,.6);
		border-radius: 100%;
	}
	.del-btn::before,.del-btn::after{
		content: '';
		display: block;
		position: absolute;
		width: 2rpx;
		height: 46%;
		background-color: #FFFFFF;
		border-radius: 2rpx;
	}
	.del-btn::before{
		transform: rotate(45deg);
	}
	.del-btn::after{
		transform: rotate(-45deg);
	}
</style>