shimada666 / v-code-diff Goto Github PK

代码行数太多，每次左右滚动都要拖到最下面的区域，很不方便

请问怎么限制代码区域显示的最大高度？

要怎么才能设置代码比较区域的最大高度，麻烦了

作者大佬请看，如果点击锚点文件名的话，如果是hash模式地址会变了

0.3.11版本syncScroll 不生效可以帮忙看下吗

In the 0.x version, the html is created by the diff2html plugin to create an html string and then mounted on the element. Although this is simple, it is difficult to add custom functions, and the rendering and highlighting performance and effects are not ideal. For example, it is difficult for me to add a feature that clicks to expand and collapse the content.
In the 1.x version, I hope I can render html by myself, control the generation of html by myself, and it is easier to add some features, but this takes a lot of time, and I will try my best to improve it. If you need new features such as expanding and collapsing content, you can try editors such as monaco first, or comment below. If there are more people who need it, I will finish it as soon as possible. thank you for your support.

在 0.x 版本中，样式是通过 diff2html 插件创建出 html 字符串然后挂载到元素上的，这虽然简单，但很难添加自定义功能，渲染和高亮的性能与效果也不够理想。例如，我很难加入一个点击展开折叠内容的功能。
在 1.x 版本中，我希望能自己来渲染 html，自己把控 html 的生成，更容易增加自定义功能，但这需要时间，我会尽力完善它的。如果你有需要如展开折叠内容等新功能，可以先尝试 monaco 等编辑器，也可以在下方评论，如果需要它的人比较多，我会尽早地去完成它。感谢您的支持。

使用过程中发现，"CHANGED" 始终在，不会有差异变化
建议：对比无差异时，"CHANGED" =》 "NO CHANGED" 标记绿色

vite + vue3
vue本地运行开发无问题，发布打包，由于vue使用CDN，https://unpkg.com/[email protected]/dist/vue.global.js
项目运行报错：
v-code-diff是最新版本0.3.11

policy:1 Uncaught (in promise) TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".

大佬，诉求如截图所示这样的，目前在实际应用中需要手动hack来处理隐藏。

Originally posted by @xiang0308 in #15 (comment)

export default {
name: 'App',
components: {
CodeDiff
}

Uncaught TypeError: Failed to resolve module specifier "vue". Relative references must start with either "/", "./", or "../".
该怎么解决。。。

vue2里面使用

          <code-diff
              :old-string="oldString"
              :new-string="newString"
              output-format="side-by-side"
              :context="10"
          >
          </code-diff>

ddchef/vue-code-diff#60

先渲染空值了，然后再去赋值相同值，就会出现这个问题

您好 这种可以让他的哪个滚动条对齐吗

问题：在使用比对功能时，对于无差异的场景，会额外多一行 File Without Change 的文本。
需求：因为没有差异的文本也需要看到内容（isShowNoChange设置为true），又不想要有 File Without Change 这一行（这有可能会让用户端认为这段代码存在差异）
疑问：我在vue-code-diff上使用的话，无差异比对是不会多出这一行的。我down了代码下来看，发现这一行文本是主动赋值上去的，请问这样做是因为现有方案不支持这种场景嘛，还是有什么其他考量

RT

提示 diff2html 没有 diff.js 文件，去目录看了一下确实没有，应该是 diff2html 版本更改造成的？
希望修复一下。

有的时候只想语法高亮不想对比可以支持不~ 大佬

Hey, I've been using the package with great success, but I ran into a slight concern.

I isolated the component down to lazy loading it by doing something like :

const CodeDiff = defineAsyncComponent(() =>
  import('v-code-diff').then(({ CodeDiff }) => CodeDiff)
);

But when building and minifying the app, Rollup and Vite still complain about minified chunk for the v-code-diff code to be over 1000KB.
Is there a possibility to reduce the component size ?

Thanks a lot!

参考Highlight.js主页的用法：
https://github.com/highlightjs/highlight.js

const hljs = require('highlight.js/lib/core');
hljs.registerLanguage('xml', require('highlight.js/lib/languages/xml'));

const highlightedCode = hljs.highlight('<span>Hello World!</span>', {language: 'xml'}).value

我实在是不需要语言高亮。将import hljs from 'highlight.js'替换为import * as hljs from 'highlight.js/lib/core'之后，js文件从1M减小到了100K。

另外Highlight.js官方有一个vue plugin：
https://github.com/highlightjs/vue-plugin

可以行号不对不爆红，只在有内容不一致时候爆红吗？大佬

if (props.isShowNoChange) { oldString = 'File Without Change\tOldString: ======================== \n' + oldString newString = 'File Without Change\tNewString: ======================== \n' + newString }
这一段可不可以去掉发一个小版本呢？

createElement() has been called outside of render function

在properties类型文件内容进行对比时发现，如果第一行为注释，且对比内容没有差异的时候，第一行注释会不显示，希望可以修复一下。
原始数据：

展示出来的数据：

现在新增一行，前一行没有修改也会显示出来，应该是行末换行符的问题？

文件对比会受 /r /n影响 内容是一样的 但是因为看不见的/r /n导致差异 可以忽略这些差异吗

请问支持展开折叠的内容吗？就是默认是折叠，点击折叠地方可以展开，类似github merge代码

这种展示出来左右是错位的是什么原因
左侧数据：
{
"code": 0,
"data": [
"2022-05-18 16:02:30",
"2022-05-18 16:02:31",
"2022-05-18 16:02:32",
"2022-05-18 16:02:33",
"2022-05-18 16:02:34",
"2022-05-18 16:02:35",
"2022-05-18 16:02:36",
"2022-05-18 16:02:37",
"2022-05-18 16:02:38",
"2022-05-18 16:02:39"
],
"msg": "操作成功"
}
右侧数据：
{
"code": 0,
"data": [
"2022-05-18 18:04:37",
"2022-05-24 18:04:38",
"2022-05-24 18:04:39",
"2022-05-24 18:04:40",
"2022-05-24 18:04:41",
"2022-05-24 18:04:42",
"2022-05-24 18:04:43",
"2022-05-24 18:04:44",
"2022-05-24 18:04:45",
"2022-05-24 18:04:46"
],
"msg": "操作成功"
}

把咱这个插件注释掉就可以进页面啦, 点击报错标识定位到了 (...e), 网上查了一下一般是使用了保留关键词 或者 json结尾有逗号, 去代码里没有定位到, 求大佬赐教

没有使用vue ，想用组件该如何使用？

不知道老哥能否打包成js , 并且可以使用js 的方式配置？

大佬 vue2 引入报Cannot read properties of null (reading '$vnode'),0.3.12版本

错误信息如下：

 warning  in ./node_modules/v-code-diff/dist/v-code-diff.esm.js

"export 'withDirectives' (imported as 'i') was not found in 'vue-demi'

RT

ERROR in /Users/momoQuasar/spacey/node_modules/v-code-diff/dist/v-code-diff/v-code-diff.d.ts(3,44):
TS2694: Namespace '"/Users/momoQuasar/spacey/node_modules/vue-demi/lib/index"' has no exported member 'DefineComponent'.
Version: typescript 4.2.2, eslint 7.32.0
Time: 3928 ms

My project is Vue2 + Typescript.
Now I'm using this awesome plugin, it did work, the diff result looks good in the web page.
But type checking always report issue.
It's annoying and can't pass the type check during project build, even though it still works.

感谢大佬的插件，用的是Vue2和Typescript，虽然页面可以正常使用，但是类型检查总是报错，在这里记录一下。

usage:

import Vue from 'vue';
import CodeDiff from 'v-code-diff';

Vue.use(CodeDiff);

report error:

No overload matches this call.
  Overload 1 of 2, '(plugin: PluginObject<unknown> | PluginFunction<unknown>, options?: unknown): VueConstructor<Vue>', gave the following error.
    Argument of type '{ install: (app: App<any>) => void; }' is not assignable to parameter of type 'PluginObject<unknown> | PluginFunction<unknown>'.
      Type '{ install: (app: App<any>) => void; }' is not assignable to type 'PluginObject<unknown>'.
        Types of property 'install' are incompatible.
          Type '(app: App<any>) => void' is not assignable to type 'PluginFunction<unknown>'.
            Types of parameters 'app' and 'Vue' are incompatible.
              Type 'VueConstructor<Vue>' is missing the following properties from type 'App<any>': mount, unmount
  Overload 2 of 2, '(plugin: PluginObject<any> | PluginFunction<any>, ...options: any[]): VueConstructor<Vue>', gave the following error.
    Argument of type '{ install: (app: App<any>) => void; }' is not assignable to parameter of type 'PluginObject<any> | PluginFunction<any>'.
      Type '{ install: (app: App<any>) => void; }' is not assignable to type 'PluginObject<any>'.
        Types of property 'install' are incompatible.
          Type '(app: App<any>) => void' is not assignable to type 'PluginFunction<any>'.
            Types of parameters 'app' and 'Vue' are incompatible.
              Type 'VueConstructor<Vue>' is not assignable to type 'App<any>'.

上面字符串："recordResponse": "{"code":"200","data":{"createTime":"2022-05-11 14:40:10","createUserName":"赵铁军","createUserNo":"80037","employeeNo":"80037","idCard":"211221198110152419","modifiedTime":"2022-05-11 14:40:12","modifiedUserNo":"80037","status":"2","submitTime":"2022-05-11 14:40:12","submitUserName":"赵铁军","submitUserNo":"80037","weeklyId":"553007","workDate":"2022-05-11 00:00:00","workDay":"周三","workDayId":"2182485","workTotal":8.0},"msg":"提交成功","success":true}",
下面字符串："recordResponse": "{"code":"200","data":{"createTime":"2022-05-11 14:40:10","createUserName":"赵铁军","createUserNo":"80037","employeeNo":"80037","idCard":"211221198110152419","modifiedTime":"2022-05-11 14:40:12","modifiedUserName":null,"modifiedUserNo":"80037","status":"2","submitTime":"2022-05-11 14:40:12","submitUserName":"赵铁军","submitUserNo":"80037",""80037","status":"2","submitTime":"2022-05-11 14:40:12","submitUserName":"赵铁军","submitUserNo":"80037","weeklyDayDetail":null,"weeklyId":"553007","workDate":"2022-05-11 00:00:00","workDay":"周三","workDayId":"2182485","workTotal":8.0},"msg":"提交成功","success":true}","553007","workDate":"2022-05-11 00:00:00","workDay":"周三","workDayId":"2182485","workTotal":8.0},"msg":"提交成功","success":true}",

如果文档所有篇幅都想展示，context的值的问题，不通过计算默认展示所有篇幅

ddchef/vue-code-diff#71