Vue 封装导入弹框(el-drawer)模板
曹嘉许
1.封装子组件
<template>
<!-- 导入-->
<el-drawer
title=""
:visible.sync="importDrawer"
:direction="importDirection"
:wrapperClosable="importDrawerWarapper"
:destroy-on-close="destroyImport"
:size="size"
:before-close="importHandleClose"
:show-close="isShowCloseImport"
>
<div slot="title" class="header-title h30">
<p class="addStyle">
<span class="zebra font28-imp"></span>
{{titleDialog}}
</p>
</div>
<div class="demo-drawer__content">
<el-form
:model="importForm"
:label-width="importlabelWidth"
class="ml20"
:rules="importRules"
ref="importDom"
>
<el-form-item label="">
<span class="posRel" slot="label"
>上传
<i class="labelUnderline posAbs"></i>
</span>
<el-row>
<el-col :span="uploadWidth">
<el-upload
class="upload-demo"
action=""
:before-upload="handleBreakUpload"
:file-list="fileShowArray"
:http-request="uploadRequest"
:limit="1"
:on-remove="removeFile"
:on-exceed="handleExceed"
>
<el-button type="primary">选择文件</el-button>
<span
slot="tip"
@click="downloadFile"
class="el-upload__tip ml140 font14 cup"
style="color:#00c292;font-size:14px;"
>
<i class="zebra"></i> 下载模板
</span>
</el-upload></el-col
></el-row
>
<div class="el-form-item__error" v-if="fileWarning">
{{ fileWarningTxt }}
</div>
</el-form-item>
</el-form>
<div class="demo-drawer__footer ml70">
<el-button
type="primary"
@click="importHanndle('importDom')"
class="ml20"
:loading="importLoading"
>{{ importLoading ? "提交中 ..." : "提 交" }}</el-button
>
</div>
</div>
</el-drawer>
</template>
<script>
export default {
props: {
// 弹框标题
titileDialog:{
type:String,
default:"导入" //在这儿写的是默认导入
}
// 弹框大小
size: {
type: String,
default: "50%"
},
// 加载loading
importLoading: {
type: Boolean,
default: false
},
// 导入弹框开关
importDrawer: {
type: Boolean,
default: false
},
// 导入弹框 Drawer 打开的方向
importDirection: {
type: String,
default: "right"
},
// 导入弹框 点击遮罩层是否可以关闭 Drawer
importDrawerWarapper: {
type: Boolean,
default: false
},
// 导入弹框 控制是否在关闭 Drawer 之后将子元素全部销毁
destroyImport: {
type: Boolean,
default: false
},
// 导入弹框 是否显示关闭按钮
isShowCloseImport: {
type: Boolean,
default: true
}
},
data() {
return {
importlabelWidth: "50px", //表单label宽度
// 导入弹框绑定的表单值
importForm: {
imporType: "",
maninFile: [] //文件
},
// 导入弹框/*表单验证规则*/
importRules: {
imporType: [
{
required: true,
message: "请选择",
trigger: "change"
}
]
},
//导入 上传文件数据
fileShowArray: [],
fileShowArrayAppase: [],
// 上传文件宽度
uploadWidth: 50,
// 上传文件验证是否为xls或xlsx格式开关
fileWarning: false,
// 上传文件验证是否为xls或xlsx格式 提示语
fileWarningTxt: ""
};
},
methods: {
// 下载模板
downloadFile() {
this.$emit("download");
},
uploadRequest() {},
// 导入弹框 关闭事件
importHandleClose() {
this.$emit("importHandleClose");
},
// 上传文件之前的钩子
handleBreakUpload(file) {
this.fileWarningTxt = "";
this.fileWarning = false;
this.importForm.maninFile = [file];
if (
file.type !== "application/vnd.ms-excel" &&
file.type !==
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
) {
this.fileWarningTxt = "文件只支持xls或xlsx格式";
this.fileWarning = true;
return;
}
},
// 删除文件
removeFile(file, fileList) {
this.fileShowArray.splice(0);
this.importForm.maninFile.splice(0);
},
// 文件超出个数限制时的钩子
handleExceed(files, fileList) {
this.fileWarningTxt = "";
this.fileWarning = false;
this.importForm.maninFile = [files[0]];
this.fileShowArray.splice(0);
this.fileShowArray = [
{ name: files[0].name, url: files[0].size, type: files[0].type }
];
if (
files[0].type !== "application/vnd.ms-excel" &&
files[0].type !==
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
) {
this.fileWarningTxt = "文件只支持xls或xlsx格式";
this.fileWarning = true;
}
},
submitImportHandle() {
let fd = new FormData();
fd.append("file", this.importForm.maninFile[0]);
this.$emit("sumbitHandle", fd, this.importForm, this.fileShowArray);
// fd 当前文件流
// this.importForm 表单
// this.fileShowArray 存放文件数据集合
},
//导入弹框提交事件
importHanndle(formName) {
this.$refs[formName].validate((valid) => {
if (valid) {
this.hanndleSubmitImportCase();
this.submitImportHandle();
} else {
if (this.importForm.maninFile.length == 0) {
this.fileWarningTxt = "请上传文件";
this.fileWarning = true;
}
return false;
}
});
},
// 上传文件 验证有无文件
hanndleSubmitImportCase() {
if (this.importForm.maninFile.length == 0) {
this.fileWarningTxt = "请上传文件";
this.fileWarning = true;
return;
}
if (
this.importForm.maninFile[0].type !==
"application/vnd.ms-excel" &&
this.importForm.maninFile[0].type !==
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet"
) {
return;
}
this.fileWarningTxt = "";
this.fileWarning = false;
}
}
};
</script>
2.父组件使用子组件
2-1 引入封装好的子组件 及注册
import importCommon from "./importCommon.vue";
components: { importCommon }
2-2 使用
<importCommon
:titileDialog="dialogTitle"
:importDrawer="dialogImport"
:importDirection="dialogDirection"
:size="dialogSize"
:importDrawerWarapper="dialogWrapper"
:destroyImport="dialogDestory"
:isShowCloseImport="dialogIsShow"
@download="downloadHandle"
:importLoading="dialogLoading"
@sumbitHandle="sumbitHandle"
@importHandleClose="importHandleClose"
/>
data中写 // 封装导入模板
dialogTitle:'导入',
dialogLoading: false, // 提交的loading
dialogIsShow: true, // 导入弹框 是否显示关闭按钮
dialogWrapper: false, // 导入弹框 点击遮罩层是否可以关闭 Drawer
dialogSize: "50%", // 导入弹框大小
dialogDirection: "rtl", // 导入弹框 Drawer 打开的方向
dialogImport: false, // 导入弹框开关
dialogDestory: false, // 导入弹框控制是否在关闭Drawer 之后将子元素全部销毁
methods // 下载模板
downloadHandle() {
window.location.href = "/static/导入模板.xlsx";
},
// 弹出关闭
importHandleClose() {
this.dialogImport = false;
},
//提交方法
sumbitHandle(fd, dialogform, fileArray) {
console.log(fd, dialogform, fileArray, "fd, dialogform, fileArray");
//这里写请求接口
//再请求接口成功后 需要把上一次的文件清掉
fileArray.splice(0);
dialogform.maninFile.splice(0);
},
类似资料：