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> <template>
<div class="uploadbox"> <div class="uploadbox">
<el-upload <div class="uploadimgbox" :style="{height:width+'px'}">
action="" <div v-for="img,index in fileList" :key="index" :style="{width:width+'px'}" class="imgitem" @dragstart="onDragstart" @dragenter="onDragenter" @dragover="onDragover" @dragend="onDragend">
:auto-upload="false" <img :src="img.url" class="img"/>
list-type="picture-card" <div class="uploadimgmask" v-if="clear||isPrew">
v-bind="$attrs" <i class="el-icon-search" v-if="isPrew" @click="handlePictureCardPreview(img)"></i>
v-on="$listeners" <i class="el-icon-delete" v-if="clear" @click="handleRemove(img.raw,index)"></i>
:on-preview="handlePictureCardPreview" </div>
:on-remove="handleRemove" </div>
:file-list="fileList" <div class="uploadcontain" :style="{width:width+'px'}">
ref="agupdateref" <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>
<i class="el-icon-plus"></i> </div>
</el-upload>
<el-dialog :visible.sync="dialogVisible"> <el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt=""> <img width="100%" :src="dialogImageUrl" alt="">
</el-dialog> </el-dialog>
@ -24,7 +23,20 @@
export default { export default {
name: "agUpdate", name: "agUpdate",
props:['style','class'], props:{
isPrew:{
type:Boolean,
default:true
},
clear:{
type:Boolean,
default:true
},
width:{
type:Number,
default:80
}
},
data() { data() {
return { return {
dialogImageUrl: '', dialogImageUrl: '',
@ -33,20 +45,20 @@
}; };
}, },
mounted() { mounted() {
let input=this.$refs.agupdateref.$vnode&&this.$refs.agupdateref.$vnode.elm.querySelector('input[type=file]');
if(input){
input.addEventListener('change',this.onUpdate);
}
}, },
methods: { methods: {
handleRemove(file, fileList) { handleRemove(file,index) {
this.fileList=fileList; this.fileList=this.fileList.filter((item,inkey)=>{
this.$emit('onRemove',file,this.fileList); return inkey !== index;
});
this.$emit('onRemove',file,this.fileList);
}, },
handlePictureCardPreview(file) { handlePictureCardPreview(file) {
this.dialogImageUrl = file.url; this.dialogImageUrl = file.url;
console.log(this.dialogImageUrl,'this.dialogImageUrl');
this.dialogVisible = true; this.dialogVisible = true;
}, },
onUpdate(e){ onUpdate(e){
@ -60,7 +72,7 @@
url:e.target.result, url:e.target.result,
raw:item raw:item
}); });
if(files.length-1==index){ if(files.length==uplist.length){
this.fileList.push(...uplist); this.fileList.push(...uplist);
this.$emit('onUpload',uplist,this.fileList); 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> </script>
<style lang="scss" scoped> <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 { ::v-deep {
.el-table { .el-table {
width: 100%; width: 100%;

View File

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