VUE插件 -- 文本对比

使用v-code-diff插件，可以方便地进行文本/代码对比，实现效果如下：

使用方法：

1. 下载 v-code-diff插件

yarn add v-code-diff

2. 在script标签中导入插件，并进行注册

import { CodeDiff } from v-code-diff

components: {
    CodeDiff
},

3. 在模板中使用插件

<code-diff
      :old-string="oldText"
      :new-string="newText"
/>

4. 绑定响应式数据并返回

import { ref } from 'vue'

const oldText = ref('abcdef')
const newText = ref('aaasui')

return{
    oldText,
    newText
}

完整demo如下：

<template>
  <div class="pe-error-wrapper">
    <code-diff
      :old-string="oldText"
      :new-string="newText"
      file-name="test.txt"
      output-format="side-by-side"
    />
  </div>
</template>

<style lang="scss" scoped>
// .pe-error-wrapper {
//   display: flex;
//   align-items: center;
//   justify-content: center;
//   min-height: 90vh;
//   font-size: 16px;
//   color: var(--color-text);
// }
</style>

<script lang="ts">
import { defineComponent, ref } from 'vue'
import { CodeDiff } from 'v-code-diff'

const sqlFormatter = require('sql-formatter/lib/sqlFormatter')

export default defineComponent({
  name: 'ErrorPageView',
  components: {
    CodeDiff
  },
  setup() {
    const oldText = ref('INSERT INTO `cd_test2` (`content`, `create_time`) VALUES (\'xxx1\', CURRENT_DATE);')
    const newText = ref('INSERT INTO `cd_test2` (`content`, `create_time`) VALUES (\'xxx\', CURRENT_DATE);')
    // oldText.value = sqlFormatter.format(oldText.value)
    // newText.value = sqlFormatter.format(newText.value)
    return {
      oldText,
      newText
    }
  },
})
</script>