This commit is contained in:
ln1778
parent
df94b0aa59
commit
e742aeae7b
|
|
@ -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",
|
||||
|
|
|
|||
|
|
@ -106,6 +106,7 @@
|
|||
@onError="$listeners.onError"
|
||||
clear
|
||||
isPre
|
||||
@onUpload="item.onUpload"
|
||||
></ag-upload>
|
||||
<el-rate
|
||||
v-bind="item"
|
||||
|
|
@ -178,21 +179,21 @@
|
|||
</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";
|
||||
</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";
|
||||
|
||||
export default {
|
||||
export default {
|
||||
name: "agForm",
|
||||
components: {
|
||||
agMultionDatePicker,
|
||||
|
|
@ -254,19 +255,19 @@
|
|||
this.$emit("onSubmit", this.formValue);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footerbox {
|
||||
<style lang="scss" scoped>
|
||||
.footerbox {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.submitbtn {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.el-form--inline {
|
||||
}
|
||||
.el-form--inline {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
}
|
||||
|
|
@ -274,21 +275,21 @@
|
|||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.contentbox {
|
||||
}
|
||||
.contentbox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.flexcenter {
|
||||
}
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.tipbox {
|
||||
}
|
||||
.tipbox {
|
||||
width: 100%;
|
||||
color: red;
|
||||
}
|
||||
::v-deep {
|
||||
}
|
||||
::v-deep {
|
||||
.el-form--inline {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
|
|
@ -317,6 +318,5 @@
|
|||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
|
|
@ -2,20 +2,19 @@
|
|||
<el-select
|
||||
class="ag_select"
|
||||
:style="{ width: `100%` }"
|
||||
:value="selectValue"
|
||||
ref="apselectref"
|
||||
:size="$attrs.size||'small'"
|
||||
:size="$attrs.size || 'small'"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot v-for="(_,name) in $slots" :name="name" :slot="name"> </slot>
|
||||
>
|
||||
<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>
|
||||
</el-select>
|
||||
</el-select>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
|
|
@ -24,7 +23,7 @@ export default {
|
|||
props: {
|
||||
width: {
|
||||
type: Number,
|
||||
default:0,
|
||||
default: 0,
|
||||
},
|
||||
options: {
|
||||
type: Array,
|
||||
|
|
@ -32,48 +31,28 @@ 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'){
|
||||
this[key]=this.$refs.apselectref[key];
|
||||
mounted() {
|
||||
if (this.$refs.apselectref) {
|
||||
for (const key in this.$refs.apselectref) {
|
||||
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>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
::v-deep {
|
||||
.ag_select{
|
||||
.ag_select {
|
||||
min-width: 90px;
|
||||
width:100%;
|
||||
width: 100%;
|
||||
}
|
||||
.el-input__icon {
|
||||
font-size: 16px !important;
|
||||
|
|
|
|||
|
|
@ -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();
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue