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>