输入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>
相关文章:
输入json 达到预览效果
下载 npm i vue-json-pretty2.4.0 <template><div class"newBranchesDialog"><t-base-dialogv-if"addDialogShow"title"Json数据配置"closeDialog"closeDialog":dialogVisible"addDialogShow":center"…...
DataLoade类与list ,iterator ,yield的用法
1 问题 探索DataLoader的属性,方法 Vscode中图标含意 list 与 iterator 的区别,尤其yield的用法 2 方法 知乎搜索DataLoader的属性,方法 pytorch基础的dataloader类是 from torch.utils.data.dataloader import Dataloader 其主要的参数如下&…...
model_selection.train_test_split函数介绍
目录 model_selection.train_test_split函数实战 model_selection.train_test_split函数 model_selection.train_test_split 是 Scikit-Learn 中用于将数据集拆分为训练集和测试集的函数。这个函数非常有用,因为在机器学习中,我们通常需要将数据集分为训…...
Springboot 读取 resource 目录下的Excel文件并下载
代码示例: GetMapping("/download") public void download(HttpServletResponse response) {try {String filename "测试.xls";OutputStream outputStream response.getOutputStream();// 获取springboot resource 路径下的文件InputStream inputStream…...
SQL EXISTS 子句的深入解析
SQL EXISTS 子句的深入解析 引言 SQL(Structured Query Language)作为一种强大的数据库查询语言,广泛应用于各种数据库管理系统中。在SQL查询中,EXISTS子句是一种非常实用的工具,用于检查子查询中是否存在至少一行数…...
33.Java冒泡排序
冒泡排序: 一种排序的方式,对要进行排序的数据中相邻的数据进行两两比较,将较大的数据放在后面,依次对所有的数据进行操作,直至所有数据按要求完成排序. package Javase;import sun.security.util.ByteArrayTagOrder…...
Docker容器ping不通外网问题排查及解决
Docker容器ping不通外网问题排查及解决 解决方案在最下面,不看过程的可直接拉到最下面。 一台虚拟机里突然遇到docker容器一直访问外网失败,网上看到这个解决方案,这边记录一下。 首先需要明确docker的网桥模式,网桥工作在二层…...
JavaScript 库 number-precision 如何使用?
number-precision 是一个 JavaScript 库,主要用于处理 JavaScript 中的数字精度问题。它提供了一些方法,帮助你进行数字运算时保持精度,尤其是在涉及到浮点数运算时,它能够避免传统 JavaScript 中精度丢失的问题。 例如ÿ…...
faiss库中ivf-sq(ScalarQuantizer,标量量化)代码解读-2
文件ScalarQuantizer.h 主要介绍这里面的枚举以及一些函数内容:QuantizerType、RangeStat、ScalarQuantizer、train、compute_codes、decode、SQuantizer、FlatCodesDistanceComputer、get_distance_computer、select_InvertedListScanner QuantizerType 量化类型…...
性能测试工具Grafana、InfluxDB和Collectd的搭建
一、性能监控组成简介 1、监控能力分工:这个系统组合能够覆盖从数据采集、存储到可视化的整个监控流程。Collectd可以收集各种系统和应用的性能指标,InfluxDB提供高效的时序数据存储,而 Grafana 则将这些数据以直观的方式呈现出来。2,实时性能监控:对于需要实时了解系统状…...
【ruby on rails】dup、deep_dup、clone的区别
一、区别 dup 浅复制:dup 方法创建对象的浅复制。 不复制冻结状态:dup 不会复制对象的冻结状态。 不复制单例方法:dup 不会复制对象的单例方法。 deep_dup 深复制:deep_dup 方法创建对象的深复制,递归复制嵌套的对象。…...
原生微信小程序画表格
wxml部分: <view class"table__scroll__view"><view class"table__header"><view class"table__header__item" wx:for"{{TableHeadtitle}}" wx:key"index">{{item.title}}</view></…...
Python实现IP代理池
文章目录 Python实现IP代理池一、引言二、步骤一:获取代理IP1、第一步:爬取代理IP2、第二步:验证代理IP的有效性 三、步骤二:构建IP代理池四、使用示例1、完整的使用示例2、注意事项3、处理网络问题 五、总结 Python实现IP代理池 …...
互联网直播/点播EasyDSS视频推拉流平台视频点播有哪些技术特点?
在数字化时代,视频点播应用已经成为我们生活中不可或缺的一部分。监控技术与视频点播的结合正悄然改变着我们获取和享受媒体内容的方式。这一变革不仅体现在技术层面的进步,更深刻地影响了我们。 EasyDSS视频直播点播平台是一款高性能流媒体服务软件。E…...
32.4 prometheus存储磁盘数据结构和存储参数
本节重点介绍 : prometheus存储磁盘数据结构介绍 indexchunkshead chunksTombstoneswal prometheus对block进行定时压实 compactprometheus 查看支持的存储参数 prometheus存储示意图 内存和disk之间的纽带 wal WAL目录中包含了多个连续编号的且大小为128M的文件,…...
C7.【C++ Cont】范围for的使用和auto关键字
目录 1.知识回顾 2.范围for 格式 使用 运行结果 运行过程 范围for的本意 作用 注意 3.底层分析范围for的执行过程 反汇编代码 分析 4.auto关键字 格式 基本用法 在范围for中使用auto 1.知识回顾 for循环的使用参见25.【C语言】循环结构之for文章 2.范围for C…...
联通云服务器部署老项目tomcat记录
1.先在服务器上安装mysql和tomcat 2.tomcat修改端口 3.在联通云运控平台配置tomcat访问端口(相当于向外部提供可访问端口) 4.将tomcat项目放在服务器tomcat的webapps里面 5.在mysql里创建项目数据库,运行sql创建表和导入数据 6.在配置文…...
剪映自动批量替换视频、图片素材教程,视频批量复刻、混剪裂变等功能介绍
一、三种批量替换模式的区别 二、混剪裂变替换素材 三、分区混剪裂变替换素材 四、按组精确替换素材 五、绿色按钮教程 (一)如何附加音频和srt字幕 (二)如何替换固定文本的内容和样式 (三)如何附加…...
el-dialog中调用resetFields()方法重置表单报错
前言 在开发中,弹框和表单是两个常见的组件,它们通常一起使用以实现用户交互和数据输入。然而,当我们尝试在弹框中调用表单的 resetFields() 方法时,有时会遇到报错的情况。 一、用法错误 确保 this.$refs[ruleForm].resetFields…...
分布式系统接口,如何避免重复提交
分布式系统接口,如何避免重复提交 1、基于Token的幂等设计原理实现步骤技术选型 2、基于Token的幂等设计原理实现步骤适用场景 3、幂等性设计原理实现方式 4、分布式锁原理实现方式适用场景 5、请求去重原理实现方式 6.前端防护原理实现方式适用场景 7.延迟队列原理…...
基于RAG的智能客服系统实战:从架构设计到生产环境优化
最近在做一个智能客服系统的升级项目,之前用规则引擎维护起来太痛苦了,纯用大模型又贵又不准。经过一番折腾,最终用RAG(检索增强生成)技术搞定了,效果提升非常明显。今天就来分享一下从架构设计到上线优化的…...
生成式AI欺诈来袭,什么样的IP数据接口才能筑起防线?
某电商平台的风控系统发出预警:一个“新用户”正在批量下单高价商品,收货地址遍布全国,支付方式各不相同。但奇怪的是,这些订单的浏览行为、停留时间、点击轨迹几乎完全一致——这不是真人,而是生成式AI模拟的虚假用户…...
STM32F407实战:手把手教你搞定永磁同步电机FOC电流环(附示波器调试避坑指南)
STM32F407实战:永磁同步电机FOC电流环深度优化与示波器调试全攻略 在电机控制领域,永磁同步电机(PMSM)的磁场定向控制(FOC)一直是工程师们关注的焦点。而电流环作为FOC控制中最核心的环节,其性能直接影响整个系统的响应速度和稳定性。本文将基…...
MATLAB App Designer实战:如何用按钮优雅终止死循环(附完整代码)
MATLAB App Designer实战:用按钮优雅控制循环的5个关键技巧 在MATLAB App Designer开发中,循环控制是每个开发者都会遇到的经典问题。想象一下这样的场景:你精心设计的界面正在运行一个数据处理循环,突然发现参数设置有误…...
成本控制艺术:OpenClaw+百川2-13B量化版的Token节省技巧
成本控制艺术:OpenClaw百川2-13B量化版的Token节省技巧 1. 为什么需要关注Token消耗? 当我第一次在本地部署OpenClaw并接入百川2-13B量化版模型时,就被它强大的自动化能力震撼了。这个组合可以让我的电脑像真人一样处理各种任务——从整理文…...
Python实战:用Statsmodels搞定简单线性回归(附NO浓度预测案例)
Python实战:用Statsmodels搞定简单线性回归(附NO浓度预测案例) 在数据分析领域,线性回归是最基础却最实用的统计方法之一。无论你是市场分析师预测销售额,还是环境科学家研究污染物分布,掌握线性回归都能让…...
League-Toolkit:基于LCU API的英雄联盟智能辅助工具
League-Toolkit:基于LCU API的英雄联盟智能辅助工具 【免费下载链接】League-Toolkit 兴趣使然的、简单易用的英雄联盟工具集。支持战绩查询、自动秒选等功能。基于 LCU API。 项目地址: https://gitcode.com/gh_mirrors/le/League-Toolkit 在快节奏的MOBA游…...
像素幻梦快速上手指南:3步完成16-bit风格图像生成与内存流导出
像素幻梦快速上手指南:3步完成16-bit风格图像生成与内存流导出 1. 认识像素幻梦创意工坊 像素幻梦创意工坊(Pixel Dream Workshop)是一款基于FLUX.1-dev扩散模型构建的像素艺术生成工具。它采用明亮的16-bit像素风格界面设计,为…...
给视觉新手的保姆级教程:用Python+OpenCV玩转四步相移结构光(附代码)
零基础实战:用PythonOpenCV实现四步相移结构光三维重建 在计算机视觉领域,结构光三维重建技术因其高精度和非接触特性,被广泛应用于工业检测、逆向工程和医疗成像。对于刚接触这一领域的新手来说,最困扰的往往不是理解原理&#x…...
保姆级教程:在Win10上用Docker Desktop搞定Dify,再接入本地DeepSeek模型
保姆级教程:在Win10上用Docker Desktop搞定Dify,再接入本地DeepSeek模型 如果你是一位Windows 10用户,同时对AI应用开发充满兴趣,那么这篇教程就是为你量身定制的。我们将一步步带你完成Dify平台的部署,并将其与本地运…...
