1、概述

在element组件中使用vue-code-diff代码比对组件，在本案例中主要是比对json字符串信息，效果图如下所示。

 2、代码实现

• 引入组件

# 安装
npm install vue-code-diff
# 导入
import CodeDiff from 'vue-code-diff'
# 引入组件
components: { CodeDiff }

• 使用

      <el-dialog
        title="同步数据比对"
        :visible.sync="syncDataDiffDialog"
        width="55%"
        :close-on-click-modal="false"
      >
        <div>
          <CodeDiff
            class="center"
            :old-string="oldStrToCompare"
            :new-string="newStrToCompare"
            :context="10"
            outputFormat="side-by-side" />
        </div>
        <span slot="footer" class="dialog-footer">
          <el-button @click="syncDataDiffDialog = false">取 消</el-button>
          <el-button type="primary" @click="syncDataDiffDialog = false">确 定</el-button>
        </span>
      </el-dialog>

3、初始效果

代码实现后主要出现两点问题，第一点，左右高低不齐，第二点问题json出现下拉标志的符号，根本原因目前感觉是高亮引入组件版本的问题与当前项目无法兼容，但是无法解决。目前只能是在此基础上修改css解决两点问题。

 4、解决序号不齐和下拉标志解决办法如下

通过F12查看需要对其进行穿透处理，把指定的样式修改如下就可以了。

<style lang="scss" scoped>
.center {
  max-height: 600px;
  overflow-y: auto;
  overflow-x: hidden;
  // overflow-x: auto;
}
/* 样式穿透-起始行左右对齐，*/
.center>>>.d2h-code-side-line{
  height:15px;
}
.center>>>code.hljs{
  padding: 0;
}
</style>

5、vue-code-diff其他的参设置

官网：https://github.com/Shimada666/v-code-diff