Vue3+ TS + ElementPlus 文本比对

此代码不只能够 文本对比，如果是json 还能在输入框格式化 用的是 Vue3 TS 组合式写法

效果图

使用方法

首先安装 v-code-diff

▼
shell
复制代码
npm install v-code-diff

TextDiff.vue

▼
ts
复制代码
<template>
    <h1 style="text-align: center;">比较数据</h1>
    <div class="input-area">
        <div class="input-container">
            <el-input type="textarea" :rows="10" v-model="oldStrInput" placeholder="输入旧数据"></el-input>
        </div>
        <div class="input-container">
            <el-input type="textarea" :rows="10" v-model="newStrInput" placeholder="输入新数据"></el-input>
        </div>
        <div class="button-container">
            <el-button @click="compareData">比较数据</el-button>
            <el-popconfirm width="220" confirm-button-text="确认" cancel-button-text="取消" @confirm="reset"
                :icon="InfoFilled" icon-color="#626AEF" title="确认要重置吗">
                <template #reference>
                    <el-button>重置</el-button>
                </template>
            </el-popconfirm>
        </div>
    </div>
    <CodeDiff class="center" :old-string="oldStrToCompare" :new-string="newStrToCompare" :drawFileList="true"
        :context="1000" outputFormat="side-by-side" />
</template>

<script setup lang="ts">
import { ref, reactive, computed, watch } from 'vue'
// import { CodeDiff } from 'v-code-diff'
import { ElMessage } from 'element-plus'
import { InfoFilled } from '@element-plus/icons-vue'

const jsonFlag = ref(false)

const oldStr = reactive([] as any);
const newStr = reactive([] as any);
const oldStrInput = ref('')
const newStrInput = ref('')
// 定义一个响应式对象用于保存解析后的 JSON 数据
const jsonOldData = reactive({});
const jsonNewData = reactive({});

// 监听 obj 的变化，并尝试将其解析为 JSON 对象
watch(oldStrInput, (newValue) => {
    try {
        const parsedData = JSON.parse(newValue);
        oldStrInput.value = JSON.stringify(parsedData, null, 2)
        Object.assign(jsonOldData, parsedData);
    } catch (error) {
        // 如果解析失败，则清空 jsonData 或者保持原样
        Object.assign(jsonOldData, {});
    }
});

watch(newStrInput, (newValue) => {
    try {
        const parsedData = JSON.parse(newValue);
        newStrInput.value = JSON.stringify(parsedData, null, 2)
        Object.assign(jsonNewData, parsedData);
    } catch (error) {
        // 如果解析失败，则清空 jsonData 或者保持原样
        Object.assign(jsonNewData, {});
    }
});

const oldStrToCompare = computed(() => {
    if (jsonFlag.value) {
        return JSON.stringify(oldStr.value, null, 2)
    } else {
        return oldStr.value
    }
})

const newStrToCompare = computed(() => {
    if (jsonFlag.value) {
        return JSON.stringify(newStr.value, null, 2)
    } else {
        return newStr.value
    }
})

function compareData() {
    if (!oldStrInput.value || !newStrInput.value) {
        ElMessage.error("请输入要比较的数据");
    } else {
        try {
            // oldStr
            oldStr.value = JSON.parse(oldStrInput.value);
            newStr.value = JSON.parse(newStrInput.value);
            jsonFlag.value = true
        } catch (error) {
            oldStr.value = oldStrInput.value;
            newStr.value = newStrInput.value;
            jsonFlag.value = false
        }
    }

}
function reset() {
    oldStrInput.value = ''
    newStrInput.value = ''
    oldStr.value = []
    newStr.value = []
}

</script>

<style scoped>
.input-area {
    display: flex;
    justify-content: center;
}

.input-container {
    flex: 1;
    margin: 0 10px;
}

.button-container {
    margin-top: 20px;
}

.input-box {
    width: 100%;
}
</style>

使用

在想要的页面里 引入刚刚的vue文件即可

也可以直接访问 TextDiff.vue

▼
ts
复制代码
<script setup lang="ts">
import TextDiff from '../components/TextDiff.vue'
</script>

<template>
  <main>
    <TextDiff />
  </main>
</template>