基于 Vue2.X/Vue3.X 项目引入 vue-code-diff/v-code-diff 代码差异插件并使用

1、Vue2.X的项目

npm i vue-code-diff@1.2.0

父页面：index.vue

<template>
  <div style="padding: 100px;">
    <CodeDiff />
  </div>
</template>

<script>
import CodeDiff from './components/codeDiff'

export default {
  components: {
    CodeDiff
  },
  data: () => ({

  }),
}
</script>

子组件：codeDiff.vue

<template>
  <div class="vue-code-diff">
    <code-diff
      :old-string="oldValue"
      :new-string="newValue"
      :context="10"
      outputFormat="side-by-side"
    />
  </div>
</template>

<script>
  import CodeDiff from 'vue-code-diff'

  export default {
    components: {
      CodeDiff
    },
    data: () => ({
      // 旧值
      // oldValue: 'Starting  ~',

      oldValue: 'Starting TornaApplication using Java 1.8.0_242 on 帅龍之龍 with PID 520.' +
                '吾，当成赤龍之霸王!沉入红莲炼狱，将真红之光辉指引天道！',

      // 新值
      newValue: 'Starting TornaApplication using Java 1.8.0_242 on 帅龍之龍 with PID 1314.' +
                'Finished Spring Data repository scanning in 36 ms. Found 0 LDAP repository interfaces.' +
                'Started TornaApplication in 4.848 seconds (JVM running for 5.829) ~'

      // newValue: 'Starting  ~'
    }),
    watch: {

    },
    created() {
      
    },
    methods: {
      /**
       * 设置新旧资源值方法句柄
       */
      handleSetResourceValues(oldValue, newValue) {
        this.oldValue = oldValue;
        this.newValue = newValue;
        console.log("setResourceValues =>", this.oldValue, this.newValue);
      }
    }
  };
</script>

<style lang="less" scoped>
  .vue-code-diff {
    margin: 0;
    padding: 0;

    /deep/ .d2h-wrapper {

      .d2h-file-wrapper {
        border: unset;
        border-radius: unset;
        margin-bottom: unset;

        .d2h-files-diff {
          display: flex;

          .d2h-file-side-diff {
            position: relative;
            overflow: hidden;
            background-color: #fee8e9;

            .d2h-code-wrapper {

              .d2h-diff-table {

                .d2h-diff-tbody {

                  tr {

                    // 设置表头的第2个单元格大小高度
                    td:nth-child(2).d2h-info {
                      width: 100%;
                      height: 15px;

                      .d2h-code-side-line {
                        height: 100%;
                      }
                    }

                    // 当单行溢出换行时，需要把行号的高度撑满
                    td.d2h-code-side-linenumber {
                      height: 100%;
                    }

                    // 删除代码的变更
                    td.d2h-del {
                      
                      .d2h-code-side-line {

                        .d2h-code-line-ctn {
                          
                          .hljs {
                            font-family: "Microsoft YaHei","微软雅黑";
                            height: auto;
                            font-size: 14px;
                            white-space: pre-line; // 代码换行
                          }
                        }
                      }
                    }

                    // 新增代码的变更
                    td.d2h-ins {
                      
                      .d2h-code-side-line {

                        .d2h-code-line-ctn {
                          
                          .hljs {
                            font-family: "Microsoft YaHei","微软雅黑";
                            height: auto;
                            font-size: 14px;
                            white-space: pre-line; // 单行溢出换行
                          }
                        }
                      }
                    }
                  }
                }
              }
            }
          }

          .d2h-file-side-diff + .d2h-file-side-diff {
            background-color: #dfd;
          }
        }
      }
    }
  }
</style>

2、Vue3.X的项目 

npm i v-code-diff@1.3.2

父页面：index.vue

<template>
  <div style="padding: 100px;">
    <CodeDiff />
  </div>
</template>

<script>
import CodeDiff from './components/codeDiff'

export default {
  components: {
    CodeDiff
  },
  data: () => ({

  }),
}
</script>

子组件：codeDiff.vue

<template>
  <div class="v-code-diff">
    <code-diff
      :old-string="oldValue"
      :new-string="newValue"
      :context="10"
      outputFormat="side-by-side"
    />
  </div>
</template>

<script>
  import { CodeDiff } from 'v-code-diff'

  export default {
    components: {
      CodeDiff
    },
    data: () => ({
      // 旧值
      // oldValue: 'Starting  ~',

      oldValue: 'Starting TornaApplication using Java 1.8.0_242 on 帅龍之龍 with PID 520.' +
                '吾，当成赤龍之霸王!沉入红莲炼狱，将真红之光辉指引天道！',

      // 新值
      newValue: 'Starting TornaApplication using Java 1.8.0_242 on 帅龍之龍 with PID 1314.' +
                'Finished Spring Data repository scanning in 36 ms. Found 0 LDAP repository interfaces.' +
                'Started TornaApplication in 4.848 seconds (JVM running for 5.829) ~'

      // newValue: 'Starting  ~'
    }),
    watch: {

    },
    created() {
      
    },
    methods: {
      /**
       * 设置新旧资源值方法句柄
       */
      handleSetResourceValues(oldValue, newValue) {
        this.oldValue = oldValue;
        this.newValue = newValue;
        console.log("setResourceValues =>", this.oldValue, this.newValue);
      }
    }
  };
</script>

<style lang="less" scoped>
  .v-code-diff {
    margin: 0;
    padding: 0;
  }
</style>

3、效果如下