liunan #10

Merged
liunan merged 47 commits from liunan into master 2024-09-13 14:43:34 +08:00
2 changed files with 118 additions and 27 deletions
Showing only changes of commit fb6bba617a - Show all commits

View File

@ -1,19 +1,18 @@
<template>
<div class="uploadbox">
<el-upload
action=""
:auto-upload="false"
list-type="picture-card"
v-bind="$attrs"
v-on="$listeners"
:on-preview="handlePictureCardPreview"
:on-remove="handleRemove"
:file-list="fileList"
ref="agupdateref"
>
<i class="el-icon-plus"></i>
</el-upload>
<div class="uploadimgbox" :style="{height:width+'px'}">
<div v-for="img,index in fileList" :key="index" :style="{width:width+'px'}" class="imgitem" @dragstart="onDragstart" @dragenter="onDragenter" @dragover="onDragover" @dragend="onDragend">
<img :src="img.url" class="img"/>
<div class="uploadimgmask" v-if="clear||isPrew">
<i class="el-icon-search" v-if="isPrew" @click="handlePictureCardPreview(img)"></i>
<i class="el-icon-delete" v-if="clear" @click="handleRemove(img.raw,index)"></i>
</div>
</div>
<div class="uploadcontain" :style="{width:width+'px'}">
<label for="uploadinput" class="uploadlabel"> <i class="el-icon-plus"></i></label>
<input key="" type="file" style="display:none;" :multiple="$attrs.multiple" id="uploadinput" @change="onUpdate"/>
</div>
</div>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
</el-dialog>
@ -24,7 +23,20 @@
export default {
name: "agUpdate",
props:['style','class'],
props:{
isPrew:{
type:Boolean,
default:true
},
clear:{
type:Boolean,
default:true
},
width:{
type:Number,
default:80
}
},
data() {
return {
dialogImageUrl: '',
@ -33,20 +45,20 @@
};
},
mounted() {
let input=this.$refs.agupdateref.$vnode&&this.$refs.agupdateref.$vnode.elm.querySelector('input[type=file]');
if(input){
input.addEventListener('change',this.onUpdate);
}
},
methods: {
handleRemove(file, fileList) {
this.fileList=fileList;
handleRemove(file,index) {
this.fileList=this.fileList.filter((item,inkey)=>{
return inkey !== index;
});
this.$emit('onRemove',file,this.fileList);
},
handlePictureCardPreview(file) {
this.dialogImageUrl = file.url;
console.log(this.dialogImageUrl,'this.dialogImageUrl');
this.dialogVisible = true;
},
onUpdate(e){
@ -60,7 +72,7 @@
url:e.target.result,
raw:item
});
if(files.length-1==index){
if(files.length==uplist.length){
this.fileList.push(...uplist);
this.$emit('onUpload',uplist,this.fileList);
}
@ -70,10 +82,89 @@
}
},
onDragstart(e){
e.preventDefault();
console.log(e,"eee");
},
onDragenter(e){
e.preventDefault();
console.log(e,"eee");
},
onDragover(e){
e.preventDefault();
console.log(e,"eee");
},
onDragend(e){
e.preventDefault();
console.log(e,"eee");
},
};
</script>
<style lang="scss" scoped>
.uploadcontain{
position: relative;
width:100px;
aspect-ratio: 1/1;
border-radius: 4px;
background-color: #fff;
cursor: pointer;
overflow: hidden;
.uploadlabel{
font-size: 16px;
color:#97a8be;
display: block;
width:100%;
height:100%;
display: flex;
align-items: center;
justify-content: center;
}
}
.uploadimgbox{
position: relative;
width: auto;
display: flex;
align-items: center;
gap:5px;
.imgitem{
position: relative;
width:100px;
cursor: pointer;
background: #fff;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 1/1;
img{
display: block;
aspect-ratio: 1/1;
width:100%;
}
.uploadimgmask{
position: absolute;
top:0;
display: none;
left: 0;
width:100%;
height:100%;
background-color: rgba(0,0,0,.3);
align-items: center;
justify-content: center;
gap:6px;
i{
font-size: 20px;
color:#fff;
cursor: pointer;
}
}
&:hover{
.uploadimgmask{
display: flex;
}
}
}
}
::v-deep {
.el-table {
width: 100%;

View File

@ -47,7 +47,7 @@
<div>{{row.date}} </div>
</template>
</agTable>
<agUpdate @onUpload="onUpload" multiple style="width:120px">
<agUpdate @onUpload="onUpload" multiple >
</agUpdate>
<!-- <el-input