本文主角 ：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方法简述

更多详情请看

code-diff-html