This commit is contained in:
parent
df94b0aa59
commit
e742aeae7b
|
@ -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",
|
||||||
|
|
|
@ -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>
|
||||||
|
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
@ -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();
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue