This commit is contained in:
ln1778 2024-09-23 09:26:44 +08:00
parent df94b0aa59
commit e742aeae7b
4 changed files with 403 additions and 369 deletions

View File

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

View File

@ -106,6 +106,7 @@
@onError="$listeners.onError" @onError="$listeners.onError"
clear clear
isPre isPre
@onUpload="item.onUpload"
></ag-upload> ></ag-upload>
<el-rate <el-rate
v-bind="item" v-bind="item"
@ -319,4 +320,3 @@
} }
} }
</style> </style>

View File

@ -2,7 +2,6 @@
<el-select <el-select
class="ag_select" class="ag_select"
:style="{ width: `100%` }" :style="{ width: `100%` }"
:value="selectValue"
ref="apselectref" ref="apselectref"
:size="$attrs.size || 'small'" :size="$attrs.size || 'small'"
v-bind="$attrs" v-bind="$attrs"
@ -10,8 +9,8 @@
> >
<slot v-for="(_, name) in $slots" :name="name" :slot="name"> </slot> <slot v-for="(_, name) in $slots" :name="name" :slot="name"> </slot>
<el-option <el-option
v-for="item in options" v-for="(item, index) in options"
:key="item.value" :key="index"
:label="item.label" :label="item.label"
:value="item.value" :value="item.value"
></el-option> ></el-option>
@ -32,40 +31,20 @@ export default {
return []; return [];
}, },
}, },
value:{
default: () =>'',
}
}, },
data() { data() {
return { return {};
selectValue:""
};
}, },
mounted() { mounted() {
if (this.$refs.apselectref) { if (this.$refs.apselectref) {
for (const key in this.$refs.apselectref) { for (const key in this.$refs.apselectref) {
if(!this[key]&&key!='value'){ if (!this[key] && key != "value") {
this[key] = this.$refs.apselectref[key]; this[key] = this.$refs.apselectref[key];
} }
} }
} }
}, },
watch: {
value: {
handler(newVal) {
let newselectValue=newVal;
const find=this.options.find((f)=>f.value==newselectValue);
if(find){
this.selectValue=newselectValue;
}else{
this.selectValue="";
}
},
immediate: true,
},
},
methods: {
},
}; };
</script> </script>

View File

@ -2,13 +2,18 @@
<div class="uploadbox"> <div class="uploadbox">
<div <div
class="uploadimgbox" class="uploadimgbox"
:style="{ height: width + 'px' }" :style="{
height: $attrs.height ? $attrs.height + 'px' : width + 'px',
}"
v-if="listType == 'picture-card'" v-if="listType == 'picture-card'"
> >
<div <div
v-for="(img, index) in imageList" v-for="(img, index) in imageList"
:key="index" :key="index"
:style="{ width: width + 'px' }" :style="{
width: width + 'px',
height: $attrs.height ? $attrs.height + 'px' : width + 'px',
}"
:draggable="dragmove" :draggable="dragmove"
class="imgitem" class="imgitem"
:class="dragmove && dragmoveclass" :class="dragmove && dragmoveclass"
@ -19,7 +24,11 @@
@dragleave="onMouseup" @dragleave="onMouseup"
> >
<slot name="file" :file="img"> <slot name="file" :file="img">
<img :src="img.url" class="img" v-if="img.type.indexOf('image') > -1" /> <img
:src="img.url || img"
class="img"
v-if="(img.type && img.type.indexOf('image') > -1) || img != ''"
/>
<div <div
v-if=" v-if="
$attrs.masktext && $attrs.masktext &&
@ -45,7 +54,7 @@
></i> ></i>
<i <i
class="el-icon-delete" class="el-icon-delete"
v-if="clear" v-if="clear && !disabled"
@click="handleRemove(img.raw, index)" @click="handleRemove(img.raw, index)"
></i> ></i>
</div> </div>
@ -53,7 +62,11 @@
</div> </div>
<div <div
class="uploadcontain" class="uploadcontain"
:style="{ height: width + 'px', aspectRatio: isDrap ? 4 / 3 : 1 / 1 }" :style="{
height: $attrs.height ? $attrs.height + 'px' : width + 'px',
aspectRatio: isDrap ? 4 / 3 : 1 / 1,
width: width + 'px',
}"
:draggable="isDrap" :draggable="isDrap"
@dragover.prevent @dragover.prevent
@dragenter.prevent @dragenter.prevent
@ -83,7 +96,7 @@
> >
<label for="uploadinput" class="uploadlabel" @click="onInputClick"> <label for="uploadinput" class="uploadlabel" @click="onInputClick">
<slot> <slot>
<el-button type="primary" size="small" <el-button type="primary" size="small" :disabled="disabled"
><i ><i
class="el-icon-plus" class="el-icon-plus"
:style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }" :style="{ fontSize: $attrs.width ? $attrs.width / 4 + 'px' : '25px' }"
@ -133,6 +146,7 @@
</span> </span>
</slot> </slot>
<el-popconfirm <el-popconfirm
v-if="!disabled"
:title="`确定移除${img.name}吗?`" :title="`确定移除${img.name}吗?`"
@confirm="handleRemove(img.raw, index)" @confirm="handleRemove(img.raw, index)"
> >
@ -148,6 +162,7 @@
:multiple="limit > 1 && $attrs.multiple" :multiple="limit > 1 && $attrs.multiple"
:accept="$attrs.accept" :accept="$attrs.accept"
id="uploadinput" id="uploadinput"
:disabled="disabled"
@change="onUpdate" @change="onUpdate"
ref="fileinputref" ref="fileinputref"
/> />
@ -185,7 +200,10 @@ export default {
type: Number, type: Number,
default: 1, default: 1,
}, },
disabled: {
type: Boolean,
default: false,
},
fileList: { fileList: {
type: Array, type: Array,
default() { default() {
@ -279,6 +297,9 @@ export default {
}, },
methods: { methods: {
handleRemove(file, index) { handleRemove(file, index) {
if (this.disabled) {
return;
}
this.imageList = this.imageList.filter((item, inkey) => { this.imageList = this.imageList.filter((item, inkey) => {
return inkey !== index; return inkey !== index;
}); });
@ -291,6 +312,9 @@ export default {
} }
}, },
onUpdate(e) { onUpdate(e) {
if (this.disabled) {
return;
}
if (this.limit <= this.imageList.length) { if (this.limit <= this.imageList.length) {
return; return;
} }
@ -301,6 +325,16 @@ export default {
const find = files.find((f, i) => { const find = files.find((f, i) => {
if (this.$attrs.accept) { if (this.$attrs.accept) {
let acceptarr = this.$attrs.accept.split(","); let acceptarr = this.$attrs.accept.split(",");
for (let i = 0; i < acceptarr.length; i++) {
let item = acceptarr[i];
if (item.includes("*")) {
if (!item.includes(f.type.split("/")[0])) {
if (this.$listeners.onError) {
this.$emit("onError", `其中第${i + 1}张文件类型错误`);
}
return true;
}
} else {
if (!acceptarr.includes(f.type)) { if (!acceptarr.includes(f.type)) {
if (this.$listeners.onError) { if (this.$listeners.onError) {
this.$emit("onError", `其中第${i + 1}张文件类型错误`); this.$emit("onError", `其中第${i + 1}张文件类型错误`);
@ -308,6 +342,8 @@ export default {
return true; return true;
} }
} }
}
}
if (this.$attrs.maxSize) { if (this.$attrs.maxSize) {
if (f.size > this.$attrs.maxSize) { if (f.size > this.$attrs.maxSize) {
if (this.$listeners.onError) { if (this.$listeners.onError) {
@ -325,7 +361,7 @@ export default {
} }
files.map((item, index) => { files.map((item, index) => {
if (item.type.indexOf("image") > -1) { if (item.type && item.type.indexOf("image") > -1) {
let filerender = new FileReader(); let filerender = new FileReader();
filerender.onload = function (e) { filerender.onload = function (e) {
if (that.$attrs.minWidth || that.$attrs.minHeight) { if (that.$attrs.minWidth || that.$attrs.minHeight) {
@ -360,8 +396,8 @@ export default {
msg: "", msg: "",
}); });
if (files.length == uplist.length) { if (files.length == uplist.length) {
this.$refs.fileinputref.value = "";
if (this.$listeners.onUpload) { if (this.$listeners.onUpload) {
this.fileList.push(...uplist);
this.$emit("onUpload", this.fileList, uplist); this.$emit("onUpload", this.fileList, uplist);
} else { } else {
this.imageList.push(...uplist); this.imageList.push(...uplist);
@ -410,14 +446,15 @@ export default {
} }
}); });
} catch (err) { } catch (err) {
console.log(err, "uploaderr");
if (this.$listeners.onError) { if (this.$listeners.onError) {
this.$emit("onError", e); this.$emit("onError", e);
} }
} }
}, },
onDragstart(e) { onDragstart(e) {
if (this.disabled) {
return;
}
this.sourceNode = e.target; this.sourceNode = e.target;
this.partNode = e.target.parentNode; this.partNode = e.target.parentNode;
e.target.classList.add("tabsbg"); e.target.classList.add("tabsbg");
@ -428,6 +465,9 @@ export default {
}, },
onDragenter(e) { onDragenter(e) {
e.preventDefault(); e.preventDefault();
if (this.disabled) {
return;
}
if (!this.dragmove) { if (!this.dragmove) {
return; return;
} }
@ -453,12 +493,18 @@ export default {
}, },
onDragover(e) { onDragover(e) {
e.preventDefault(); e.preventDefault();
if (this.disabled) {
return;
}
}, },
onMouseup(e) { onMouseup(e) {
e.preventDefault(); e.preventDefault();
if (!this.dragmove) { if (!this.dragmove) {
return; return;
} }
if (this.disabled) {
return;
}
if (this.partNode === e.target || e.target === this.sourceNode) { if (this.partNode === e.target || e.target === this.sourceNode) {
return; return;
} }
@ -469,6 +515,9 @@ export default {
if (!this.dragmove) { if (!this.dragmove) {
return; return;
} }
if (this.disabled) {
return;
}
e.target.classList.remove("moving"); e.target.classList.remove("moving");
e.target.classList.remove("tabsbg"); e.target.classList.remove("tabsbg");
this.sourceNode.classList.remove("moving"); this.sourceNode.classList.remove("moving");
@ -489,12 +538,18 @@ export default {
if (this.drap) { if (this.drap) {
return; return;
} }
if (this.disabled) {
return;
}
const files = event.dataTransfer.files; const files = event.dataTransfer.files;
this.onUpdate({ target: { files: files } }); this.onUpdate({ target: { files: files } });
}, },
onInputClick(e) { onInputClick(e) {
e.preventDefault(); // e.preventDefault(); //
e.stopPropagation(); // e.stopPropagation(); //
if (this.disabled) {
return;
}
this.$refs.fileinputref.click(); this.$refs.fileinputref.click();
}, },
}, },