1.安装vue-diff
npm i vue-diff
2.main.js中全局注册
import VueDiff from "vue-diff";
import "vue-diff/dist/index.css";app.use(VueDiff)
3.使用
<template><div class="contain-page"><el-scrollbar height="100vh"><el-card><div class="display-between"><el-input clearable v-model="formParams.textarea1" style="width: 50vw;" class="mr10":autosize="{ minRows: 10, maxRows: 20 }" type="textarea" placeholder="请输入JSON"></el-input><el-input clearable v-model="formParams.textarea2" style="width: 50vw;" class="ml10":autosize="{ minRows: 10, maxRows: 20 }" type="textarea" placeholder="请输入需要比较的JSON"></el-input></div><div class="mt20"><el-dropdown><el-button type="primary">选择数据格式<el-icon class="el-icon--right"><arrow-down /></el-icon></el-button><template #dropdown><el-dropdown-menu><el-dropdown-item @click="language='json'">json格式</el-dropdown-item><el-dropdown-item @click="language='text'">text格式</el-dropdown-item></el-dropdown-menu></template></el-dropdown><el-button type="primary" plain @click="formParams = {}" class="ml20">清空</el-button></div></el-card><el-card class="mt20"><div class="title">对比预览</div><Diff mode="split" theme="light" :language="language" :prev="formParams.textarea1":current="formParams.textarea2" style="height: calc(100% - 50px); width: 100%; overflow: scroll" /></el-card></el-scrollbar></div>
</template>
<script setup>
import { computed, ref } from 'vue';const bool = computed(() => formParams.value.textarea1 === '' || formParams.value.textarea2 === '')
const language = ref("json")
const formParams = ref({textarea1: "",textarea2: ""
})
</script>
4.效果
5.说明
vue3中没有diff算法,不能使用diff插件,需要用vue-diff或者其他插件
6.补充
项目地址:https://gitcode.com/gh_mirrors/vu/vue-diff/overview
通过language属性来选择数据的格式,以下是数据格式
css
xml
:xml
,html
,xhtml
,rss
,atom
,xjb
,xsd
,xsl
,plist
,svg
markdown
:markdown
,md
,mkdown
,mkd
javascript
:javascript
,js
,jsx
json
plaintext
:plaintext
,txt
,text
typescript
:typescript
,ts