vue3使用vue-diff插件实现文本对比

前面介绍过vue3通过monaco-editor实现文本对比功能 但因为业务需要自定义左右两侧文本的底色及高亮颜色,考虑换一个插件:vue-diff

1、下载插件:

npm i vue-diff@1.2.4

 2、main.js中引入并注册插件:

// Diff对比
import VueDiff from "vue-diff";
import "vue-diff/dist/index.css";const app = createApp(App)
app.use(VueDiff)

3、vue文件中使用diff插件:

<template><Diffmode="split" // split, unified两种格式可选theme="light"language="text" //语言prev="上一个文本"current="当前文本"style="height: calc(100% - 50px); width: 100%; overflow: scroll"/>
</template>

current和prev可设置为变量去动态改变数据;

language可选值:

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

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

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

相关文章

Leetcode—剑指Offer LCR 083. 全排列【中等】

2023每日刷题&#xff08;一零二&#xff09; Leetcode—LCR 083. 全排列 实现代码 class Solution { public:vector<vector<int>> permute(vector<int>& nums) {vector<vector<int>> ans;int n nums.size();function<void(int)> d…

12个强大的 JavaScript 动画库,可帮助你提升用户体验

文章目录 12个强大的 JavaScript 动画库&#xff0c;可帮助你提升用户体验1.Anime.js2.Lottie3. Velocity4.Rough Notation5.Popmotion6. Vivus7.GSAP&#xff1a;Green Stocking Animation Platform8. Three.js9.ScrollReveal10.Barba.js11.Mo.js12.Typed.js总结 12个强大的 J…

一键拥有你的GPT4

这几天我一直在帮朋友升级ChatGPT&#xff0c;现在已经可以闭眼操作了哈哈&#x1f61d;。我原本以为大家都已经用上GPT4&#xff0c;享受着它带来的巨大帮助时&#xff0c;但结果还挺让我吃惊的&#xff0c;还是有很多人仍苦于如何进行升级。所以就想着写篇教程来教会大家如何…

HarmonyOS鸿蒙学习笔记(23)监听Wifi状态变化

监听Wifi状态变化 前言创建接收状态变化的Bean对象创建订阅者和订阅事件参考资料&#xff1a; 前言 本篇博文通过动态订阅公共事件来说明怎么使用HarmonyOS监听Wifi状态的变化。关于动态订阅公共事件的概念&#xff0c;官网有详细说明&#xff0c;再次就不在赘述。博文相关项目…

应急响应-Windows-进程排查

进程&#xff08;process&#xff09;是计算机中的程序关于某数据集合上的一次运动活动&#xff0c;是系统进行资源分配和调度的基本单位&#xff0c;是操作系统结果的基础。在早期面向进程结构中&#xff0c;进程是线程的容器。无论是在Windows系统还是Linux系统中&#xff0c…

计算机软件知识,务必进来了解一下

ps&#xff1a;本文章的图片内容来源都是来自于湖科大教书匠高老师的视频&#xff0c;声明&#xff1a;仅供自己复习 这里附上视频链接地址&#xff1a;1-4 计算机软件_哔哩哔哩_bilibili 程序是软件的重要组成部分&#xff0c;一台计算机中的全部程序和数据就构成了这台计算机…

万字图解 | 深入揭秘IP层工作原理

大家好&#xff0c;我是「云舒编程」&#xff0c;今天我们来聊聊计算机网络面试之-(网络层ip)工作原理。 文章首发于微信公众号&#xff1a;云舒编程 关注公众号获取&#xff1a; 1、大厂项目分享 2、各种技术原理分享 3、部门内推 前言 想必不少同学在面试过程中&#xff0c;…

yolov5 opencv dnn部署 github代码

yolov5 opencv dnn部署 github代码 源码地址实现推理源码中作者的yolov5s.onnx推理条件python部署(因为python比较简单就直接介绍了)c部署 参考链接 源码地址 yolov5官网还提供的dnn、tensorrt推理链接本人使用的opencv c github代码,代码作者非本人&#xff0c;也是上面作者推…

一、防御保护---信息安全概述

一、网络安全防御---信息安全概述 1.信息安全现状及挑战1.1 网络空间安全市场在中国&#xff0c;潜力无穷1.2 数字化时代威胁升级1.3 传统安全防护逐步失效1.4 安全风险能见度不足1.5 缺乏自动化防御手段1.6 网络安全监管标准愈发严苛 2.信息安全概述2.1 简介2.2 常见的网络安全…

C语言每日一题(48)回文链表

力扣 234 回文链表 题目描述 给你一个单链表的头节点 head &#xff0c;请你判断该链表是否为回文链表。如果是&#xff0c;返回 true &#xff1b;否则&#xff0c;返回 false 。 示例 1&#xff1a; 输入&#xff1a;head [1,2,2,1] 输出&#xff1a;true示例 2&#xff1…

HTML 炫酷进度条

下面是代码 <!DOCTYPE html> <html><head><meta charset"UTF-8"><title>Light Loader - CodePen</title><style> html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr…

企业能源消耗监测管理系统是否可以做好能源计量与能耗分析?

能源消耗与分析是能源科学管理的基础&#xff0c;也可促进能源管理工作的改善&#xff0c;在企业中能源管理系统的作用也愈加重要。 首先&#xff0c;能源计量是能源管理的基础&#xff0c;通过能源精准计老化&#xff0c;容易出现测量设备不准确以及其他一些人为因素原因导致…

Linux 驱动开发基础知识——编写LED驱动程序(三)

个人名片&#xff1a; &#x1f981;作者简介&#xff1a;一名喜欢分享和记录学习的在校大学生 &#x1f42f;个人主页&#xff1a;妄北y &#x1f427;个人QQ&#xff1a;2061314755 &#x1f43b;个人邮箱&#xff1a;2061314755qq.com &#x1f989;个人WeChat&#xff1a;V…

ICSpector:一款功能强大的微软开源工业PLC安全取证框架

关于ICSpector ICSpector是一款功能强大的开源工业PLC安全取证框架&#xff0c;该工具由微软的研究人员负责开发和维护&#xff0c;可以帮助广大研究人员轻松分析工业PLC元数据和项目文件。 ICSpector提供了方便的方式来扫描PLC并识别ICS环境中的可疑痕迹&#xff0c;可以用于…

微信小程序(十五)自定义导航栏

注释很详细&#xff0c;直接上代码 上一篇 新增内容&#xff1a; 1.组件文件夹创建方法 2.自定义组件的配置方法 3.外部修改组件样式&#xff08;关闭样式隔离或传参&#xff09; 创建组件文件夹 如果是手动创建建议注意在json文件声明&#xff1a; mynav.json {//声明为组件可…

【Kafka】开发实战和Springboot集成kafka

目录 消息的发送与接收生产者消费者 SpringBoot 集成kafka服务端参数配置 消息的发送与接收 生产者 生产者主要的对象有&#xff1a; KafkaProducer &#xff0c; ProducerRecord 。 其中 KafkaProducer 是用于发送消息的类&#xff0c; ProducerRecord 类用于封装Kafka的消息…

数据结构(绪论+算法的基本概念)

文章目录 一、绪论1.1、数据结构的基本概念1.2、数据结构三要素1.2.1、逻辑结构1.2.2、数据的运算1.2.3、物理结构&#xff08;存储结构&#xff09;1.2.4、数据类型和抽象数据类型 二、算法的基本概念2.1、算法的特性2.2、“好”算法的特质2.2.1、算法时间复杂度2.2.2、算法空…

【医学图像隐私保护】联邦学习:密码学 + 机器学习 + 分布式 实现隐私计算,破解医学界数据孤岛的长期难题

联邦学习&#xff1a;密码学 机器学习 分布式 提出背景&#xff1a;数据不出本地&#xff0c;又能合力干大事联邦学习的问题 分布式机器学习&#xff1a;解决大数据量处理的问题横向联邦学习&#xff1a;解决跨多个数据源学习的问题纵向联邦学习&#xff1a;解决数据分散在多…

SQL查询数据库环境(dm8达梦数据库)

SQL查询数据库环境dm8达梦数据库 环境介绍 环境介绍 某些环境没有图形化界面,可以使用sql语句查询达梦数据库环境情况 SELECT 实例名称 数据库选项,INSTANCE_NAME 数据库选项相关参数值 FROM V$INSTANCE UNION ALL SELECT 授权用户,(SELECT AUTHORIZED_CUSTOMER FROM V$LICE…

【Linux】从新认识Linux 服务(Service)

文章目录 Linux中service的概念Linux中常见的service常见的服务管理方式Linux中列出serviceLinux中service的特点推荐阅读 Linux中service的概念 在Linux操作系统中&#xff0c;服务&#xff08;Service&#xff09;是一个基本概念&#xff0c;它通常指的是运行在后台的、持续…