Vue3 使用方式1、注册为全局组件 使用方式2、单独引入 Vue2 使用方式1、注册为全局组件 使用方式2、单独引入 结语 参考 在线演示 2023-10-03 更新 目前v-code-diff 已更新至 1.7.1 版本,相比于本文的 0.x 版本,在语法高亮准确率、大文件比对速度、折叠展开功能、打包体积上均有改善与优化。可以在此篇文章查...
Vue 版本兼容性: v-code-diff 插件支持 Vue2 和 Vue3。这意味着你可以在不同的 Vue 版本项目中使用该插件。 浏览器兼容性: 虽然没有直接提到具体的浏览器兼容性,但通常基于 Vue 的插件都会支持现代主流浏览器(如 Chrome、Firefox、Safari、Edge 等)。 Node.js 版本兼容性: 为了安装和使用 v-code-diff...
1、Vue2.X的项目 npm i vue-code-diff@1.2.0 父页面:index.vue <template><divstyle="padding: 100px;"><CodeDiff/></div></template><script>importCodeDifffrom'./components/codeDiff'exportdefault{components: {CodeDiff},data:() =>({ }), }</script> 子组件:codeDiff.vue <template><divclas...
为此，我基于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...
template component for vue-demi, can dev and build. Latest version: 1.13.1, last published: 8 months ago. Start using v-code-diff in your project by running `npm i v-code-diff`. There are 10 other projects in the npm registry using v-code-diff.
2 changes: 1 addition & 1 deletion 2 package.json Original file line numberDiff line numberDiff line change @@ -1,6 +1,6 @@ { "name": "vue-code-diff", "version": "0.0.3", "version": "0.0.4", "description": "代码比对展示(Code comparison display)", "author": "ddchef>",...
Vue2 / Vue3 可用的 code diff 插件 演示地址: https://shimada666.github.io/v-code-diff/ 目录 安装 开始使用 Vue3 Vue2 组件属性 组件事件 拓展高亮语言 从0.x 版本迁移 安装 安装v-code-diff # npmnpmi v-code-diff# yarnyarnaddv-code-diff# pnpmpnpmaddv-code-diff ...