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

197 lines
5.1 KiB
Vue
Raw Normal View History

<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';
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
// })
}
}
}
</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>