vue3中使用vue-diff工具来比较数据差异

1.安装vue-diff

npm i vue-diff

2.main.js中全局注册

import VueDiff from "vue-diff";
import "vue-diff/dist/index.css";app.use(VueDiff)

3.使用

<template><div class="contain-page"><el-scrollbar height="100vh"><el-card><div class="display-between"><el-input clearable v-model="formParams.textarea1" style="width: 50vw;" class="mr10":autosize="{ minRows: 10, maxRows: 20 }" type="textarea" placeholder="请输入JSON"></el-input><el-input clearable v-model="formParams.textarea2" style="width: 50vw;" class="ml10":autosize="{ minRows: 10, maxRows: 20 }" type="textarea" placeholder="请输入需要比较的JSON"></el-input></div><div class="mt20"><el-dropdown><el-button type="primary">选择数据格式<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item @click="language='json'">json格式</el-dropdown-item><el-dropdown-item @click="language='text'">text格式</el-dropdown-item></el-dropdown-menu></template></el-dropdown><el-button type="primary" plain @click="formParams = {}" class="ml20">清空</el-button></div></el-card><el-card class="mt20"><div class="title">对比预览</div><Diff mode="split" theme="light" :language="language" :prev="formParams.textarea1":current="formParams.textarea2" style="height: calc(100% - 50px); width: 100%; overflow: scroll" /></el-card></el-scrollbar></div>
</template>
<script setup>
import { computed, ref } from 'vue';const bool = computed(() => formParams.value.textarea1 === '' || formParams.value.textarea2 === '')
const language = ref("json")
const formParams = ref({textarea1: "",textarea2: ""
})
</script>

4.效果

5.说明

vue3中没有diff算法,不能使用diff插件,需要用vue-diff或者其他插件

6.补充

项目地址:https://gitcode.com/gh_mirrors/vu/vue-diff/overview

通过language属性来选择数据的格式,以下是数据格式

  • css
  • xmlxmlhtmlxhtmlrssatomxjbxsdxslplistsvg
  • markdownmarkdownmdmkdownmkd
  • javascriptjavascriptjsjsx
  • json
  • plaintextplaintexttxttext
  • typescripttypescriptts

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/463818.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

w014基于Springboot校园管理系统的设计与实现

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…

openGauss数据库-头歌实验1-3 创建和管理模式

一、创建和使用模式 &#xff08;一&#xff09;任务描述 本关任务&#xff1a;基于 openGauss 学习创建模式的相关知识。 &#xff08;二&#xff09;相关知识 为了完成本关任务&#xff0c;你需要掌握&#xff1a;1.openGauss 的常用操作&#xff0c;2.SQL 创建模式相关语…

基于springboot+vue实现的任务管理系统(源码+L文)4-103

第4章 系统设计 4.1 总体功能设计 员工&#xff0c;经理&#xff0c;管理员都需要登录才能进入任务管理系统&#xff0c;使用者登录时会在后台判断使用的权限类型&#xff0c;包括一般使用者和管理者,一般使用者为员工和经理&#xff0c;对员工只能提供任务信息显示查询&…

PlotNeuralNet学习与入门

最近在绘制神经网络结构图&#xff0c;发现了一个开源的工具&#xff1a;PlotNeuralNet Github网址链接&#xff1a; HarisIqbal88/PlotNeuralNet: Latex code for making neural networks diagrams 一些相关的教程&#xff1a; 视频教程链接&#xff1a;【Alu】PlotNeuralN…

c怎么与python交互

ctypes是Python的一个外部库&#xff0c;可以使用python语言调用已经编译好的C语言函数以及数据类型并进行数据交换等。ctypes的官方文档在https://docs.python.org/3/library/ctypes.html 1、ctypes基本数据类型映射表 2、python调用c语言的函数库 &#xff08;1&#xff09…

less解决function中return写法在浏览器被识别成Object导致样式失败的问题

问题描述&#xff1a; 一开始写的是: baseFontSize: 37.5px;//基于屏幕尺寸/10得出的基准font-size// return失败,浏览器显示为[object Object],[object Object] .pxToRem(px){value: px / baseFontSize * 1rem;return value; } 使用height: .pxToRem(40px);之后浏览器却是这…

VR 创业之路:从《I Expect You To Die》到未来展望

今年是 Reality Labs 成立 10 周年&#xff0c;Meta 每周都会与不同的 XR 先驱进行交流&#xff0c;探讨他们在行业中的经历、经验教训以及对未来的展望。本次&#xff0c;他们与游戏设计师、作家兼 Schell Games CEO Jesse Schell 进行了深入交谈&#xff0c;了解了他的个人故…

面试经典 150 题:189、383

189. 轮转数组 【参考代码】 class Solution { public:void rotate(vector<int>& nums, int k) {int size nums.size();if(1 size){return;}vector<int> temp(size);//k k % size;for(int i0; i<size; i){temp[(i k) % size] nums[i];}nums temp; }…

数据结构 —— AVL树

目录 1. AVL的概念 2.AVL树的结构 3.AVL树的插入 3.1 平衡因子更新 4. 旋转 4.1 旋转的原则 4.2 右单旋 4.2.1 右单旋代码实现 4.3 左单旋 4.3.1 左单旋代码实现 4.4 左右双旋 4.4.1 左右双旋代码实现 4.5 右左双旋 ​编辑 4.5.1 右左双旋代码实现 5. AVL树的判断…

交换机如何实现2.5G网络传输速率和网络变压器有关吗

华强盛电子导读&#xff1a;I19926430038 交换机实现2.5G网络传输速率涉及多个因素&#xff0c;其中包括硬件设计、端口支持、传输介质以及网络协议等。网络变压器在其中扮演了一个重要的角色&#xff0c;但并不是唯一的因素。 1. **硬件设计**&#xff1a;交换机需要有支持2.…

「C/C++」C++设计模式 之 抽象工厂模式(Abstract Factory)

✨博客主页何曾参静谧的博客&#x1f4cc;文章专栏「C/C」C/C程序设计&#x1f4da;全部专栏「VS」Visual Studio「C/C」C/C程序设计「UG/NX」BlockUI集合「Win」Windows程序设计「DSA」数据结构与算法「UG/NX」NX二次开发「QT」QT5程序设计「File」数据文件格式「PK」Parasoli…

【pycharm jupyter】启动报错

报错信息 upyter server process exited with code 1 ServerApp] A _jupyter_server_extension_points function was not found in jupyter_lsp. Instead, a _jupyter_server_extension_paths function was found and will be used for now. This function name will be depre…

精密机械代加工服务,为你的企业加速发展!

在当今竞争激烈的工业领域&#xff0c;精密机械代加工服务正成为众多企业实现快速发展的关键助力。这种专业服务凭借其独特的优势&#xff0c;为企业解决了诸多生产难题&#xff0c;推动企业在市场中大步向前。 先进的技术与设备 精密机械代加工服务提供商通常配备了先进的加工…

Data+AI━━揭秘千亿参数背后的技术较量:全球巨头的大模型布局!

DataAI━━揭秘千亿参数背后的技术较量&#xff1a;全球巨头的大模型布局&#xff01; 前言大语言模型:AI技术创新的新高地智能技术创新的"深水区"智能革命的下一站 前言 站在2024年科技创新的潮头&#xff0c;一场由大语言模型引发的技术革命正在上演。从ChatGPT引爆…

jmeter压测工具环境搭建(Linux、Mac)

目录 java环境安装 1、anaconda安装java环境&#xff08;推荐&#xff09; 2、直接在本地环境安装java环境 yum方式安装jdk 二进制方式安装jdk jmeter环境安装 1、jmeter单机安装 启动jmeter 配置环境变量 jmeter配置中文 2、jmeter集群搭建 多台机器部署jmeter集群…

草料二维码:低成本高效率的访客管理解决方案

在当前的商业和政治环境中&#xff0c;企业和政府机构越来越重视安全保密措施&#xff0c;尤其是对外来人员的行踪记录和管理。访客管理已成为企业运营中不可或缺的一环&#xff0c;它不仅提升了安全性&#xff0c;还增强了效率和便捷性。然而&#xff0c;许多机构仍在使用传统…

AOSP刷机

手机电脑都换了 从新复习一下吧 刷机分为几类 线刷 介质&#xff1a;通过USB数据线连接手机与电脑。 方法&#xff1a;通常使用专门的刷机工具&#xff08;如ADB、Fastboot、Odin等&#xff09;将ROM文件直接刷入设备。 优点&#xff1a;一般可以进行更全面的刷机操作&#x…

unocss 添加支持使用本地 svg 预设图标,并支持更改大小

安装 pnpm install iconify/utils 在配置文件 unocss.config.ts&#xff1a; presets > presetIcons 选项中 通过 FileSystemIconLoader 加载本地图标&#xff0c;并指定目录。 import presetWeapp from unocss-preset-weapp import { extractorAttributify, transformer…

一篇文章理解CSS垂直布局方法

方法1&#xff1a;align-content: center 在 2024 年的 CSS 原生属性中允许使用 1 个 CSS 属性 align-content: center进行垂直居中。 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewpo…

基于STM32+华为云IOT设计的大棚育苗管理系统

文章目录 一、前言1.1 项目介绍【1】项目开发背景【2】设计实现的功能【3】项目硬件模块组成 1.2 设计思路1.3 系统功能总结1.4 开发工具的选择【1】设备端开发【2】上位机开发 1.5 模块的技术详情介绍【1】NBIOT-BC26模块【2】MQ135传感器【4】SHT30传感器【5】B1750传感器 二…