qiaopengfei
/
ag-element-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

22

This commit is contained in:
ln1778 2024-09-19 09:58:45 +08:00
parent 58b2d52adf
commit df94b0aa59
3 changed files with 1112 additions and 848 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
View File

@ -1,6 +1,6 @@
{
"name": "ag-element-ui",
"version": "0.1.20",
"version": "0.1.21",
"main": "packages/index.js",
"scripts": {
"dev": "vue-cli-service serve",

241
packages/agForm/src/index.vue
View File

@ -1,46 +1,171 @@
<template>
<el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
<ag-row>
<ag-col v-for="item,index in data" :key="index" :span="item.span||24">
<ag-col v-for="(item, index) in data" :key="index" :span="item.span || 24">
<el-form-item v-bind="item" :prop="item.enName">
<slot :name="item.soltName" v-if="item.soltName" :row="item" />
<div class="contentbox" v-else>
<ag-input v-model="formValue[item.enName]" type="textarea" v-bind="item" v-if="item.type=='ag-textarea'" size="small" clearable></ag-input>
<ag-input v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input'" size="small" clearable></ag-input>
<ag-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-date-picker'" size="small" clearable/>
<ag-select v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-select'" size="small" clearable/>
<el-radio-group v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-radio'&&formValue[item.enName]" size="small" clearable>
<el-radio :label="it.value" v-for="it,index in item.options" :key="index">{{it.label}}</el-radio>
<ag-input
v-model="formValue[item.enName]"
type="textarea"
v-bind="item"
v-if="item.type == 'ag-textarea'"
size="small"
clearable
></ag-input>
<ag-input
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-input'"
size="small"
clearable
></ag-input>
<ag-date-picker
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-date-picker'"
size="small"
clearable
/>
<ag-select
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-select'"
size="small"
clearable
/>
<el-radio-group
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-radio' && formValue[item.enName]"
size="small"
clearable
>
<el-radio
:label="it.value"
v-for="(it, index) in item.options"
:key="index"
>{{ it.label }}</el-radio
>
</el-radio-group>
<el-checkbox-group v-bind="item" v-if="item.type=='ag-checkbox'&&formValue[item.enName]" v-model="formValue[item.enName]" size="small" clearable>
<el-checkbox v-for="it,index in item.options" :label="it.value" :key="index">{{it.label}}</el-checkbox>
<el-checkbox-group
v-bind="item"
v-if="item.type == 'ag-checkbox' && formValue[item.enName]"
v-model="formValue[item.enName]"
size="small"
clearable
>
<el-checkbox
v-for="(it, index) in item.options"
:label="it.value"
:key="index"
>{{ it.label }}</el-checkbox
>
</el-checkbox-group>
<el-input-number v-model="formValue[item.enName]" v-bind="item" v-if="item.type=='ag-input-number'" clearable></el-input-number>
<el-cascader v-model="formValue[item.enName]" v-bind="item" size="small" v-if="item.type=='ag-cascader'" clearable :style="{width:'100%'}"></el-cascader>
<el-input-number
v-model="formValue[item.enName]"
v-bind="item"
v-if="item.type == 'ag-input-number'"
clearable
></el-input-number>
<el-cascader
v-model="formValue[item.enName]"
v-bind="item"
size="small"
v-if="item.type == 'ag-cascader'"
clearable
:style="{ width: '100%' }"
></el-cascader>
<el-switch
v-model="formValue[item.enName]"
v-bind="item" size="small" v-if="item.type=='ag-switch'&&formValue[item.enName]" >
v-bind="item"
size="small"
v-if="item.type == 'ag-switch' && formValue[item.enName]"
>
</el-switch>
<el-slider v-model="formValue[item.enName]"
v-bind="item" size="small" v-if="item.type=='ag-slider'"></el-slider>
<el-slider
v-model="formValue[item.enName]"
v-bind="item"
size="small"
v-if="item.type == 'ag-slider'"
></el-slider>
<el-time-select
:style="{ width: '100%' }"
clearable
v-model="formValue[item.enName]"
v-bind="item" size="small"
v-bind="item"
size="small"
v-if="item.type == 'ag-time-select'"
:picker-options="item.options">
:picker-options="item.options"
>
</el-time-select>
<ag-upload v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-upload'" clear isPre></ag-upload>
<el-rate v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-rate'" size="small"></el-rate>
<agColorPicker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-color-picker'" size="small">
<ag-upload
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-upload'"
@onError="$listeners.onError"
clear
isPre
></ag-upload>
<el-rate
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-rate'"
size="small"
></el-rate>
<agColorPicker
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-color-picker'"
size="small"
>
</agColorPicker>
<el-transfer :data="item.data" v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-transfer'" size="small"></el-transfer>
<agNumberRange v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-numberRange'" size="small" clearable/>
<ag-multion-input v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-input'" size="small" clearable/>
<agQuery v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-query'" size="small" clearable/>
<ag-mution-checkbox :datas="item.datas" v-bind="item" :placeholder="item.placeholder" v-model="formValue[item.enName]" v-if="item.type=='ag-mution-checkbox'" size="small"> </ag-mution-checkbox>
<ag-multion-date-picker v-bind="item" v-model="formValue[item.enName]" v-if="item.type=='ag-multion-datte-picker'" size="small"/>
<el-transfer
:data="item.data"
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-transfer'"
size="small"
></el-transfer>
<agNumberRange
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-numberRange'"
size="small"
clearable
/>
<ag-multion-input
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-multion-input'"
size="small"
clearable
/>
<agQuery
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-query'"
size="small"
clearable
/>
<ag-mution-checkbox
:datas="item.datas"
v-bind="item"
:placeholder="item.placeholder"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-mution-checkbox'"
size="small"
>
</ag-mution-checkbox>
<ag-multion-date-picker
v-bind="item"
v-model="formValue[item.enName]"
v-if="item.type == 'ag-multion-datte-picker'"
size="small"
/>
</div>
<div v-if="item.tip" class="tipbox">
<slot name="tip" :row="item"> {{ item.tip }}</slot>
</div>
</el-form-item>
</ag-col>
@ -48,27 +173,24 @@
<div class="footerbox" v-if="$listeners.onSubmit">
<slot name="button" :value="formValue">
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
{{submittitle||'提交'}}
{{ submittitle || "提交" }}
</el-button>
</slot>
</div>
</el-form>
</template>
<script>
import agInput from './../../agInput/src/index.vue';
import agDatePicker from './../../agDatePicker/src/index.vue';
import agSelect from './../../agSelect/src/index.vue';
import agRow from './../../agRow/src/index.vue';
import agCol from './../../agCol/src/index.vue';
import agUpload from './../../agUpload/src/index.vue';
import agColorPicker from './../../agColorPicker/src/index.vue';
import agNumberRange from './../../agNumberRange/src/index.vue';
import agMultionInput from './../../agMultionInput/src/index.vue';
import agQuery from './../../agQuery/src/index.vue';
import agMultionDatePicker from '../../agMultionDatePicker';
import agInput from "./../../agInput/src/index.vue";
import agDatePicker from "./../../agDatePicker/src/index.vue";
import agSelect from "./../../agSelect/src/index.vue";
import agRow from "./../../agRow/src/index.vue";
import agCol from "./../../agCol/src/index.vue";
import agUpload from "./../../agUpload/src/index.vue";
import agColorPicker from "./../../agColorPicker/src/index.vue";
import agNumberRange from "./../../agNumberRange/src/index.vue";
import agMultionInput from "./../../agMultionInput/src/index.vue";
import agQuery from "./../../agQuery/src/index.vue";
import agMultionDatePicker from "../../agMultionDatePicker";
export default {
name: "agForm",
@ -83,30 +205,28 @@ export default{
agColorPicker,
agNumberRange,
agMultionInput,
agQuery
agQuery,
},
props: {
submittitle: {
type: String,
default:'提交'
default: "提交",
},
data: {
type: Array,
default() {
return []
}
return [];
},
},
span: {
type: Number,
default:24
default: 24,
},
},
data() {
return {
formValue:{
}
}
formValue: {},
};
},
mounted() {
this.formValue = this.$attrs.value;
@ -115,12 +235,11 @@ export default{
}, 1);
if (this.$refs.formref) {
for (const key in this.$refs.formref) {
if(!this[key]&&key!='value'){
if (!this[key] && key != "value") {
this[key] = this.$refs.formref[key];
}
}
}
},
watch: {
value(val) {
@ -128,14 +247,14 @@ export default{
setTimeout(() => {
this.$refs.formref.clearValidate();
}, 1);
}
},
},
methods: {
onSubmit() {
this.$emit('onSubmit',this.formValue)
}
this.$emit("onSubmit", this.formValue);
},
}
},
};
</script>
<style lang="scss" scoped>
@ -165,6 +284,10 @@ export default{
display: flex;
align-items: stretch;
}
.tipbox {
width: 100%;
color: red;
}
::v-deep {
.el-form--inline {
.el-form-item {
@ -174,6 +297,7 @@ export default{
display: flex;
flex: 1;
width: 100%;
flex-wrap: wrap;
margin-left: 0;
}
}
@ -184,8 +308,15 @@ export default{
.el-form-item__content {
flex: 1;
display: flex;
flex-wrap: wrap;
width: 100%;
margin-left: 0 !important;
}
.el-radio-button__inner,
.el-radio-group {
display: flex;
align-items: center;
}
}
</style>

279
packages/agUpload/src/index.vue
View File

@ -1,35 +1,81 @@
<template>
<div class="uploadbox">
<div class="uploadimgbox" :style="{height:width+'px'}" v-if="listType=='picture-card'">
<div v-for="img,index in imageList" :key="index" :style="{width:width+'px'}" :draggable="dragmove" class="imgitem" :class="dragmove&&dragmoveclass" @dragstart="onDragstart" @dragenter="onDragenter" @dragover="onDragover" @dragend="onDragend" @dragleave="onMouseup" >
<div
class="uploadimgbox"
:style="{ height: width + 'px' }"
v-if="listType == 'picture-card'"
>
<div
v-for="(img, index) in imageList"
:key="index"
:style="{ width: width + 'px' }"
:draggable="dragmove"
class="imgitem"
:class="dragmove && dragmoveclass"
@dragstart="onDragstart"
@dragenter="onDragenter"
@dragover="onDragover"
@dragend="onDragend"
@dragleave="onMouseup"
>
<slot name="file" :file="img">
<img :src="img.url" class="img" v-if="img.type.indexOf('image') > -1" />
<div
v-if="
$attrs.masktext &&
$attrs.masktext.ai == false &&
$attrs.masktext.data[index]
"
class="maskbox"
>
{{ $attrs.masktext.data[index] }}
</div>
<div v-if="$attrs.masktext && $attrs.masktext.ai == true" class="maskbox">
{{ index + 1 }}
</div>
<div v-else class="filetext">
<div class="filetitletext">文件</div>
<div>{{ img.name }}</div>
</div>
<div class="uploadimgmask" v-if="clear || isPrew">
<i class="el-icon-search" v-if="isPrew&&img.type.indexOf('image')>-1" @click="handlePictureCardPreview(img)"></i>
<i class="el-icon-delete" v-if="clear" @click="handleRemove(img.raw,index)"></i>
<i
class="el-icon-search"
v-if="isPrew && img.type.indexOf('image') > -1"
@click="handlePictureCardPreview(img)"
></i>
<i
class="el-icon-delete"
v-if="clear"
@click="handleRemove(img.raw, index)"
></i>
</div>
</slot>
</div>
<div class="uploadcontain" :style="{height:width+'px',aspectRatio:isDrap?4/3:1/1}"
<div
class="uploadcontain"
:style="{ height: width + 'px', aspectRatio: isDrap ? 4 / 3 : 1 / 1 }"
:draggable="isDrap"
@dragover.prevent
@dragenter.prevent
@drop="onUploadDrap"
v-if="limit>imageList.length">
v-if="limit > imageList.length"
>
<label for="uploadinput" class="uploadlabel" @click="onInputClick">
<slot>
<i class="el-icon-plus"></i>
<span class="draptiptext">{{isDrap?'拖拽上传':'上传'}}</span>
<i
class="el-icon-plus"
:style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
></i>
<span class="draptiptext">{{
isDrap ? ($attrs.uploadtext ? $attrs.uploadtext : "拖拽上传") : "上传"
}}</span>
</slot>
</label>
</div>
</div>
<div class="uploadtextbox" v-if="listType == 'text' || listType == 'picture'">
<div class="uploadtextcontain"
<div
class="uploadtextcontain"
:draggable="isDrap"
@dragover.prevent
@dragenter.prevent
@ -37,29 +83,52 @@
>
<label for="uploadinput" class="uploadlabel" @click="onInputClick">
<slot>
<el-button type="primary" size="small"><i class="el-icon-plus"></i> {{isDrap?'拖拽上传':'上传'}}</el-button>
<el-button type="primary" size="small"
><i
class="el-icon-plus"
:style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
></i>
{{
isDrap ? ($attrs.uploadtext ? $attrs.uploadtext : "拖拽上传") : "上传"
}}</el-button
>
</slot>
</label>
</div>
<slot name="tip">
</slot>
<slot name="tip"> </slot>
<ul class="uploadtextlist" :class="'upload-list--' + listType">
<li v-for="img,index in imageList" :key="index" class="uploadtextitem" >
<div class="ag-upload-list__item-namebox" @click="handlePictureCardPreview(img)">
<li v-for="(img, index) in imageList" :key="index" class="uploadtextitem">
<div
class="ag-upload-list__item-namebox"
@click="handlePictureCardPreview(img)"
>
<slot name="icon">
<i class="el-icon-document ag-icon-document"></i>
</slot>
<slot name="file" :file="img">
<img v-if="listType=='picture'" :src="img.url" class="ag-upload-list__item-thumbnail" />
<img
v-if="listType == 'picture'"
:src="img.url"
class="ag-upload-list__item-thumbnail"
/>
<a class="ag-upload-list__item-name">{{ img.name }}</a>
</slot>
</div>
<div class="uploadrightbox">
<slot name="status" :file="img">
<span class="uploadstatusbpx">
<i v-if="img.status==='uploading'" class="el-icon-loading uploadingicon" ></i>
<i v-if="img.status==='success'" class="el-icon-circle-check statusicon"></i>
<i v-if="img.status==='failed'" class="el-icon-circle-close failedicon"></i>
<i
v-if="img.status === 'uploading'"
class="el-icon-loading uploadingicon"
></i>
<i
v-if="img.status === 'success'"
class="el-icon-circle-check statusicon"
></i>
<i
v-if="img.status === 'failed'"
class="el-icon-circle-close failedicon"
></i>
<span v-if="img.msg" class="uploadmsg">{{ img.msg }}</span>
</span>
</slot>
@ -73,9 +142,17 @@
</li>
</ul>
</div>
<input type="file" style="display:none;" :multiple="limit>1&&$attrs.multiple" :accept="$attrs.accept" id="uploadinput" @change="onUpdate" ref="fileinputref"/>
<input
type="file"
style="display: none"
:multiple="limit > 1 && $attrs.multiple"
:accept="$attrs.accept"
id="uploadinput"
@change="onUpdate"
ref="fileinputref"
/>
<el-dialog :visible.sync="dialogVisible">
<img width="100%" :src="dialogImageUrl" alt="">
<img width="100%" :src="dialogImageUrl" alt="" />
</el-dialog>
</div>
</template>
@ -86,68 +163,68 @@
props: {
isPrew: {
type: Boolean,
default:true
default: true,
},
clear: {
type: Boolean,
default:true
default: true,
},
width: {
type: Number,
default:80
default: 80,
},
dragmove: {
type: Boolean,
default:false
default: false,
},
isDrap: {
type: Boolean,
default:false
default: false,
},
limit: {
type: Number,
default:1
default: 1,
},
fileList: {
type: Array,
default() {
return [];
}
},
},
listType: {
type: String,
default:'picture-card'
}
default: "picture-card",
},
},
model: {
prop: 'fileList', // 明确指定 prop 为 'value'
event: 'onUpload' // 自定义事件名，用于更新 value
prop: "fileList", // 明确指定 prop 为 'value'
event: "onUpload", // 自定义事件名，用于更新 value
},
mounted() {
if (this.fileList.length > 0) {
let list = [];
this.fileList.map((h) => {
if(typeof(h)=='object'){
if (typeof h == "object") {
list.push(h);
} else {
let imgurl = h.split("/");
let filename = imgurl[imgurl.length - 1];
let extarr = h.split(".");
let extname = extarr[extarr.length - 1];
if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
if (["jpg", "jpeg", "png", "gif", "svg"].indexOf(extname) > -1) {
list.push({
name: filename,
url: h,
type:'image/'+extname.toLowerCase(),
raw:null
type: "image/" + extname.toLowerCase(),
raw: null,
});
} else {
list.push({
name: filename,
url: h,
type:'other/'+extname.toLowerCase(),
raw:null
type: "other/" + extname.toLowerCase(),
raw: null,
});
}
}
@ -160,44 +237,44 @@
if (val.length > 0) {
let list = [];
val.map((h) => {
if(typeof(h)=='object'){
if (typeof h == "object") {
list.push(h);
} else {
let imgurl = h.split("/");
let filename = imgurl[imgurl.length - 1];
let extarr = h.split(".");
let extname = extarr[extarr.length - 1];
if(['jpg','jpeg','png','gif','svg'].indexOf(extname)>-1){
if (["jpg", "jpeg", "png", "gif", "svg"].indexOf(extname) > -1) {
list.push({
name: filename,
url: h,
type:'image/'+extname.toLowerCase(),
raw:null
type: "image/" + extname.toLowerCase(),
raw: null,
});
} else {
list.push({
name: filename,
url: h,
type:'other/'+extname.toLowerCase(),
raw:null
type: "other/" + extname.toLowerCase(),
raw: null,
});
}
}
});
this.imageList = list;
}
}
},
},
data() {
return {
dialogImageUrl: '',
dialogImageUrl: "",
dialogVisible: false,
imageList: [],
sourceNode: null,
partNode: null,
selectTop: false,
drag: false,
dragmoveclass:'imghover'
dragmoveclass: "imghover",
};
},
methods: {
@ -205,10 +282,10 @@
this.imageList = this.imageList.filter((item, inkey) => {
return inkey !== index;
});
this.$emit('onRemove',file,this.imageList);
this.$emit("onRemove", file, this.imageList);
},
handlePictureCardPreview(file) {
if(file.type.indexOf('image/')>-1){
if (file.type.indexOf("image/") > -1) {
this.dialogImageUrl = file.url;
this.dialogVisible = true;
}
@ -217,6 +294,7 @@
if (this.limit <= this.imageList.length) {
return;
}
let that = this;
try {
let uplist = [];
let files = [...e.target.files].slice(0, this.limit - this.imageList.length);
@ -225,7 +303,7 @@
let acceptarr = this.$attrs.accept.split(",");
if (!acceptarr.includes(f.type)) {
if (this.$listeners.onError) {
this.$emit('onError',`其中第${i+1}张文件类型错误`);
this.$emit("onError", `其中第${i + 1}张文件类型错误`);
}
return true;
}
@ -233,7 +311,10 @@
if (this.$attrs.maxSize) {
if (f.size > this.$attrs.maxSize) {
if (this.$listeners.onError) {
this.$emit('onError',`其中第${i+1}张文件大小不能超过${this.$attrs.maxSize/1024/1024}M"`);
this.$emit(
"onError",
`其中第${i + 1}张文件大小不能超过${this.$attrs.maxSize / 1024 / 1024}M"`
);
}
return true;
}
@ -247,19 +328,62 @@
if (item.type.indexOf("image") > -1) {
let filerender = new FileReader();
filerender.onload = function (e) {
if (that.$attrs.minWidth || that.$attrs.minHeight) {
let img = document.createElement("img");
img.src = e.target.result;
img.onload = () => {
if (img.width < that.$attrs.minWidth) {
if (this.$listeners.onError) {
this.$emit(
"onError",
`其中第${index + 1}张图片宽度不能小于${that.$attrs.minWidth}`
);
}
return;
}
if (img.height < that.$attrs.minHeight) {
if (this.$listeners.onError) {
this.$emit(
"onError",
`其中第${index + 1}张图片高度不能小于${that.$attrs.minHeight}`
);
}
return;
}
uplist.push({
name: item.name,
url: e.target.result,
type: item.type,
size: item.size,
raw: item,
status:'init',
msg:""
status: "init",
msg: "",
});
if (files.length == uplist.length) {
if (this.$listeners.onUpload) {
this.fileList.push(...uplist);
this.$emit('onUpload',this.fileList,uplist);
this.$emit("onUpload", this.fileList, uplist);
} else {
this.imageList.push(...uplist);
}
}
};
return;
}
uplist.push({
name: item.name,
url: e.target.result,
type: item.type,
size: item.size,
raw: item,
status: "init",
msg: "",
});
if (files.length == uplist.length) {
if (this.$listeners.onUpload) {
this.fileList.push(...uplist);
this.$emit("onUpload", this.fileList, uplist);
} else {
this.imageList.push(...uplist);
}
@ -272,13 +396,13 @@
type: item.type,
size: item.size,
raw: item,
status:'init',
msg:""
status: "init",
msg: "",
});
if (files.length == uplist.length) {
if (this.$listeners.onUpload) {
this.fileList.push(...uplist);
this.$emit('onUpload',this.fileList,uplist);
this.$emit("onUpload", this.fileList, uplist);
} else {
this.imageList.push(...uplist);
}
@ -289,7 +413,7 @@
console.log(err, "uploaderr");
if (this.$listeners.onError) {
this.$emit('onError',e);
this.$emit("onError", e);
}
}
},
@ -308,7 +432,7 @@
return;
}
if (this.partNode === e.target || e.target === this.sourceNode) {
return
return;
}
const childrens = [...this.partNode.children];
let thistarget = childrens.find((f) => f == e.target);
@ -316,7 +440,7 @@
thistarget = e.target.parentNode;
}
if (!thistarget) {
return
return;
}
const sourceIndex = childrens.indexOf(this.sourceNode);
@ -326,7 +450,6 @@
} else {
this.partNode.insertBefore(this.sourceNode, thistarget);
}
},
onDragover(e) {
e.preventDefault();
@ -337,7 +460,7 @@
return;
}
if (this.partNode === e.target || e.target === this.sourceNode) {
return
return;
}
this.sourceNode.classList.remove("moving");
},
@ -350,7 +473,7 @@
e.target.classList.remove("tabsbg");
this.sourceNode.classList.remove("moving");
if (this.partNode === e.target || e.target === this.sourceNode) {
return
return;
}
const childrens = [...this.partNode.children];
@ -373,7 +496,7 @@
e.preventDefault(); // 阻止默认行为（打开文件）
e.stopPropagation(); // 停止事件冒泡
this.$refs.fileinputref.click();
}
},
},
};
</script>
@ -385,6 +508,7 @@
aspect-ratio: 1/1;
border-radius: 4px;
background-color: #fff;
border: 1px solid #e5e5e5;
cursor: pointer;
overflow: hidden;
.uploadlabel {
@ -416,11 +540,23 @@
position: relative;
width: 100px;
cursor: pointer;
border: 1px solid #e5e5e5;
background: #fff;
border-radius: 4px;
overflow: hidden;
aspect-ratio: 1/1;
transition: all .3s;
transition: all 0.3s;
.maskbox {
position: absolute;
left: 0;
top: 0;
background: #1f292e 60%;
padding: 5px 8px;
border-bottom-right-radius: 6px;
line-height: 1;
color: #fff;
font-size: 12px;
}
&.imghover:hover {
cursor: move;
}
@ -449,7 +585,7 @@
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,.3);
background-color: rgba(0, 0, 0, 0.3);
align-items: center;
justify-content: center;
gap: 6px;
@ -510,8 +646,6 @@
padding: 0;
list-style: none;
margin-top: 12px;
}
.upload-list--text {
margin: 0;
@ -524,7 +658,7 @@
.uploadtextitem {
position: relative;
list-style: none;
transition: all .5s cubic-bezier(.55,0,.1,1);
transition: all 0.5s cubic-bezier(0.55, 0, 0.1, 1);
font-size: 14px;
color: #606266;
line-height: 1;
@ -556,7 +690,7 @@
display: block;
overflow: hidden;
text-overflow: ellipsis;
transition: color .3s;
transition: color 0.3s;
white-space: nowrap;
font-size: 14px;
@ -574,7 +708,7 @@
position: relative;
right: 5px;
cursor: pointer;
opacity: .75;
opacity: 0.75;
color: #606266;
display: none;
}
@ -627,7 +761,7 @@
display: block;
overflow: hidden;
text-overflow: ellipsis;
transition: color .3s;
transition: color 0.3s;
white-space: nowrap;
line-height: 70px;
font-size: 14px;
@ -657,7 +791,7 @@
top: 5px;
right: 5px;
cursor: pointer;
opacity: .75;
opacity: 0.75;
color: #606266;
}
}
@ -689,4 +823,3 @@
}
}
</style>