Use vue-code-diff in element-vue to solve the problem of misalignment and display of drop-down flags

1 Overview

Use the vue-code-diff code comparison component in the element component. In this case, it mainly compares json string information. The rendering is as shown below.

 2. Code implementation

• Introduce components

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

• use

      <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. Initial effect

There are two main problems after the code is implemented. The first point is that the left and right are uneven. The second point is that the symbol of the drop-down mark appears in json. The root cause currently seems to be that the issue of highlighting the component version is inconsistent with the current project. Compatible, but unable to resolve. Currently, we can only modify the css on this basis to solve two problems.

 4. The solution to the problem of uneven serial numbers and drop-down marks is as follows:

Viewing through F12 requires penetration processing. Just modify the specified style as follows.

<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. Other parameter settings of vue-code-diff

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