本文主角 ：code-diff-html

npm地址：code-diff-html

先上图，效果如下：

code-diff-html使用说明

这是本人第一个npm包，如果有任何错误，就喊一句理解万岁！

1.一个能够实现gitlab的代码对比效果的工具

2.一个基于diff.js和diff2html封装的库，大大简化了使用，能够让你一分钟实现代码对比功能。

下载

npm i code-diff-html --save

使用

1.引入drawDiff方法

import { drawDiff } from 'code-diff-html'

2.定义一个dom元素

<div id="myDiffElement"></div>

3.执行drawDiff方法

drawDiff({
	fileName:'人物对比',
	oldObj:a,
	newObj:b,
	domId:'myDiffElement',
	options:{}
})

完整例子

import React from "react";
import { drawDiff } from 'code-diff-html'

const a = {
  "id": 1,
  "name":'小明',
  "age":18,
  "sex":'男'
}

const b = {
  "id": 2,
  "name":'小刚',
  "age":24,
  "sex":'男'
}
 
export default class APP extends React.Component {
  
  componentDidMount(){
    drawDiff({
      fileName:'人物对比',
      oldObj:a,
      newObj:b,
      domId:'myDiffElement',
      options:{
      	outputFormat:"side-by-side"
      }
    })
  }

  render() {
    return (
      <>
        <div id="myDiffElement"></div>
      </>
    );
  }
}

效果

drawDiff方法简述

参数	类型	说明	是否必须
fileName	string	文件名	否
oldObj	object	旧数据对象	是
newObj	object	新数据对象	是
domId	string	内容承载的dom节点id	是
options	object	展现框的配置项	否

更多详情请看

code-diff-html