vue-code-diff-filter
TypeScript icon, indicating that this package has built-in type declarations

1.0.0 • Public • Published

vue-code-diff

代码比对展示 demo

安装

yarn add vue-code-diff

使用

<template>
  <div>
    <code-diff :old-string="oldStr" :new-string="newStr" :context="10" />
  </div>
</template>

import CodeDiff from 'vue-code-diff'
export default {
  components: {CodeDiff},
  data(){
    return {
      oldStr: 'old code',
      newStr: 'new code'
    }
  }
}

参数说明

参数 说明 类型 可选值 默认值
old-string 陈旧的字符串 string
new-string 新的字符串 string
context 不同地方上下间隔多少行不隐藏 number
outputFormat 展示的方式 string line-by-line,side-by-side line-by-line
drawFileList 展示对比文件列表 boolean - false
renderNothingWhenEmpty 当无对比时不渲染 boolean - false
diffStyle 每行中对比差异级别 string word, char word
fileName 文件名 string -
isShowNoChange 当无对比时展示源代码 boolean - false

效果展示

line-by-line

image

side-by-side

image

LICENSE

MIT

Readme

Keywords

Package Sidebar

Install

npm i vue-code-diff-filter

Weekly Downloads

0

Version

1.0.0

License

MIT

Unpacked Size

1.81 MB

Total Files

81

Last publish

Collaborators

  • lad_lad_lad