2022-04-22 10:30:17 +00:00
|
|
|
<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>
|
2022-04-29 10:35:39 +00:00
|
|
|
import imgTools from '@/jsFile/img/yy-img.js';
|
2022-04-22 10:30:17 +00:00
|
|
|
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) {
|
2022-04-29 10:35:39 +00:00
|
|
|
imgTools.previewImg(index,this.imgList);
|
|
|
|
// uni.previewImage({
|
|
|
|
// current: index,
|
|
|
|
// urls: this.imgList
|
|
|
|
// })
|
2022-04-22 10:30:17 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
</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>
|