1.0.6 • Published 4 years ago
log-diff v1.0.6
🏆 log detail compare!
import React from 'react';
import GitHubButton from 'react-github-btn';
export default () => (
<div>
<div
style={{
display: 'flex',
justifyContent: 'center',
alignItems: 'center',
marginBottom: 16,
}}
>
<GitHubButton
href="https://github.com/fridaydream/log-diff"
data-color-scheme="no-preference: light; light: light; dark: light;"
data-size="large"
data-show-count="true"
aria-label="Star fridaydream/log-diff on GitHub"
>
Star
</GitHubButton>
<div
style={{
margin: '0 8px',
}}
/>
<GitHubButton
href="https://github.com/fridaydream/log-diff/issues"
data-color-scheme="no-preference: light; light: light; dark: light;"
data-size="large"
data-show-count="true"
aria-label="Issue fridaydream/log-diff on GitHub"
>
Issue
</GitHubButton>
</div>
</div>
);
API
log-diff 基于 antd 进行日志详情对比,参考 antd 的 form 表单。对后台返回的 2 种数据类型进行对比,支持嵌套和组合的方式对比。
# 安装log-diff
npm i log-diff -S
// LogDiff注入初始值
<LogDiff
data={{
before: {},
after: {},
constants: {},
}}
></LogDiff>
子组件 | 描述 | 属性 | 属性类型 |
---|---|---|---|
LogDiff.Input | 文本比较 | label:标签 name:嵌套的参数 | label:string name:数组和多维数组 |
LogDiff.Image | 图片比较 | label:标签 name:嵌套的参数 | label:string name:数组和多维数组 |
LogDiff.Radio | 映射比较 | label:标签 name:嵌套的参数 | label:string name:数组 |