输入json 达到预览效果

embedded/2024/11/29 18:42:57/

下载  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>


http://www.ppmy.cn/embedded/141545.html

相关文章

Realtek网卡MAC刷新工具PG8168.exe Version:2.34.0.4使用说明

本刷新工具虽然文件名叫PG8168.EXE&#xff0c;但不是只有RTL8168可用&#xff0c;是这一个系列的产品都可以使用。实验证明RTL8111也可以使用。 用法&#xff1a; PG8168 [/h][/?][/b][/c HexOffsetHexValue][/d NICNumber][/l][/r][/w][/v] [/# NICNumber] [/nodeidHexNOD…

【网络-交换机】生成树协议、环路检测

路由优先级 路由优先级决定了在多种可达的路由类型中&#xff0c;哪种路由将被用来转发数据包。路由优先级值越低&#xff0c;对应路由的优先级越高&#xff0c;优先级值255表示对应的路由不可达。一般情况下&#xff0c;静态路由的优先级为1&#xff0c;OSPF路由优先级为110&a…

Qt | 开发技能提升档次哈

点击上方"蓝字"关注我们 01、Creator常用快捷键 >>> F1 查看帮助 F2 跳转到函数定义 Shift+F2 声明和定义之间切换 F3 查找下一个 F4 头文件和源文件之间切换 Ctrl+1 欢迎模式 Ctrl+2 编辑模…

DRM(数字权限管理技术)防截屏录屏----视频转hls流加密、web解密播放

提示&#xff1a;视频转hls流加密、web解密播放 需求&#xff1a;研究视频截屏时&#xff0c;播放器变黑&#xff0c;所以先研究的视频转hls流加密 文章目录 [TOC](文章目录) 前言一、工具ffmpeg、openssl二、后端nodeexpress三、web播放四、文档总结 前言 ‌HLS流媒体协议‌&a…

结构体,枚举,联合知识点笔记总结

结构体&#xff1a; 1.之前我们知道&#xff0c;数组&#xff1a;一些值的结合&#xff0c;类型是相同的 结构&#xff1a;是一些值的集合&#xff0c;这些值称为成员变量。结构的每个成员可以是不同类型的变量 struct s {int a; --|-->结构体成员int b; --}; 注意…

架构第十一章:zabbix

监控体系 1.监控知识概述 &#xff08;1&#xff09;对系统不间断的实时监控 &#xff08;2&#xff09;实时反馈系统和服务状态 &#xff08;3&#xff09;保证系统和服务可靠、安全 &#xff08;4&#xff09;保证业务持续稳定运行 实时 反馈 可靠 安全 2.怎么进行监控&…

HarmonyOS应用开发中的页面路由与数据传输

概述 在鸿蒙生态系统的开发进程中&#xff0c;“一次开发&#xff0c;多端部署”的设计理念值得推荐。此外&#xff0c;采用三层工程结构来设计APP的各个模块也是很不错的选择。关于三层工程结构的详细内容可查看以下链接&#xff1a; HarmonyOS一次开发多端部署三巨头之界面…

【C#】lambda , lambda 表达式语法

Lambda 表达式是 C# 中一种非常简洁且强大的语法结构&#xff0c;它允许你定义匿名方法。简而言之&#xff0c;Lambda 表达式可以看作是一个简化的匿名方法或者匿名函数。 Lambda 表达式基础 Lambda 表达式的语法可以用于定义函数、委托、事件等&#xff0c;并且通常比传统的…