Vue3 使用方式1、注册为全局组件 使用方式2、单独引入 Vue2 使用方式1、注册为全局组件 使用方式2、单独引入 结语 参考 在线演示 2023-10-03 更新 目前v-code-diff 已更新至 1.7.1 版本,相比于本文的 0.x 版本,在语法高亮准确率、大文件比对速度、折叠展开功能、打包体积上均有改善与优化。可以在此篇文章查...
本文介绍了如何在Vue2.X和Vue3.X项目中引入并使用`vue-code-diff`和`v-code-diff`代码差异插件来展示和比较代码变化。
vue3-code-diff Vue2 / Vue3 可用的 code diff 插件 是 vue-code-diff 安装 # With NPM npm i v-code-diff # With Yarn yarn add v-code-diff 全局注册 import {createApp} f
为此，我基于vue-code-diff开发了v-code-diff，使其支持vue2和vue3，提升了渲染性能，并添加了异步渲染、渲染前后钩子等新特性。vue-code-diff的核心功能包括github风格的代码对比和差异级别设置，但存在安全依赖（highlight.js 9版本已废弃）、样式和兼容性问题，以及缺乏高级回调和vue3支持。v-code-di...
以vue3 为例,我们要先在 main.js 里注册为全局组件 import { createApp } from 'vue' import CodeDiff from 'v-code-diff' app .use(CodeDiff) .mount('#app') 然后,就可以在组件中使用了。 <template> <code-diff old-string="const a = 1\nconst c = 3" new-string="const b = 2" outp...
3. 传入组件参数 vue-code-diff 组件可以接受多个参数,下面是这些参数的作用: - oldText:旧版本的代码 - newText:新版本的代码 - language:代码的语言类型(默认是 JavaScript) - showLineNumbers:是否显示行号(默认是 true) - context:指定显示几行代码 比如: ``` <vue-code-diff :old-text="oldText" :...
<code-diff v-if="oldValue&&newValue":old-string="oldValue":new-string="newValue":context="10"outputFormat="side-by-side" />//js代码import CodeDiff from'vue-code-diff'components: { CodeDiff }, data() {return{ oldValue:null,
DevDependencies@babel/core, @babel/plugin-proposal-class-properties, @babel/plugin-proposal-optional-chaining, @babel/plugin-syntax-jsx, @babel/plugin-transform-async-to-generator, @babel/plugin-transform-runtime, @babel/runtime, @babel/runtime-corejs3, @commitlint/cli, @commitlint/config-convention...
master 分支1 标签0 xiaolong.huinit project.04212b56年前 2 次提交 build init project. 6年前 config init project. 6年前 src init project. 6年前 static init project. 6年前 .babelrc init project. 6年前 .editorconfig init project.
vue-code-diff/index.html Version: 274 BHTMLView Raw 1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <meta name="viewport" content="width=device-width,initial-scale=1.0"> 6 <title>vue-code-diff</title> 7 </head> 8 <body> 9 <div id="app"><...