109 lines
2.3 KiB
Vue
109 lines
2.3 KiB
Vue
|
<template>
|
|||
|
|
<el-dialog
|
|||
|
|
:title="title"
|
|||
|
|
:visible.sync="dialogVisible"
|
|||
|
|
:width="width"
|
|||
|
|
:append-to-body="appendToBody"
|
|||
|
|
:close-on-click-modal="closeOnClickModal"
|
|||
|
|
@close="handleClose"
|
|||
|
|
class="import-result-dialog-wrapper"
|
|||
|
|
>
|
|||
|
|
<div class="import-result-content" v-html="content"></div>
|
|||
|
|
<div slot="footer" class="dialog-footer">
|
|||
|
|
<el-button type="primary" @click="handleClose">确 定</el-button>
|
|||
|
|
</div>
|
|||
|
|
</el-dialog>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "ImportResultDialog",
|
|||
|
|
props: {
|
|||
|
|
// 控制弹窗显示/隐藏
|
|||
|
|
visible: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
},
|
|||
|
|
// 弹窗标题
|
|||
|
|
title: {
|
|||
|
|
type: String,
|
|||
|
|
default: "导入结果"
|
|||
|
|
},
|
|||
|
|
// 导入结果内容（支持HTML）
|
|||
|
|
content: {
|
|||
|
|
type: String,
|
|||
|
|
default: ""
|
|||
|
|
},
|
|||
|
|
// 弹窗宽度
|
|||
|
|
width: {
|
|||
|
|
type: String,
|
|||
|
|
default: "700px"
|
|||
|
|
},
|
|||
|
|
// 是否插入到body元素上
|
|||
|
|
appendToBody: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: true
|
|||
|
|
},
|
|||
|
|
// 是否可以通过点击modal关闭
|
|||
|
|
closeOnClickModal: {
|
|||
|
|
type: Boolean,
|
|||
|
|
default: false
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
computed: {
|
|||
|
|
dialogVisible: {
|
|||
|
|
get() {
|
|||
|
|
return this.visible;
|
|||
|
|
},
|
|||
|
|
set(val) {
|
|||
|
|
this.$emit("update:visible", val);
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
handleClose() {
|
|||
|
|
this.dialogVisible = false;
|
|||
|
|
this.$emit("close");
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
/* 导入结果弹窗样式 */
|
|||
|
|
.import-result-dialog-wrapper .import-result-content {
|
|||
|
|
max-height: 60vh;
|
|||
|
|
overflow-y: auto;
|
|||
|
|
overflow-x: hidden;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
line-height: 1.8;
|
|||
|
|
font-size: 14px;
|
|||
|
|
color: #606266;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* 滚动条美化 - WebKit浏览器（Chrome/Safari/Edge） */
|
|||
|
|
.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar {
|
|||
|
|
width: 6px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-track {
|
|||
|
|
background: #f5f7fa;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-thumb {
|
|||
|
|
background: #c0c4cc;
|
|||
|
|
border-radius: 3px;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
.import-result-dialog-wrapper .import-result-content::-webkit-scrollbar-thumb:hover {
|
|||
|
|
background: #909399;
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
/* Firefox滚动条 */
|
|||
|
|
.import-result-dialog-wrapper .import-result-content {
|
|||
|
|
scrollbar-width: thin;
|
|||
|
|
scrollbar-color: #c0c4cc #f5f7fa;
|
|||
|
|
}
|
|||
|
|
</style>
|