Vue.js 3 的差异查看器插件 - vue-diff

Vue.js 3 的差异查看器插件 - vue-diff
插件名称 vue-diff
版本号 v1.1.2
发布时间 2021年6月6日
插件作者 hoiheart

一个 Vue.js 差异查看器插件,可用于比较两个代码片段之间的差异。

支持的语言:

  • css
  • xml: xml, html, xhtml, rss, atom, xjb, xsd, xsl, plist, svg
  • markdown: markdown, md, mkdown, mkd
  • javascript: javascript, js, jsx
  • json
  • plaintext: plaintext, txt, text
  • typescript: typescript, ts

安装和下载:

# NPM
$ npm i vue-diff --save

使用

1. 导入并注册差异查看器。

import VueDiff from 'vue-diff'
import 'vue-diff/dist/index.css'
app.use(VueDiff);

2. 将组件添加到模板中。

<Diff />

3. 可用的组件props。

mode: {
  type: String as PropType<Mode>,
  default: 'split' // or unified
},
theme: {
  type: String as PropType<Theme>,
  default: 'dark' // or light
},
language: {
  type: String,
  default: 'plaintext'
},
prev: {
  type: String,
  default: ''
},
current: {
  type: String,
  default: ''
},
inputDelay: {
  type: Number,
  default: 0
},
virtualScroll: {
  type: [Boolean, Object] as PropType<boolean|VirtualScroll>,
  default: false
}

4. 使用highlight.js扩展插件。

import yaml from 'highlight.js/lib/languages/yaml'
VueDiff.hljs.registerLanguage('yaml', yaml)

变更日志:

v1.1.2 (06/21/2021)

  • 错误修复:检测到更改后,虚拟滚动选项无法更改滚动事件。