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",
|
||||
|
|
|
|||
|
|
@ -1,322 +1,322 @@
|
|||
<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">
|
||||
<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-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">
|
||||
<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
|
||||
>
|
||||
<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-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
|
||||
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-switch
|
||||
v-model="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-time-select
|
||||
:style="{ width: '100%' }"
|
||||
clearable
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item"
|
||||
size="small"
|
||||
v-if="item.type == 'ag-time-select'"
|
||||
:picker-options="item.options"
|
||||
>
|
||||
</el-time-select>
|
||||
<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"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.tip" class="tipbox">
|
||||
<slot name="tip" :row="item"> {{ item.tip }}</slot>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</ag-col>
|
||||
</ag-row>
|
||||
<div class="footerbox" v-if="$listeners.onSubmit">
|
||||
<slot name="button" :value="formValue">
|
||||
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
|
||||
{{ 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";
|
||||
</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-switch
|
||||
v-model="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-time-select
|
||||
:style="{ width: '100%' }"
|
||||
clearable
|
||||
v-model="formValue[item.enName]"
|
||||
v-bind="item"
|
||||
size="small"
|
||||
v-if="item.type == 'ag-time-select'"
|
||||
:picker-options="item.options"
|
||||
>
|
||||
</el-time-select>
|
||||
<ag-upload
|
||||
v-bind="item"
|
||||
v-model="formValue[item.enName]"
|
||||
v-if="item.type == 'ag-upload'"
|
||||
@onError="$listeners.onError"
|
||||
clear
|
||||
isPre
|
||||
@onUpload="item.onUpload"
|
||||
></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"
|
||||
/>
|
||||
</div>
|
||||
<div v-if="item.tip" class="tipbox">
|
||||
<slot name="tip" :row="item"> {{ item.tip }}</slot>
|
||||
</div>
|
||||
</el-form-item>
|
||||
</ag-col>
|
||||
</ag-row>
|
||||
<div class="footerbox" v-if="$listeners.onSubmit">
|
||||
<slot name="button" :value="formValue">
|
||||
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
|
||||
{{ 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";
|
||||
|
||||
export default {
|
||||
name: "agForm",
|
||||
components: {
|
||||
agMultionDatePicker,
|
||||
agInput: agInput,
|
||||
agDatePicker,
|
||||
agSelect,
|
||||
agRow,
|
||||
agCol,
|
||||
agUpload: agUpload,
|
||||
agColorPicker,
|
||||
agNumberRange,
|
||||
agMultionInput,
|
||||
agQuery,
|
||||
export default {
|
||||
name: "agForm",
|
||||
components: {
|
||||
agMultionDatePicker,
|
||||
agInput: agInput,
|
||||
agDatePicker,
|
||||
agSelect,
|
||||
agRow,
|
||||
agCol,
|
||||
agUpload: agUpload,
|
||||
agColorPicker,
|
||||
agNumberRange,
|
||||
agMultionInput,
|
||||
agQuery,
|
||||
},
|
||||
props: {
|
||||
submittitle: {
|
||||
type: String,
|
||||
default: "提交",
|
||||
},
|
||||
props: {
|
||||
submittitle: {
|
||||
type: String,
|
||||
default: "提交",
|
||||
},
|
||||
data: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24,
|
||||
data: {
|
||||
type: Array,
|
||||
default() {
|
||||
return [];
|
||||
},
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formValue: {},
|
||||
};
|
||||
span: {
|
||||
type: Number,
|
||||
default: 24,
|
||||
},
|
||||
mounted() {
|
||||
this.formValue = this.$attrs.value;
|
||||
},
|
||||
data() {
|
||||
return {
|
||||
formValue: {},
|
||||
};
|
||||
},
|
||||
mounted() {
|
||||
this.formValue = this.$attrs.value;
|
||||
setTimeout(() => {
|
||||
this.$refs.formref.clearValidate();
|
||||
}, 1);
|
||||
if (this.$refs.formref) {
|
||||
for (const key in this.$refs.formref) {
|
||||
if (!this[key] && key != "value") {
|
||||
this[key] = this.$refs.formref[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.formValue = val;
|
||||
setTimeout(() => {
|
||||
this.$refs.formref.clearValidate();
|
||||
}, 1);
|
||||
if (this.$refs.formref) {
|
||||
for (const key in this.$refs.formref) {
|
||||
if (!this[key] && key != "value") {
|
||||
this[key] = this.$refs.formref[key];
|
||||
}
|
||||
}
|
||||
}
|
||||
},
|
||||
watch: {
|
||||
value(val) {
|
||||
this.formValue = val;
|
||||
setTimeout(() => {
|
||||
this.$refs.formref.clearValidate();
|
||||
}, 1);
|
||||
},
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$emit("onSubmit", this.formValue);
|
||||
},
|
||||
methods: {
|
||||
onSubmit() {
|
||||
this.$emit("onSubmit", this.formValue);
|
||||
},
|
||||
},
|
||||
};
|
||||
</script>
|
||||
},
|
||||
};
|
||||
</script>
|
||||
|
||||
<style lang="scss" scoped>
|
||||
.footerbox {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.submitbtn {
|
||||
width: 200px;
|
||||
}
|
||||
<style lang="scss" scoped>
|
||||
.footerbox {
|
||||
margin-top: 12px;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
.submitbtn {
|
||||
width: 200px;
|
||||
}
|
||||
}
|
||||
.el-form--inline {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
}
|
||||
.el-form-item__content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.contentbox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.tipbox {
|
||||
width: 100%;
|
||||
color: red;
|
||||
}
|
||||
::v-deep {
|
||||
.el-form--inline {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
}
|
||||
.el-form-item__content {
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
.contentbox {
|
||||
width: 100%;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.flexcenter {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
.tipbox {
|
||||
width: 100%;
|
||||
color: red;
|
||||
}
|
||||
::v-deep {
|
||||
.el-form--inline {
|
||||
.el-form-item {
|
||||
display: flex;
|
||||
}
|
||||
.el-form-item__content {
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.el-form-item__content {
|
||||
flex: 1;
|
||||
display: flex;
|
||||
flex: 1;
|
||||
width: 100%;
|
||||
flex-wrap: wrap;
|
||||
width: 100%;
|
||||
margin-left: 0 !important;
|
||||
}
|
||||
.el-radio-button__inner,
|
||||
.el-radio-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
|
||||
.el-form-item {
|
||||
width: 100%;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.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>
|
||||
|
|
|
|||
|
|
@ -1,21 +1,20 @@
|
|||
<template>
|
||||
<el-select
|
||||
class="ag_select"
|
||||
:style="{ width: `100%` }"
|
||||
:value="selectValue"
|
||||
ref="apselectref"
|
||||
:size="$attrs.size||'small'"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot v-for="(_,name) in $slots" :name="name" :slot="name"> </slot>
|
||||
<el-option
|
||||
v-for="item in options"
|
||||
:key="item.value"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</el-select>
|
||||
class="ag_select"
|
||||
:style="{ width: `100%` }"
|
||||
ref="apselectref"
|
||||
:size="$attrs.size || 'small'"
|
||||
v-bind="$attrs"
|
||||
v-on="$listeners"
|
||||
>
|
||||
<slot v-for="(_, name) in $slots" :name="name" :slot="name"> </slot>
|
||||
<el-option
|
||||
v-for="(item, index) in options"
|
||||
:key="index"
|
||||
:label="item.label"
|
||||
:value="item.value"
|
||||
></el-option>
|
||||
</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,11 +325,23 @@ export default {
|
|||
const find = files.find((f, i) => {
|
||||
if (this.$attrs.accept) {
|
||||
let acceptarr = this.$attrs.accept.split(",");
|
||||
if (!acceptarr.includes(f.type)) {
|
||||
if (this.$listeners.onError) {
|
||||
this.$emit("onError", `其中第${i + 1}张文件类型错误`);
|
||||
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}张文件类型错误`);
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
return true;
|
||||
}
|
||||
}
|
||||
if (this.$attrs.maxSize) {
|
||||
|
|
@ -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