1、创建组件
这里我是写了一个文件上传组件
<template>
<el-dialog :title="title" :visible.sync="open" width="400px" :before-close="handleClose" append-to-body>
<el-upload ref="upload" :limit="1" accept=".xlsx, .xls" :headers="headers"
:action="baseApi + url + '?updateSupport=' + updateSupport" :disabled="isUploading"
:on-progress="handleFileUploadProgress" :on-success="handleFileSuccess" :auto-upload="false" drag>
<i class="el-icon-upload"></i>
<div class="el-upload__text">将文件拖到此处,或<em>点击上传</em></div>
<div class="el-upload__tip text-center" slot="tip">
<div class="el-upload__tip" slot="tip">
<el-checkbox v-model="updateSupport"> 是否更新已经存在的数据</el-checkbox>
</div>
<span>仅允许导入xls、xlsx格式文件。</span>
<el-link v-if="tempUrl" type="primary" :underline="false" style="font-size:12px;vertical-align: baseline;" @click="importTemplate">下载模板</el-link>
</div>
</el-upload>
<div slot="footer" class="dialog-footer">
<el-button type="primary" @click="submitFileForm">确 定</el-button>
<el-button @click="handleClose">取 消</el-button>
</div>
</el-dialog>
</template>
<script>
import { getToken } from "@/utils/auth";
export default {
props: {
url: {
type: String,
},
tempUrl: {
type: String,
},
title: {
type: String,
default: "数据导入"
},
open: {
type: Boolean,
default: false
},
// 是否更新已经存在的用户数据
updateSupport: {
type: Number,
default: 0
},
callback: Function
},
data() {
return {
loading: undefined,
baseApi: process.env.VUE_APP_BASE_API,
headers: { Authorization: "Bearer " + getToken() },
isUploading: false
}
},
methods: {
// 下载模板操作
importTemplate() {
this.download(this.$props.tempUrl, {
}, `${this.$props.title}模板_${new Date().getTime()}.xlsx`)
},
// 文件上传中处理
handleFileUploadProgress(event, file, fileList) {
this.isUploading = true;
this.loading = this.$loading({
lock: true,
text: 'Loading',
spinner: 'el-icon-loading',
background: 'rgba(0, 0, 0, 0.7)'
});
},
// 文件上传成功处理
handleFileSuccess(response) {
this.isUploading = false;
this.$refs.upload.clearFiles();
this.$alert("<div style='overflow: auto;overflow-x: hidden;max-height: 70vh;padding: 10px 20px 0;'>" + response.msg + "</div>", "导入结果", { dangerouslyUseHTMLString: true });
this.handleClose();
this.$props.callback && this.$props.callback();
},
// 提交上传文件
submitFileForm() {
this.$refs.upload.submit();
},
// 模态框关闭
handleClose() {
this.loading && this.loading.close();
this.$refs.upload.clearFiles();
this.$importModel.hide();
}
}
}
</script>
<style></style>
2、全局挂载
通过vue.use 挂载组件,然后在vue 原型上添加属性, 再通过调用属性方法传参的形式控制组件。
import ImportModel from './index.vue'
import { Message } from 'element-ui';
const ImportComponent = {
install(Vue) {
// 创建组件构造函数
const ImportInstance = Vue.extend(ImportModel);
let component;
const initInstance = () => {
component = new ImportInstance();
let mountDom = component.$mount().$el;
document.body.appendChild(mountDom);
}
// 全局挂载组件方法
Vue.prototype.$importModel = {
// 显示模态框
show(option) {
if(!option.url) return Message.error("上传地址必填!");
initInstance();
component.open = true;
Object.assign(component, option);
},
// 关闭模态框
hide() {
component.open = false;
let mountDom = component.$mount().$el;
document.body.removeChild(mountDom);
}
};
}
};
export default ImportComponent;
4、调用全局属性方法并传参
/**
* 导入操作
*/
handleImport() {
this.$importModel.show({
url: this.queryConfig.importUrl,
tempUrl: this.queryConfig.importTempUrl,
title: this.tableName || null,
callback: () => {
this.handleQuery();
}
})
},