-
data: JSON 数据。
-
collapsedNodeLength: 对象或数组的长度超过此阈值时会折叠
-
deep: json路径深度超过此值时会折叠
-
showLineNumber: 显示左侧行号
-
showIcon: 显示图标。
-
virtual: 使用虚拟滚动
-
height: 使用虚拟滚动时列表的高度
-
itemHeight: 使用虚拟滚动时节点的高度
-
editable：json 是否可以编辑
<template>
<div class="viewInvoiceDialog">
<t-base-dialog
v-if="dialogShow"
title="预览"
@closeDialog="closeDialog"
:dialogVisible="dialogShow"
:center="false"
:showSubmitButton="false"
:showCancelButton="false"
width="50%"
>
<div>
<vue-json-pretty
:deep="3"
:showSelectController="true"
:highlightMouseoverNode="true"
path="res"
:data="collection"
:height="700"
:virtual="true"
:show-icon="true"
:editable="false"
:show-line-number="true"
>
</vue-json-pretty>
</div>
</t-base-dialog>
</div>
</template>
<script setup>
import TBaseDialog from "@/components/base-dialog/index.vue";
import { ref, reactive } from "vue";
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";
/**
* 初始化值
*/
const dialogShow = ref(false);
const collection = ref(null);
// 打开弹框
const showDialog = (data) => {
collection.value = { ...data };
dialogShow.value = true;
};
//关闭弹框
const closeDialog = () => {
dialogShow.value = false;
};
// 暴露方法
defineExpose({ showDialog });
</script>
<style lang="scss" scoped>
:deep(.el-dialog) {
.el-dialog__footer {
border-top: none;
padding: 0;
}
}
</style>
