self-constructing_graph/src/dialogs/TextViewDialog.vue

<template>
    <el-dialog v-model="dialogVisible" style="width:1200px;height:600px;" :title="props.title">

        <template #header>
            <div class="dialog-header">
                <span class="dialog-title">{{ props.title }}</span>
            </div>
        </template>
        <div class="dialog-body">
            <pre>{{ props.content }}</pre>
        </div>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="dialogVisible = false">取消</el-button>
                <el-button type="primary" @click="dialogVisible = false">
                    确定
                </el-button>
            </div>
        </template>
    </el-dialog>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue'
const props = defineProps({
    title: { type: String, required: true, default: '文件内容' },
    content: { type: String, required: true, default: '文件内容' },
})
const emit = defineEmits(['update:modelValue'])
const dialogVisible = ref(false)

const showDialog = (visible: boolean = true) => {
    dialogVisible.value = visible
}
defineExpose({ showDialog })
</script>
<style scoped>
.dialog-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.dialog-body {
    width: 100%;
    height: 450px;
    /* 可以根据需要调整 */
    overflow-y: auto;
    /* 当内容超出时显示滚动条 */
    text-wrap: wrap;
    word-wrap: normal;
}

.dialog-footer {
    display: flex;
    justify-content: flex-end;
    /* 按钮靠右对齐 */
}
</style>