ddchef / vue-code-diff

vue文件差异对比
170 stars 40 forks source link

允许开发人员配置他们是否希望在显示完整文档时标记文档开头的消息 (Allow for developers to configure if they would like the message marking the beginning of the document when showing the full doc) #54

Open djmore4 opened 3 years ago

djmore4 commented 3 years ago

我很抱歉,我不会读或写中文,但我会尝试翻译我的请求,让事情变得更容易 (I apologize, I can't read or write Chinese but I will try to translate my request to make things easier)

作为开发人员,当“isShowNoChange”属性为真时,我希望能够不包含添加到字符串中的消息 (As a developer I want to be able to not include the message which is added to the string when the "isShowNoChange" property is true)

我已经克隆了 git 存储库并在本地进行了更改以解决我的请求以及其他一些有用的更改。这些包括添加请求的属性和逻辑更改以及为讲英语的人创建 README-EN.md 文件 (I have cloned the git repository and made changes locally to resolve my request and also some other helpful changes. These include adding the requested property and logical change as well as creating a README-EN.md file for english speakers)

如果需要,我可以分享我对代码所做的修改,以确保满足所有标准,如果您更愿意进行一组不同的更改来满足我的要求,这也会非常有帮助。谢谢 (If desired I can share the modifications I made to code to ensure all standards are met and if you would prefer to make a different set of changes which address my request that would also be very helpful. Thank you)

Shimada666 commented 3 years ago

Maybe u can share ur PR, thanks

djmore4 commented 3 years ago

I couldn't think of a better way to share this with you so I have grabbed the diff of my current changes with the master branch.

diff --git a/README-EN.md b/README-EN.md
new file mode 100644
index 0000000..f403bc2
--- /dev/null
+++ b/README-EN.md
@@ -0,0 +1,55 @@
+# [vue-code-diff](https://www.npmjs.com/package/vue-code-diff)
+
+> Code comparison display [demo](http://diff.xjie.me/)
+
+## Installation
+```shell
+yarn add vue-code-diff
+```
+
+## Usage
+```vue
+<template>
+  <div>
+    <code-diff :old-string="oldStr" :new-string="newStr" :context="10" />
+  </div>
+</template>
+
+import CodeDiff from 'vue-code-diff'
+export default {
+  components: {CodeDiff},
+  data(){
+    return {
+      oldStr: 'old code',
+      newStr: 'new code'
+    }
+  }
+}
+```
+
+## Parameter Description
+
+| Parameter | Description | Type      | Possible Values | Default |
+|---------- |------------ |---------- |---------------  |-------- |
+| old-string| String before change | string  |   —    |    —     |
+| new-string| String after change | string  |   —    |    —     |
+| context| How many lines are spaced up and down in different places without hiding?? (Working on translation) | number  |   —    |    —     |
+| outputFormat| Presentation format of diff | string  |   line-by-line,side-by-side    |    line-by-line     |
+| drawFileList | Show the list of comparison files | boolean | - | false |
+| renderNothingWhenEmpty | Don't render when there is no contrast | boolean | - | false |
+| diffStyle | Contrast difference level in each row | string | word, char | word |
+| fileName | File name | string | - |  |
+| isShowNoChange | Show full source code even when there is no comparison | boolean | - | false |
+| includeWithoutChangeString | Add message which indicates both the beginning of the string and which string it is | boolean | - | true |
+
+
+## Ouput Formats
+
+### line-by-line
+![image](https://github.com/ddchef/vue-code-diff/blob/master/2018-06-01.png?raw=true)
+
+### side-by-side
+![image](https://github.com/ddchef/vue-code-diff/blob/master/2018050615272.png?raw=true)
+
+## LICENSE
+[MIT](LICENSE)
diff --git a/README.md b/README.md
index ff05db2..b084c06 100644
--- a/README.md
+++ b/README.md
@@ -40,6 +40,7 @@ export default {
 | diffStyle | 每行中对比差异级别 | string | word, char | word |
 | fileName | 文件名 | string | - |  |
 | isShowNoChange | 当无对比时展示源代码 | boolean | - | false |
+| includeWithoutChangeString | 添加以下信息:字符串的开头和它是哪个字符串 | boolean | - | true |

 ## 效果展示
diff --git a/src/lib/code-diff/index.vue b/src/lib/code-diff/index.vue
index 57fda48..b5b6535 100644
--- a/src/lib/code-diff/index.vue
+++ b/src/lib/code-diff/index.vue
@@ -59,6 +59,10 @@ export default {
     isShowNoChange: {
       type: Boolean,
       default: false
+    },
+    includeWithoutChangeString: {
+      type: Boolean,
+      default: true
     }
   },
   computed: {
@@ -71,7 +75,7 @@ export default {
       function hljs (html) {
         return html.replace(/<span class="d2h-code-line-ctn">(.+?)<\/span>/g, '<span class="d2h-code-line-ctn"><code>$1</code></span>')
}
-      if (isShowNoChange) {
+      if (includeWithoutChangeString && isShowNoChange) {
         oldString = 'File Without Change\tOldString: ======================== \n' + oldString
         newString = 'File Without Change\tNewString: ======================== \n' + newString

I apologize if that isn't the easiest way to view the changes.

Additionally I noticed what seems to be a bug from my perspective in side-by-side mode while the isSourceNoChange option set to true. I'd like to try to fix that as well before I submit any changes if they are approved in the first place. The bug is that the change header formatting (ex. @@ -3,21 +3,21 @@) does not extend to the right side of the diff

djmore4 commented 3 years ago

@Shimada666 Any thoughts on the proposed changes or the potential bug that I mentioned?

Shimada666 commented 3 years ago

@Shimada666 Any thoughts on the proposed changes or the potential bug that I mentioned?

@djmore4

Sorry, I don't quite understand what you mean. I read your reply and it seems that there is only one more includeWithoutChangeString field, which has no practical effect? Maybe a PR can be created? This might show the changes better.

djmore4 commented 3 years ago

Essentially the difference is that my change allows for a user of the plugin to show the entire file as the diff without including oldString = 'File Without Change\tOldString: ======================== \n' + oldString newString = 'File Without Change\tNewString: ======================== \n' + newString

The only practical effect from my point of view is that these strings are unnecessary additions to the strings being displayed in the diff and so the developer should have the option to include or remove it when they choose

Shimada666 commented 3 years ago

I got it, but I am not the owner of this repo. You can create a new PR.