总结 vue-diff 插件:简单易用,适合快速实现文本差异对比。 codemirror 和diff-match-patch:功能强大,适合需要更多自定义和高级功能的场景。 根据具体需求选择合适的方法即可。
liuhongdi@lhdpc:/data/vue/axios$ npm listdiff-match-patchaxios@0.1.0/data/vue/axios └──diff-match-patch@1.0.5 说明:刘宏缔的架构森林是一个专注架构的博客, 网站:https://blog.imgtouch.com 本文:https://blog.imgtouch.com/index.php/2023/06/02/vue-js3-wen-ben-dui-bi-huo-bi-jiao-co...
<template> <Codemirror v-model:value="code" :options="cmOptions" border placeholder="测试 placeholder" :height="200" @change="onChange" /></template>import Codemirror from "codemirror-editor-vue3";// languageimport "codemirror/mode/javascript/javascript.js";import { ref }...
.mount('#app') 使用 <template></template> 局部使用 在vue 文件中 <template></template>import{defineComponent}from'vue'import{CodeDiff}from'v-code-diff'exportdefaultdefineComponent({components: {CodeDiff} }) 事件 参数 实例 main.ts importCodeDifffrom'v-code-diff'// useconstapp =createApp(App)...
"codemirror": "^5.65.16", "diff-match-patch": "^1.0.5" }, @@ -74,33 +75,31 @@ "@vitejs/plugin-vue": "^5.0.4", "@vitejs/plugin-vue-jsx": "^3.1.0", "@vue/cli-plugin-typescript": "~4.5.15", "@vueuse/core": "^10.9.0", "chalk": "^4.1.2", "conventional-change...
"codemirror": "^5.x", "diff-match-patch": "^1.0.5" "diff-match-patch": "^1.0.5", "vue": "^3.x" }, "devDependencies": { "@commitlint/cli": "^16.1.0", @@ -81,21 +79,24 @@ "conventional-changelog-cli": "^2.0.31", "dedent": "^0.7.0", "diff-match-patch": "...
codemirror: 5.65.9 diff-match-patch: 1.0.5 dev: false /codemirror/5.65.9: resolution: {integrity: sha512-19Jox5sAKpusTDgqgKB5dawPpQcY+ipQK7xoEI+MVucEF9qqFaXpeqY1KaoyGBso/wHQoDa4HMMxMjdsS3Zzzw==} dev: false /color-convert/1.9.3: ...
npm install codemirror-editor-vue3 -S yarn add codemirror-editor-vue3 pnpm i codemirror-editor-vue3 codemirror -S 全局安装 INFO:不建议全局注册组件,这会导致无法正确获取模板上的类型提示。 main.js: import { createApp } from "vue"; import App from "./App.vue"; ...
.use(CodeDiff) .mount('#app') 使用 <template></template> 局部使用 在vue 文件中 <template></template>import{defineComponent}from'vue'import{CodeDiff}from'v-code-diff'exportdefaultdefineComponent({components: {CodeDiff} }) 事件 参数 实例 main.ts importCodeDifffrom'v-code-diff'// useconst...