快捷導(dǎo)航

vue3使用vue-diff工具來(lái)比較數(shù)據(jù)差異

更新時(shí)間：2024年11月08日 09:51:42 作者：?團(tuán)子?

這篇文章主要為大家詳細(xì)介紹了vue3如何使用vue-diff工具來(lái)比較數(shù)據(jù)差異,文中的示例代碼講解詳細(xì),感興趣的小伙伴可以跟隨小編一起學(xué)習(xí)一下

1.安裝vue-diff

npm i vue-diff

2.main.js中全局注冊(cè)

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="請(qǐng)輸入JSON"></el-input>
                    <el-input clearable v-model="formParams.textarea2" style="width: 50vw;" class="ml10"
                        :autosize="{ minRows: 10, maxRows: 20 }" type="textarea" placeholder="請(qǐng)輸入需要比較的JSON"></el-input>
                </div>
                <div class="mt20">
                    <el-dropdown>
                        <el-button type="primary">
                            選擇數(shù)據(jù)格式<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">
                    對(duì)比預(yù)覽
                </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.說(shuō)明

vue3中沒(méi)有diff算法，不能使用diff插件，需要用vue-diff或者其他插件

6.補(bǔ)充

項(xiàng)目地址：https://gitcode.com/gh_mirrors/vu/vue-diff/overview

通過(guò)language屬性來(lái)選擇數(shù)據(jù)的格式，以下是數(shù)據(jù)格式

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

到此這篇關(guān)于vue3使用vue-diff工具來(lái)比較數(shù)據(jù)差異的文章就介紹到這了,更多相關(guān)vue3 vue-diff比較數(shù)據(jù)差異內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: