vue-code-diff 代码对比组件

使用效果

 

 

使用方法

1. cnpm install vue-code-diff

2. 

<code-diff 
   class="center"
   :renderNothingWhenEmpty="true"       // 差异为空时不显示
   :old-string="oldJsonData"                    // 对比旧数据
   :new-string="newJsonData"                 // 对比新数据
   :context="10" 
   outputFormat="side-by-side"                // 展示方式，设置为分两边展示一边一个数据
/>

 

3. css样式配置

  .center {
    // 解决vue-code-diff对不齐和显示下拉标志问题
    max-height: 600px;
    overflow-y: auto;
    overflow-x: hidden;
    /* 样式穿透-起始行左右对齐，*/
    .d2h-code-side-line{
      height:15px;
    }
    code.hljs{
      padding: 0;
    }
    
    // 删除行统计显示
    .d2h-code-side-linenumber{
      display: none;
    }
    .d2h-code-side-line{
      padding: unset;
    }
    .d2h-code-line-ctn{
      width: unset;
    }

    // 删除第一行的统计结果
    .d2h-info {
      display: none;
    }
  }