Vue前端文本对比DIFF
介绍前端文本比对找了几个库: 分别是: CodeMirror、DiffMatchPatch、Mergely、vue-code-diff,最后选择用:vue-code-diff源码工程地址:DIFF安装yum install vue-code-diff使用方式import VueCodeDiff from 'vue-code-diff'export default {name...
·
介绍
前端文本比对找了几个库: 分别是: CodeMirror、DiffMatchPatch、Mergely、vue-code-diff,最后选择用:vue-code-diff
源码工程地址:DIFF
效果图
文本对比,两页显示效果:
文本对比,一页显示效果:
安装
npm install vue-code-diff
使用方式
import VueCodeDiff from 'vue-code-diff'
export default {
name: 'diff_index',
data: () => ({
old_value: "/*以下为演示内容,请添加您自己的内容 ~_~ */\n" ,
new_value: "/*以下为演示内容,请添加您自己的内容 ^_^ */\n",
context: 1000
}),
methods: {
render_side_by_side(h) {
return h('div', {}, [
h('div', {
staticClass: 'text-left text-tertiary font-14 text-weight-bold q-mt-md'
}, [
'两页显示对比结果,效果如下所示:'
]),
h(VueCodeDiff, {
props: {
oldString: this.old_value,
newString: this.new_value,
context: this.context,
outputFormat: 'side-by-side'
}
})
])
},
render_line_by_line(h) {
return h('div', {}, [
h('div', {
staticClass: 'text-left text-tertiary font-14 text-weight-bold q-mt-md'
}, [
'一页显示对比结果,效果如下所示:'
]),
h(VueCodeDiff, {
props: {
oldString: this.old_value,
newString: this.new_value,
context: this.context,
outputFormat: 'line-by-line'
}
})
])
},
},
render(h) {
return h('div', {
staticClass: 'q-pa-sm'
}, [
this.render_side_by_side(h),
this.render_line_by_line(h)
])
}
}
参数说明
参数 | 说明 | 类型 | 可选值 | 默认值 |
---|---|---|---|---|
old-string | 旧值 | String | - | - |
new-string | 新值 | String | - | - |
context | 不同地方上下间隔多少行不隐藏 | Number | - | - |
outputFormat | 展示方式 | String | line-by-line(一页显示),side-by-side(两页显示) | line-by-line |
插件地址:vue-code-diff
更多推荐
已为社区贡献11条内容
所有评论(0)