qiaopengfei
/
ag-element-ui
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

22

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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
package.json
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",

600
packages/agForm/src/index.vue
View File

@ -1,322 +1,322 @@
<template> <template>
<el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref"> <el-form v-bind="$attrs" v-on="$listeners" :model="formValue" ref="formref">
<ag-row> <ag-row>
<ag-col v-for="(item, index) in data" :key="index" :span="item.span || 24"> <ag-col v-for="(item, index) in data" :key="index" :span="item.span || 24">
<el-form-item v-bind="item" :prop="item.enName"> <el-form-item v-bind="item" :prop="item.enName">
<slot :name="item.soltName" v-if="item.soltName" :row="item" /> <slot :name="item.soltName" v-if="item.soltName" :row="item" />
<div class="contentbox" v-else> <div class="contentbox" v-else>
<ag-input <ag-input
v-model="formValue[item.enName]" v-model="formValue[item.enName]"
type="textarea" type="textarea"
v-bind="item" v-bind="item"
v-if="item.type == 'ag-textarea'" v-if="item.type == 'ag-textarea'"
size="small" size="small"
clearable clearable
></ag-input> ></ag-input>
<ag-input <ag-input
v-model="formValue[item.enName]" v-model="formValue[item.enName]"
v-bind="item" v-bind="item"
v-if="item.type == 'ag-input'" v-if="item.type == 'ag-input'"
size="small" size="small"
clearable clearable
></ag-input> ></ag-input>
<ag-date-picker <ag-date-picker
v-bind="item" v-bind="item"
v-model="formValue[item.enName]" v-model="formValue[item.enName]"
v-if="item.type == 'ag-date-picker'" v-if="item.type == 'ag-date-picker'"
size="small" size="small"
clearable clearable
/> />
<ag-select <ag-select
v-model="formValue[item.enName]" v-model="formValue[item.enName]"
v-bind="item" v-bind="item"
v-if="item.type == 'ag-select'" v-if="item.type == 'ag-select'"
size="small" size="small"
clearable clearable
/> />
<el-radio-group <el-radio-group
v-model="formValue[item.enName]" v-model="formValue[item.enName]"
v-bind="item" v-bind="item"
v-if="item.type == 'ag-radio' && formValue[item.enName]" v-if="item.type == 'ag-radio' && formValue[item.enName]"
size="small" size="small"
clearable clearable
>
<el-radio
:label="it.value"
v-for="(it, index) in item.options"
:key="index"
>{{ it.label }}</el-radio
> >
<el-radio </el-radio-group>
:label="it.value" <el-checkbox-group
v-for="(it, index) in item.options" v-bind="item"
:key="index" v-if="item.type == 'ag-checkbox' && formValue[item.enName]"
>{{ it.label }}</el-radio v-model="formValue[item.enName]"
> size="small"
</el-radio-group> clearable
<el-checkbox-group >
v-bind="item" <el-checkbox
v-if="item.type == 'ag-checkbox' && formValue[item.enName]" v-for="(it, index) in item.options"
v-model="formValue[item.enName]" :label="it.value"
size="small" :key="index"
clearable >{{ it.label }}</el-checkbox
> >
<el-checkbox </el-checkbox-group>
v-for="(it, index) in item.options" <el-input-number
:label="it.value" v-model="formValue[item.enName]"
:key="index" v-bind="item"
>{{ it.label }}</el-checkbox v-if="item.type == 'ag-input-number'"
> clearable
</el-checkbox-group> ></el-input-number>
<el-input-number <el-cascader
v-model="formValue[item.enName]" v-model="formValue[item.enName]"
v-bind="item" v-bind="item"
v-if="item.type == 'ag-input-number'" size="small"
clearable v-if="item.type == 'ag-cascader'"
></el-input-number> clearable
<el-cascader :style="{ width: '100%' }"
v-model="formValue[item.enName]" ></el-cascader>
v-bind="item" <el-switch
size="small" v-model="formValue[item.enName]"
v-if="item.type == 'ag-cascader'" v-bind="item"
clearable size="small"
:style="{ width: '100%' }" v-if="item.type == 'ag-switch' && formValue[item.enName]"
></el-cascader> >
<el-switch </el-switch>
v-model="formValue[item.enName]" <el-slider
v-bind="item" v-model="formValue[item.enName]"
size="small" v-bind="item"
v-if="item.type == 'ag-switch' && formValue[item.enName]" size="small"
> v-if="item.type == 'ag-slider'"
</el-switch> ></el-slider>
<el-slider <el-time-select
v-model="formValue[item.enName]" :style="{ width: '100%' }"
v-bind="item" clearable
size="small" v-model="formValue[item.enName]"
v-if="item.type == 'ag-slider'" v-bind="item"
></el-slider> size="small"
<el-time-select v-if="item.type == 'ag-time-select'"
:style="{ width: '100%' }" :picker-options="item.options"
clearable >
v-model="formValue[item.enName]" </el-time-select>
v-bind="item" <ag-upload
size="small" v-bind="item"
v-if="item.type == 'ag-time-select'" v-model="formValue[item.enName]"
:picker-options="item.options" v-if="item.type == 'ag-upload'"
> @onError="$listeners.onError"
</el-time-select> clear
<ag-upload isPre
v-bind="item" @onUpload="item.onUpload"
v-model="formValue[item.enName]" ></ag-upload>
v-if="item.type == 'ag-upload'" <el-rate
@onError="$listeners.onError" v-bind="item"
clear v-model="formValue[item.enName]"
isPre v-if="item.type == 'ag-rate'"
></ag-upload> size="small"
<el-rate ></el-rate>
v-bind="item" <agColorPicker
v-model="formValue[item.enName]" v-bind="item"
v-if="item.type == 'ag-rate'" v-model="formValue[item.enName]"
size="small" v-if="item.type == 'ag-color-picker'"
></el-rate> size="small"
<agColorPicker >
v-bind="item" </agColorPicker>
v-model="formValue[item.enName]" <el-transfer
v-if="item.type == 'ag-color-picker'" :data="item.data"
size="small" v-bind="item"
> v-model="formValue[item.enName]"
</agColorPicker> v-if="item.type == 'ag-transfer'"
<el-transfer size="small"
:data="item.data" ></el-transfer>
v-bind="item" <agNumberRange
v-model="formValue[item.enName]" v-bind="item"
v-if="item.type == 'ag-transfer'" v-model="formValue[item.enName]"
size="small" v-if="item.type == 'ag-numberRange'"
></el-transfer> size="small"
<agNumberRange clearable
v-bind="item" />
v-model="formValue[item.enName]" <ag-multion-input
v-if="item.type == 'ag-numberRange'" v-bind="item"
size="small" v-model="formValue[item.enName]"
clearable v-if="item.type == 'ag-multion-input'"
/> size="small"
<ag-multion-input clearable
v-bind="item" />
v-model="formValue[item.enName]" <agQuery
v-if="item.type == 'ag-multion-input'" v-bind="item"
size="small" v-model="formValue[item.enName]"
clearable v-if="item.type == 'ag-query'"
/> size="small"
<agQuery clearable
v-bind="item" />
v-model="formValue[item.enName]" <ag-mution-checkbox
v-if="item.type == 'ag-query'" :datas="item.datas"
size="small" v-bind="item"
clearable :placeholder="item.placeholder"
/> v-model="formValue[item.enName]"
<ag-mution-checkbox v-if="item.type == 'ag-mution-checkbox'"
:datas="item.datas" size="small"
v-bind="item" >
:placeholder="item.placeholder" </ag-mution-checkbox>
v-model="formValue[item.enName]" <ag-multion-date-picker
v-if="item.type == 'ag-mution-checkbox'" v-bind="item"
size="small" v-model="formValue[item.enName]"
> v-if="item.type == 'ag-multion-datte-picker'"
</ag-mution-checkbox> size="small"
<ag-multion-date-picker />
v-bind="item" </div>
v-model="formValue[item.enName]" <div v-if="item.tip" class="tipbox">
v-if="item.type == 'ag-multion-datte-picker'" <slot name="tip" :row="item"> {{ item.tip }}</slot>
size="small" </div>
/> </el-form-item>
</div> </ag-col>
<div v-if="item.tip" class="tipbox"> </ag-row>
<slot name="tip" :row="item"> {{ item.tip }}</slot> <div class="footerbox" v-if="$listeners.onSubmit">
</div> <slot name="button" :value="formValue">
</el-form-item> <el-button @click="onSubmit" type="primary" size="small" class="submitbtn">
</ag-col> {{ submittitle || "提交" }}
</ag-row> </el-button>
<div class="footerbox" v-if="$listeners.onSubmit"> </slot>
<slot name="button" :value="formValue"> </div>
<el-button @click="onSubmit" type="primary" size="small" class="submitbtn"> </el-form>
{{ submittitle || "提交" }} </template>
</el-button> <script>
</slot> import agInput from "./../../agInput/src/index.vue";
</div> import agDatePicker from "./../../agDatePicker/src/index.vue";
</el-form> import agSelect from "./../../agSelect/src/index.vue";
</template> import agRow from "./../../agRow/src/index.vue";
<script> import agCol from "./../../agCol/src/index.vue";
import agInput from "./../../agInput/src/index.vue"; import agUpload from "./../../agUpload/src/index.vue";
import agDatePicker from "./../../agDatePicker/src/index.vue"; import agColorPicker from "./../../agColorPicker/src/index.vue";
import agSelect from "./../../agSelect/src/index.vue"; import agNumberRange from "./../../agNumberRange/src/index.vue";
import agRow from "./../../agRow/src/index.vue"; import agMultionInput from "./../../agMultionInput/src/index.vue";
import agCol from "./../../agCol/src/index.vue"; import agQuery from "./../../agQuery/src/index.vue";
import agUpload from "./../../agUpload/src/index.vue"; import agMultionDatePicker from "../../agMultionDatePicker";
import agColorPicker from "./../../agColorPicker/src/index.vue";
import agNumberRange from "./../../agNumberRange/src/index.vue"; export default {
import agMultionInput from "./../../agMultionInput/src/index.vue"; name: "agForm",
import agQuery from "./../../agQuery/src/index.vue"; components: {
import agMultionDatePicker from "../../agMultionDatePicker"; agMultionDatePicker,
agInput: agInput,
export default { agDatePicker,
name: "agForm", agSelect,
components: { agRow,
agMultionDatePicker, agCol,
agInput: agInput, agUpload: agUpload,
agDatePicker, agColorPicker,
agSelect, agNumberRange,
agRow, agMultionInput,
agCol, agQuery,
agUpload: agUpload, },
agColorPicker, props: {
agNumberRange, submittitle: {
agMultionInput, type: String,
agQuery, default: "提交",
}, },
props: { data: {
submittitle: { type: Array,
type: String, default() {
default: "提交", return [];
},
data: {
type: Array,
default() {
return [];
},
},
span: {
type: Number,
default: 24,
}, },
}, },
data() { span: {
return { type: Number,
formValue: {}, 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(() => { setTimeout(() => {
this.$refs.formref.clearValidate(); this.$refs.formref.clearValidate();
}, 1); }, 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) { methods: {
this.formValue = val; onSubmit() {
setTimeout(() => { this.$emit("onSubmit", this.formValue);
this.$refs.formref.clearValidate();
}, 1);
},
}, },
methods: { },
onSubmit() { };
this.$emit("onSubmit", this.formValue); </script>
},
}, <style lang="scss" scoped>
}; .footerbox {
</script> margin-top: 12px;
display: flex;
<style lang="scss" scoped> justify-content: center;
.footerbox { .submitbtn {
margin-top: 12px; width: 200px;
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--inline {
.el-form-item { .el-form-item {
display: flex; display: flex;
} }
.el-form-item__content { .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; display: flex;
flex: 1;
width: 100%;
flex-wrap: wrap; flex-wrap: wrap;
width: 100%; margin-left: 0;
margin-left: 0 !important;
}
.el-radio-button__inner,
.el-radio-group {
display: flex;
align-items: center;
} }
} }
</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>

85
packages/agSelect/src/index.vue
View File

@ -1,21 +1,20 @@
<template> <template>
<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" v-on="$listeners"
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
<el-option v-for="(item, index) in options"
v-for="item in options" :key="index"
:key="item.value" :label="item.label"
:label="item.label" :value="item.value"
:value="item.value" ></el-option>
></el-option> </el-select>
</el-select>
</template> </template>
<script> <script>
@ -24,56 +23,36 @@ export default {
props: { props: {
width: { width: {
type: Number, type: Number,
default:0, default: 0,
}, },
options: { options: {
type: Array, type: Array,
default: () => { default: () => {
return []; return [];
}, },
},
value:{
default: () =>'',
}
},
data() {
return {
selectValue:""
};
},
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: {
data() {
return {};
},
mounted() {
if (this.$refs.apselectref) {
for (const key in this.$refs.apselectref) {
if (!this[key] && key != "value") {
this[key] = this.$refs.apselectref[key];
}
}
}
}, },
}; };
</script> </script>
<style lang="scss" scoped> <style lang="scss" scoped>
::v-deep { ::v-deep {
.ag_select{ .ag_select {
min-width: 90px; min-width: 90px;
width:100%; width: 100%;
} }
.el-input__icon { .el-input__icon {
font-size: 16px !important; font-size: 16px !important;

85
packages/agUpload/src/index.vue
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,11 +325,23 @@ 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(",");
if (!acceptarr.includes(f.type)) { for (let i = 0; i < acceptarr.length; i++) {
if (this.$listeners.onError) { let item = acceptarr[i];
this.$emit("onError", `其中第${i + 1}张文件类型错误`); 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) { if (this.$attrs.maxSize) {
@ -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();
}, },
}, },