vue中使用mergely.js

1.安装mergely.js、codemirror、jquery

cnpm install mergely

cnpm install codemirror

cnpm install jquery

2.配置vue.config.js

configureWebpack: {plugins: [new webpack.ProvidePlugin({$: 'jquery',jQuery: 'jquery',CodeMirror: 'codemirror'})],resolve: {alias: {'mergely':      path.join(__dirname, 'node_modules', 'mergely'),'CodeMirror':   path.join(__dirname, 'node_modules', 'codemirror'),'jQuery':       path.join(__dirname, 'node_modules', 'jquery'),'$':            path.join(__dirname, 'node_modules', 'jquery')}},},

3.使用mergely

<template><div class="mergely-full-screen-8"><div class="mergely-resizer"><div @click="saveDiff">下载对比文件</div><div id="mergely"></div></div></div>
</template><script>
import 'codemirror/lib/codemirror.css'
import 'codemirror/lib/codemirror.js'
import 'mergely/lib/mergely.css'
import 'mergely/lib/mergely.js'export default {data() {return {}},mounted() {// 渲染diff界面$(document).ready(() => {$('#mergely').mergely({sidebar: false,lhs: (setValue) => {setValue('the quick red fox\njumped over the hairy dog')},rhs: (setValue) => {setValue('the quick brown fox\njumped over the lazy dog')},})})},methods: {// 实现diff文件差异内容下载saveDiff() {let a = $('#mergely');var n = a.mergely('diff') // 获得对比差异数据let key = '文件名'// 创建a标签，下载diff文件let aHref = document.createElement('a');aHref.setAttribute('href','data:application/stream;base64,' + window.btoa(unescape(encodeURIComponent(n))));aHref.setAttribute('target','_blank');aHref.setAttribute('text','clickme');aHref.setAttribute('id',key);aHref.setAttribute('download', key + '.diff');document.body.appendChild(aHref);aHref.click();aHref.remove();},
}
</script>