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",
"version": "0.1.21",
"version": "0.1.22",
"main": "packages/index.js",
"scripts": {
"dev": "vue-cli-service serve",

View File

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

View File

@ -2,7 +2,6 @@
<el-select
class="ag_select"
:style="{ width: `100%` }"
:value="selectValue"
ref="apselectref"
:size="$attrs.size || 'small'"
v-bind="$attrs"
@ -10,8 +9,8 @@
>
<slot v-for="(_, name) in $slots" :name="name" :slot="name"> </slot>
<el-option
v-for="item in options"
:key="item.value"
v-for="(item, index) in options"
:key="index"
:label="item.label"
:value="item.value"
></el-option>
@ -32,40 +31,20 @@ export default {
return [];
},
},
value:{
default: () =>'',
}
},
data() {
return {
selectValue:""
};
return {};
},
mounted() {
if (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];
}
}
}
},
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>

View File

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