输入json 达到预览效果

javascript 复制代码

下载  npm i vue-json-pretty@2.4.0

javascript 复制代码

<template>
  <div class="newBranchesDialog">
    <t-base-dialog
      v-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-input
              v-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>