当前位置: 首页 > news >正文

vue3 使用 jsoneditor

vue3 使用 jsoneditor

在main.js中引入 样式文件

import 'jsoneditor/dist/jsoneditor.css'

复制代码放到文件中就能用了
jsoneditor.vue

<template><div ref="jsonDom" style="width: 100%; height: 460px"></div>
</template>
<script setup lang="ts">
import { ref, onMounted, watchEffect } from 'vue'
import JsonEditor from 'jsoneditor'
interface validateResult {path: Array<string | number>message: string
}
const props = defineProps<{option: anyvalidate?: (val: any) => validateResult
}>()
const emit = defineEmits(['update:modelValue', 'change', 'customValidation'])const jsonDom = ref(null)
const validate = (res: any, editor: any) => {try {emit('change', {success: res.length === 0 && typeof editor.get() !== 'number',json: editor.getText()})} catch (error) {console.log(error)}
}
onMounted(() => {const options = {history: false,sortObjectKeys: false,mode: 'code',modes: ['code', 'text'],onChange() {editor.validate().then((res: any) => validate(res, editor))},onBlur() {try {editor.set(eval(`(${editor.getText()})`))editor.validate().then((res: any) => validate(res, editor))} catch (error) {console.log(error)}},onValidate: props.validate,onValidationError: function (errors: any) {errors.forEach((error: any) => {switch (error.type) {case 'validation': // schema validation errorbreakcase 'customValidation': // custom validation erroremit('customValidation')breakcase 'error': // json parse erroremit('change', {success: false,json: editor.getText()})break}})}}const editor = new JsonEditor(jsonDom.value, options)watchEffect(() => {editor.set(props.option)editor.validate().then((res: any) => validate(res, editor))})
})
</script>

相关文章:

vue3 使用 jsoneditor

vue3 使用 jsoneditor 在main.js中引入 样式文件 import jsoneditor/dist/jsoneditor.css复制代码放到文件中就能用了 jsoneditor.vue <template><div ref"jsonDom" style"width: 100%; height: 460px"></div> </template> <…...

若依前后端分离版使用mybatis-plus实践教程

1、根目录得pom加入依赖 <properties><mybatis-plus.version>3.5.1</mybatis-plus.version> </properties> <dependencies><!-- mp配置--><dependency><groupId>com.baomidou</groupId><artifactId>mybatis-plus…...

SpringBoot-Dubbo-Zookeeper

Apache Dubbo&#xff1a;https://cn.dubbo.apache.org/zh-cn/overview/home/ 依赖 <!--dubbo--> <dependency><groupId>org.apache.dubbo</groupId><artifactId>dubbo-spring-boot-starter</artifactId><version>2.7.3</versio…...

华为HCIE课堂笔记第十二章 ICMPv6和NDP协议

第十二章 ICMPv6和NDP 12.1 背景 ICMPv6协议用于IPV6协议的消息传递&#xff1a;地址解析、重复地址检测、无状态地址配置、NDP协议、路径MTU发现。 12.2 ICMPv6介绍 ICMPv6的头部字段包含Type字段、Code字段、校验和字段。 消息分为两种&#xff1a; 查错消息&#xff…...

GNSS科研常用相关网站及资源

代码类&#xff1a; Github GitHub: Let’s build from here GitHub 导航相关开源项目 GNSS&#xff1a;RTKLIB、GAMP II-GOOD、GPSTest、GNSSLogger 组合导航&#xff1a;ignav、VINS、Multi_Sensor_Fusion Gitee&#xff08;从Github导入后快速下载库&#xff09; Gi…...

进程的创建与回收学习笔记

目录 一、进程内容&#xff1a; 二、进程常用命令 三、创建子进程 四、子进程进阶 五、进程的退出 六、进程的回收 一、进程内容&#xff1a; 程序&#xff1a; 存放在磁盘上的指令和数据的有序集合&#xff08;文件&#xff09; 静态的 进程&#xff1a; 执行一个程序所…...

【CCNet】《CCNet:Criss-Cross Attention for Semantic Segmentation》

ICCV-2019 文章目录 1 Background and Motivation2 Related Work3 Advantages / Contributions4 Method5 Experiments5.1 Datasets and Metrics5.2 Experiments on Cityscapess5.3 Experiments on ADE20K5.4 Experiments on COCO 6 Conclusion&#xff08;own&#xff09; 1 Ba…...

Qt QSQlite数据库插入字符串中存在单个双引号或单个单引号解决方案

1. 前言 当进行数据库写入或更新时&#xff0c;有时会遇到存在字符串中包含单个双引号或者单引号。 2. 单引号和双引号""作用 在数据库中&#xff0c;字符串常量时需要用一对英文单引号或英文双引号""将字符串常量括起来。 比如&#xff1a; select * …...

Linux系统中的IP地址、主机名、和域名解析

1.IP地址 每一台联网的电脑都会有一个地址&#xff0c;用于和其它计算机进行通讯 IP地址主要有2个版本&#xff0c;V4版本和V6版本&#xff08;V6很少用&#xff0c;暂不涉及&#xff09; IPv4版本的地址格式是&#xff1a;a.b.c.d&#xff0c;其中abcd表示0~255的数字&…...

soc算法【周末总结】

1 实验一&#xff08;SOC误差30%放电实验&#xff09; 1.1 实验过程 1、对电池包进行充电&#xff0c;将昨天放空的电池包进行充电&#xff0c;充电至SOC40%左右&#xff1b; 2、电池包SOC为38%时&#xff0c;手动修改SOC值为70%&#xff0c;开始放电 3、SOC由70%缓慢降至4…...

SpringBoot之优化高并发场景下的HttpClient并提升QPS

HttpClient优化思路 使用连接池&#xff08;简单粗暴&#xff09; 长连接优化&#xff08;特殊业务场景&#xff09; httpclient和httpget复用 合理的配置参数&#xff08;最大并发请求数&#xff0c;各种超时时间&#xff0c;重试次数&#xff09; 异步请求优化&#xff0…...

go-zero 如何在任意地方获取yaml中的值

1、config配置文件中新增全局变量 package configimport "github.com/zeromicro/go-zero/rest"type Config struct {rest.RestConfDB struct {DataSource string}Redis struct {Addr stringPassWord stringUserName string}Auth struct {AccessSecret stringAcc…...

C++20结构化绑定应用实例(二百五十六)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 人生格言&#xff1a; 人生…...

改进YOLOv8注意力系列四:结合中心化特征金字塔EVCBlock、大核卷积注意力LKA_Attention、全局注意力MobileViTAttention

改进YOLOv8注意力系列三:结合CrissCrossAttention、ECAAttention、EMAU期望最大化注意力 代码大核卷积注意力LKA_Attention中心化特征金字塔EVCBlock全局注意力MobileViTAttention加入方法各种yaml加入结构本文提供了改进 YOLOv8注意力系列包含不同的注意力机制以及多种加入方…...

idea中使用Lombok 失效,@Slf4j 找不到符号的解决办法

文章目录 一、前言二、问题排查和解决方案三、 其他解决方案3.1 另一种解决方案3.2 参考文章 一、前言 今天在一个多module工程中&#xff0c;新增了一个 springboot&#xff08;版本 2.2.4.RELEASE&#xff09; module&#xff0c;像往常一样&#xff0c;我引入了lombok依赖&…...

MySQL修炼手册8:约束与完整性:保证数据的一致性

目录 写在开头1 主键与唯一键约束1.1 PRIMARY KEY约束的作用1.2 主键的复合使用1.3 主键的修改与删除1.4 UNIQUE约束的应用场景1.5 主键与唯一键约束的性能影响1.6 主键的自动增长1.7 主键的最佳实践1.8 独特性与业务需求1.9 避免过度使用唯一约束1.10 主键与唯一键的关系 2 外…...

React入门 - 03(初识 React 组件和 JSX)

本章内容 目录 1.初识 React 组件2.关于 JSX 继上一节的工程案例&#xff0c;我们这一节主要了解一下 React组件和 “JSX 语法”。 前置知识点&#xff1a;ES6模块化&继承 1.初识 React 组件 1、打开 src/index.js文件&#xff08;项目的入口文件&#xff09;内容&…...

华为OD机试 - 反射计数(Java JS Python C)

题目描述 给定一个包含 0 和 1 的二维矩阵。 给定一个初始位置和速度,一个物体从给定的初始位置出发,在给定的速度下进行移动,遇到矩阵的边缘则发生镜面发射。 无论物体经过 0 还是 1,都不影响其速度。 请计算并给出经过 t 时间单位后,物体经过 1 点的次数。 矩阵以左…...

Linux系统中使用systemctl命令控制软件的启动和关闭

Linux系统很多软件&#xff08;内置或第三方&#xff09;均支持使用systemctl命令控制&#xff1a;启动、停止、开机自启 能够被systemctl管理的软件&#xff0c;一般也称之为&#xff1a;服务 1.功能和语法 功能&#xff1a;控制系统服务的启动关闭等 语法&#xff1a;syst…...

2024年01月微软更新Bug 已解决 !Explorer.EXE 提示:Windows无法访问指定设备、路径或文件。你可能没有适当的权限访问该项目。

前倾概要 近期大量出现如上图问题&#xff0c;杀毒&#xff0c;系统急救箱都没反应&#xff0c;罪魁祸首就是微软更新&#xff01; 点击什么都是&#xff1a;Windows无法访问指定设备、路径或文件。你可能没有适当的权限访问该项目。 但软件使用正常&#xff0c;还能通过建立…...

设计模式和设计原则回顾

设计模式和设计原则回顾 23种设计模式是设计原则的完美体现,设计原则设计原则是设计模式的理论基石, 设计模式 在经典的设计模式分类中(如《设计模式:可复用面向对象软件的基础》一书中),总共有23种设计模式,分为三大类: 一、创建型模式(5种) 1. 单例模式(Sing…...

【机器视觉】单目测距——运动结构恢复

ps&#xff1a;图是随便找的&#xff0c;为了凑个封面 前言 在前面对光流法进行进一步改进&#xff0c;希望将2D光流推广至3D场景流时&#xff0c;发现2D转3D过程中存在尺度歧义问题&#xff0c;需要补全摄像头拍摄图像中缺失的深度信息&#xff0c;否则解空间不收敛&#xf…...

1.3 VSCode安装与环境配置

进入网址Visual Studio Code - Code Editing. Redefined下载.deb文件&#xff0c;然后打开终端&#xff0c;进入下载文件夹&#xff0c;键入命令 sudo dpkg -i code_1.100.3-1748872405_amd64.deb 在终端键入命令code即启动vscode 需要安装插件列表 1.Chinese简化 2.ros …...

TRS收益互换:跨境资本流动的金融创新工具与系统化解决方案

一、TRS收益互换的本质与业务逻辑 &#xff08;一&#xff09;概念解析 TRS&#xff08;Total Return Swap&#xff09;收益互换是一种金融衍生工具&#xff0c;指交易双方约定在未来一定期限内&#xff0c;基于特定资产或指数的表现进行现金流交换的协议。其核心特征包括&am…...

Axios请求超时重发机制

Axios 超时重新请求实现方案 在 Axios 中实现超时重新请求可以通过以下几种方式&#xff1a; 1. 使用拦截器实现自动重试 import axios from axios;// 创建axios实例 const instance axios.create();// 设置超时时间 instance.defaults.timeout 5000;// 最大重试次数 cons…...

拉力测试cuda pytorch 把 4070显卡拉满

import torch import timedef stress_test_gpu(matrix_size16384, duration300):"""对GPU进行压力测试&#xff0c;通过持续的矩阵乘法来最大化GPU利用率参数:matrix_size: 矩阵维度大小&#xff0c;增大可提高计算复杂度duration: 测试持续时间&#xff08;秒&…...

JUC笔记(上)-复习 涉及死锁 volatile synchronized CAS 原子操作

一、上下文切换 即使单核CPU也可以进行多线程执行代码&#xff0c;CPU会给每个线程分配CPU时间片来实现这个机制。时间片非常短&#xff0c;所以CPU会不断地切换线程执行&#xff0c;从而让我们感觉多个线程是同时执行的。时间片一般是十几毫秒(ms)。通过时间片分配算法执行。…...

06 Deep learning神经网络编程基础 激活函数 --吴恩达

深度学习激活函数详解 一、核心作用 引入非线性:使神经网络可学习复杂模式控制输出范围:如Sigmoid将输出限制在(0,1)梯度传递:影响反向传播的稳定性二、常见类型及数学表达 Sigmoid σ ( x ) = 1 1 +...

Webpack性能优化:构建速度与体积优化策略

一、构建速度优化 1、​​升级Webpack和Node.js​​ ​​优化效果​​&#xff1a;Webpack 4比Webpack 3构建时间降低60%-98%。​​原因​​&#xff1a; V8引擎优化&#xff08;for of替代forEach、Map/Set替代Object&#xff09;。默认使用更快的md4哈希算法。AST直接从Loa…...

实战三:开发网页端界面完成黑白视频转为彩色视频

​一、需求描述 设计一个简单的视频上色应用&#xff0c;用户可以通过网页界面上传黑白视频&#xff0c;系统会自动将其转换为彩色视频。整个过程对用户来说非常简单直观&#xff0c;不需要了解技术细节。 效果图 ​二、实现思路 总体思路&#xff1a; 用户通过Gradio界面上…...