feat: add prop syncScroll

Shimada666 · Shimada666 · commit 343832c36e65 · 2022-04-27T21:39:07.000+08:00
diff --git a/README-zh.md b/README-zh.md
@@ -32,8 +32,8 @@ import {createApp} from 'vue'
 import CodeDiff from 'v-code-diff'
 
 app
-    .use(CodeDiff)
-    .mount('#app')
+  .use(CodeDiff)
+  .mount('#app')
 ```
 
 然后
@@ -111,29 +111,30 @@ export default {
 
 # 事件
 
-| 事件名称      | 说明    | 回调参数     |
-|---------- |-------- |---------- |
-| before-render | 渲染前触发 | -  |
-| after-render | 渲染后触发 | -  |
+| 事件名称          | 说明      | 回调参数     |
+|---------------|---------|---------- |
+| before-render | 渲染前触发   | -  |
+| after-render  | 渲染后触发   | -  |
 
 # 参数
 
-| 参数      | 说明    | 类型      | 可选值       | 默认值   |
-|---------- |-------- |---------- |-------------  |-------- |
-| highlight | 控制是否高亮代码| boolean  |   -    |    true     |
-| language | 代码语言，如 `typescript`。不填会自动判断。 [查看全部支持语言](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md)| string  |   -    |    -     |
-| old-string| 陈旧的字符串| string  |   -    |    -     |
-| new-string| 新的字符串| string  |   -    |    -     |
-| context| 不同地方上下间隔多少行不隐藏 | number  |   -    |    -     |
-| outputFormat| 展示的方式 | string  |   line-by-line，side-by-side    |    line-by-line     |
-| drawFileList | 展示对比文件列表 | boolean | - | false |
-| renderNothingWhenEmpty | 当无对比时不渲染 | boolean | - | false |
-| diffStyle | 差异风格, 单词级差异或字母级差异 | string | word, char | word |
-| fileName | 文件名 | string | - | - |
-| isShowNoChange | 当无对比时展示源代码 | boolean | - | false |
-| trim | 移除字符串前后空白字符 | boolean | - | false |
-| language | 对比的文本语言 | boolean | - | false |
-| noDiffLineFeed | 不 diff windows 换行符(CRLF)与 linux 换行符(LF)  | boolean | - | false |
+| 参数                     | 说明                                                                                                                    | 类型      | 可选值       | 默认值          |
+|------------------------|-----------------------------------------------------------------------------------------------------------------------|---------- |-------------  |--------------|
+| highlight              | 控制是否高亮代码                                                                                                              | boolean  |   -    | true         |
+| language               | 代码语言，如 `typescript`。不填会自动判断。 [查看全部支持语言](https://github.com/highlightjs/highlight.js/blob/main/SUPPORTED_LANGUAGES.md) | string  |   -    | -            |
+| old-string             | 陈旧的字符串                                                                                                                | string  |   -    | -            |
+| new-string             | 新的字符串                                                                                                                 | string  |   -    | -            |
+| context                | 不同地方上下间隔多少行不隐藏                                                                                                        | number  |   -    | -            |
+| outputFormat           | 展示的方式                                                                                                                 | string  |   line-by-line，side-by-side    | line-by-line |
+| drawFileList           | 展示对比文件列表                                                                                                              | boolean | - | false        |
+| renderNothingWhenEmpty | 当无对比时不渲染                                                                                                              | boolean | - | false        |
+| diffStyle              | 差异风格, 单词级差异或字母级差异                                                                                                     | string | word, char | word         |
+| fileName               | 文件名                                                                                                                   | string | - | -            |
+| isShowNoChange         | 当无对比时展示源代码                                                                                                            | boolean | - | false        |
+| trim                   | 移除字符串前后空白字符                                                                                                           | boolean | - | false        |
+| language               | 对比的文本语言                                                                                                               | boolean | - | false        |
+| noDiffLineFeed         | 不 diff windows 换行符(CRLF)与 linux 换行符(LF)                                                                               | boolean | - | false        |
+| syncScroll             | 是否同步滚动                                                                                                                | boolean | - | true         |
 
 # 与 vue-code-diff 的不同
 
@@ -143,14 +144,22 @@ export default {
 
 # 变更记录
 
+### 0.3.11
+
+1. 增加 prop `syncScroll` 用于控制横向滚动条是否同步滚动
+
+### 0.3.10
+
+1. 修复了导出时的类型错误
+
 ### 0.3.9
 
 1. 调整 css，让引入的 highlight.js 的样式只在 .d2h-wrapper 内生效
 
 ### 0.3.8
 
-1. 样式调整，隐藏 css `d2h-file-header`，对齐 vue-code-diff 
-2. 添加 prop `noDiffLineFeed`，不 diff windows 换行符(CRLF)与 linux 换行符(LF) 
+1. 样式调整，隐藏 css `d2h-file-header`，对齐 vue-code-diff
+2. 添加 prop `noDiffLineFeed`，不 diff windows 换行符(CRLF)与 linux 换行符(LF)
 
 ### 0.3.7
 
diff --git a/README.md b/README.md
@@ -149,6 +149,14 @@ export default {
 
 # ChangeLog
 
+### 0.3.11
+
+1. Add prop `syncScroll` to control whether the horizontal scroll bar needs to be scrolled synchronously
+
+### 0.3.10
+
+1. Fixed type error when exporting
+
 ### 0.3.9
 
 1. Make the imported highlight.js style take effect only in `.d2h-wrapper` div
diff --git a/src/App.vue b/src/App.vue
@@ -45,6 +45,9 @@
     <a-form-item label="不 diff 换行符(noDiffLineFeed)">
       <a-switch v-model:checked="formState.noDiffLineFeed" />
     </a-form-item>
+    <a-form-item label="同步滚动(syncScroll)">
+      <a-switch v-model:checked="formState.syncScroll" />
+    </a-form-item>
     <a-form-item>
       <a-button type="link" @click="resetText">重置文本(reset text)</a-button>
     </a-form-item>
@@ -65,6 +68,7 @@
     :is-show-no-change="formState.isShowNoChange"
     :trim="formState.trim"
     :no-diff-line-feed="formState.noDiffLineFeed"
+    :sync-scroll="formState.syncScroll"
     @before-render="renderStart"
     @after-render="renderEnd" />
 </template>
@@ -97,7 +101,8 @@ export default defineComponent({
       renderNothingWhenEmpty: false,
       isShowNoChange: false,
       trim: false,
-      noDiffLineFeed: false
+      noDiffLineFeed: false,
+      syncScroll: true
     })
     const renderStart = () => {
       console.log('render start: ' + new Date().toLocaleString())
diff --git a/src/lib/v-code-diff/util.ts b/src/lib/v-code-diff/util.ts
@@ -83,22 +83,40 @@ export async function highlightElements (element: Element, props, ctx: SetupCont
   ctx.emit('after-render')
 }
 
-export function syncScroll (selector) {
+export function useSyncScroll (selector) {
   let active: HTMLElement = document.createElement('div')
-  document.querySelectorAll(selector).forEach(function (element) {
-    element.addEventListener('mouseenter', function (e) {
-      active = e.target
+
+  function onScroll (e) {
+    if (e.target !== active) return
+
+    document.querySelectorAll(selector).forEach(function (target) {
+      if (active === target) return
+
+      target.scrollTop = active.scrollTop
+      target.scrollLeft = active.scrollLeft
     })
+  }
 
-    element.addEventListener('scroll', function (e) {
-      if (e.target !== active) return
+  function onMouseenter (e) {
+    active = e.target
+  }
 
-      document.querySelectorAll(selector).forEach(function (target) {
-        if (active === target) return
+  function addSyncScroll () {
+    document.querySelectorAll(selector).forEach(function (element) {
+      element.addEventListener('mouseenter', onMouseenter)
+      element.addEventListener('scroll', onScroll)
+    })
+  }
 
-        target.scrollTop = active.scrollTop
-        target.scrollLeft = active.scrollLeft
-      })
+  function removeSyncScroll () {
+    document.querySelectorAll(selector).forEach(function (element) {
+      element.removeEventListener('mouseenter', onMouseenter)
+      element.removeEventListener('scroll', onScroll)
     })
-  })
+  }
+
+  return {
+    addSyncScroll,
+    removeSyncScroll
+  }
 }
diff --git a/src/lib/v-code-diff/v-code-diff.ts b/src/lib/v-code-diff/v-code-diff.ts
@@ -1,5 +1,5 @@
 import { defineComponent, isVue3, PropType, h, ref, watch, onUpdated, onMounted } from 'vue-demi'
-import { createHtml, highlightElements, syncScroll, useDebounceFn } from '@/lib/v-code-diff/util'
+import { createHtml, highlightElements, useDebounceFn, useSyncScroll } from '@/lib/v-code-diff/util'
 import './styles'
 
 export default defineComponent({
@@ -56,6 +56,10 @@ export default defineComponent({
     noDiffLineFeed: {
       type: Boolean,
       default: false
+    },
+    syncScroll: {
+      type: Boolean,
+      default: true
     }
   },
   emits: ['before-render', 'after-render'],
@@ -71,16 +75,19 @@ export default defineComponent({
       }
     }, 200)
     watch(props, cb, { deep: true, immediate: true })
-    onMounted(() => {
-      if (props.outputFormat === 'side-by-side') {
-        syncScroll('.d2h-file-side-diff')
+
+    const { addSyncScroll, removeSyncScroll } = useSyncScroll('.d2h-file-side-diff')
+    watch(() => props.syncScroll, (newVal, oldVal) => {
+      removeSyncScroll()
+      if (newVal) {
+        addSyncScroll()
       }
     })
-    onUpdated(() => {
-      if (props.outputFormat === 'side-by-side') {
-        syncScroll('.d2h-file-side-diff')
-      }
+
+    onMounted(() => {
+      addSyncScroll()
     })
+
     return {
       html
     }
