template-project/components/choose-imgs/img-one.vue

186 lines
5.1 KiB
Vue

<template>
<view>
<view class="img-outside-box">
<!-- 标题 -->
<view v-if="ifTitle" class="img-title">标题</view>
<view :class="(imgList.length==showAmount || 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],
marginRight: (imgList.length==showAmount && imgList.length==showAmount*2) ? '' : '20rpx'
}"
:class="[(showAmount-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]+'rpx',
height:[60,60,60,50,40][showAmount]+'rpx'
}"
@tap="delImg(index)"></view></view>
</view>
<!-- 添加图片按钮 -->
<view class="add-img-btn icon" :class="addIconList[addNum]"
v-if="imgList.length!=20"
:style="{
width: ['100%','100%','48.4%','31.4%','22.8%'][showAmount],
height: imgH+'px',
borderRadius: imgR,
marginRight: (imgList.length==(showAmount-1) || imgList.length==(showAmount-1)+showAmount || imgList.length==(showAmount-1)+showAmount*2 || imgList.length==(showAmount-1)+showAmount*3 || imgList.length==(showAmount-1)+showAmount*4 || imgList.length==(showAmount-1)+showAmount*5 || imgList.length==(showAmount-1)+showAmount*6 || imgList.length==(showAmount-1)+showAmount*7 || imgList.length==(showAmount-1)+showAmount*8 || imgList.length==(showAmount-1)+showAmount*9) ? '0rpx' : '20rpx'
}"
style="font-size: 90rpx;color: #CCCCCC;"
@tap="chooseImg">
</view>
</view>
</view>
</view>
</template>
<script>
export default {
name:"img-one",
props: {
// 一排显示数量
showAmount: {
type:Number,
default:3
},
ifTitle: {
type: Boolean,
default:false
},
// 图片圆角
imgR: {
type:String,
default:'10rpx'
},
// 一次选择图片张数1~9
imgN: {
type:Number,
default:9
},
// 哪种图标
addNum: {
type:String,
default:'0'
}
},
mounted() {
let info = uni.createSelectorQuery().select(".add-img-btn");
info.boundingClientRect((data)=> { //data - 各种参数
// console.log(data.width) // 获取元素宽度
this.imgH = data.width;
}).exec()
},
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,
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>