vue 项目中 文件对比
刚开始是用的 vue-code-diff
安装
npm install vue-code-diff
使用
<code-diff v-if="oldValue&&newValue" :old-string="oldValue" :new-string="newValue" :context="10" outputFormat="side-by-side" /> // js代码 import CodeDiff from 'vue-code-diff' components: { CodeDiff }, data() { return { oldValue: null, newValue: null, } }, getText() { this.axios({}).then((res) => { this.oldValue = res.data.old this.newValue = res.data.value }) },
但是当后台接口数据大的时候, 页面会响应不过来
后面换成了 DiffMatchPatch
<template> <div class="diff zy-content"> <div id="view"></div> </div> </template> <script> import CodeMirror from 'codemirror' import 'codemirror/lib/codemirror.css' import 'codemirror/addon/merge/merge.js' import 'codemirror/addon/merge/merge.css' import DiffMatchPatch from 'diff-match-patch' window.diff_match_patch = DiffMatchPatch window.DIFF_DELETE = -1 window.DIFF_INSERT = 1 window.DIFF_EQUAL = 0 export default { name: 'diff', props: ['params'], data() { return { oldValue: null, newValue: null, } }, watch: { params: { handler: function (val) { if (val && val.old) { this.getText(val) } }, immediate: true, deep: true, }, }, methods: { initUI() { if (!this.oldValue || !this.newValue) return let target = document.getElementById('view') target.innerHTML = '' CodeMirror.MergeView(target, { value: this.oldValue, //上次内容 origLeft: null, orig: this.newValue, //本次内容 lineNumbers: true, //显示行号 mode: 'text/html', highlightDifferences: true, connect: 'align', readOnly: true, //只读 不可修改 }) }, getText(val) { this.axios({val}).then((res) => { this.oldValue = res.data.old this.newValue = res.data.value }) }, }, } </script>
标签:code,val,res,vue,DiffMatchPatch,oldValue,import,diff From: https://www.cnblogs.com/yang5726685/p/17104186.html