输入json 达到预览效果

下载  npm i vue-json-pretty@2.4.0

<template><div class="newBranchesDialog"><t-base-dialogv-if="addDialogShow"title="Json数据配置"@closeDialog="closeDialog":dialogVisible="addDialogShow":center="false"@handleSubmit="handleSubmit"width="70%"><div><el-row class="width100 fixHeight200 overflowYAuto" :gutter="10"><el-col :span="jsonStr ? 10 : 24"><el-inputv-model="jsonStr":rows="26"type="textarea"placeholder="请输入配置Json"/></el-col><el-col :span="2" v-if="jsonStr"><div class="height100 flexCenter"><el-icon class="fontSize28"><Right /></el-icon></div></el-col><el-col :span="12" v-if="jsonStr"><vue-json-pretty:virtual="true":deep="3":height="600":show-icon="true":editable="false":highlightMouseoverNode="true":show-line-number="true"v-model="jsonStr":data="isValidJSON(jsonStr) ? JSON.parse(jsonStr) : {}"@update:data="updateData($event)"></vue-json-pretty></el-col></el-row></div></t-base-dialog></div>
</template>
<script setup>
import TBaseDialog from "@/components/base-dialog/index.vue";
import TForm from "@/components/form/index.vue";
import { ref, reactive, onMounted, getCurrentInstance } from "vue";
import { ElMessage } from "element-plus";
import VueJsonPretty from "vue-json-pretty";
import "vue-json-pretty/lib/styles.css";// 初始化值
const addDialogShow = ref(false);
const { proxy } = getCurrentInstance();
const loading = ref(false);
const jsonStr = ref('');
const isValidJSON = (str) => {try {JSON.parse(str);return true;} catch (e) {return false;}
};
//*编辑json内容
const updateData = (data) => {jsonStr.value = JSON.stringify(data);
};// 打开弹框
const showDialog = (data) => {addDialogShow.value = true;
};
// 关闭弹框
const closeDialog = () => {addDialogShow.value = false;
};// 提交按钮
const handleSubmit = async () => {closeDialog();proxy.$parent.carryInData(JSON.parse(jsonStr.value));
};// 暴露方法
defineExpose({ showDialog });
</script>