vue集成一个文本对比插件

最新推荐文章于 2025-06-30 12:25:16 发布

原创

最新推荐文章于 2025-06-30 12:25:16 发布 · 8.2k 阅读

12 ·

CC 4.0 BY-SA版权

文章标签：

#vue #文本对比

本文档将展示如何在Vue项目中集成一个文本对比插件。通过详细步骤解析，帮助开发者逐步实现文本对比功能，提供完整的HTML示例代码及Vue代码片段，确保可以直接使用。如有疑问，作者愿意提供帮助。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

话不多说先直接上文本对比代码让我们一步一步的把这个文本对比插件撸到vue中

这是文本对比源码现在开始撸了一波一波分析

<!doctype html>
<html>
<head>
    <title>文本比较工具</title>
    <style type="text/css">
        * {
            padding: 0px;
            margin: 0px;
        }

        html, body {
            overflow-y: hidden;
        }

        .edit_div {
            border: 1px solid #CCCCCC;
            overflow: auto;
            position: relative;
        }

        .edit_div textarea {
            resize: none;
            background: none repeat scroll 0 0 transparent;
            border: 0 none;
            width: 100%;
            height: 200px;
            overflow-y: scroll;
            position: absolute;
            left: 0px;
            top: 0px;
            z-index: 2;
            font-size: 18px;
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
        }

        .edit_div pre {
            overflow-y: scroll;
            white-space: pre-wrap;
            word-wrap: break-word;
            word-break: break-all;
            width: 100%;
            height: 200px;
            text-align: left;
            color: #ffffff;
            z-index: 1;
            font-size: 18px;
        }
    </style>
</head>
<body>
<table style="width:100%">
    <tr>
        <td style="width:50%">
            <div class="edit_div">
                <pre id="edit_pre_1">222222</pre>   //简单说一下 textarea不识别html代码 所以用 pre盒子做底层 来区分文本的不同之处
                <textarea id="edit_textarea_1" onscroll="test1_scroll()" oninput="textchange()"
                          onpropertychange="textchange()">1111</textarea> // 这里是一些事件 滚动时候发生的事件 文本发生改变时的事件 这些很明显都可以用vue里面的事件进行监听
            </div>
        </td>
        <td style="width:50%">
            <div class="edit_div">
                <pre id="edit_pre_2"></pre>
                <textarea id="edit_textarea_2" onscroll="test2_scroll()" oninput="textchange()"
                          onpropertychange="textchange()"></textarea>
            </div>
        </td>
    </tr>
</table>
<script type="text/javascript">
    function test1_scroll() {    //左右同步滚动
        document.getElementById("edit_pre_1").scrollTop = document.getElementById("edit_textarea_1").scrollTop;
        document.getElementById("edit_pre_2").scrollTop = document.getElementById("edit_pre_1").scrollTop;
        document.getElementById("edit_textarea_2").scrollTop = document.getElementById("edit_textarea_1").scrollTop;
    }
    function test2_scroll() {
        document.getElementById("edit_pre_2").scrollTop = document.getElementById("edit_textarea_2").scrollTop;
        document.getElementById("edit_pre_1").scrollTop = document.getElementById("edit_pre_2").scrollTop;
        document.getElementById("edit_textarea_1").scrollTop = document.getElementById("edit_textarea_2").scrollTop;
    }// 文本对比框的实时比较代码
    function textchange() {
        var op = eq({
            value1: document.getElementById("edit_textarea_1").value,
            value2: document.getElementById("edit_textarea_2").value
        });
        document.getElementById("edit_pre_1").innerHTML = op.value1 + "\r\n";
        document.getElementById("edit_pre_2").innerHTML = op.value2 + "\r\n";
    }
// 这段就很重要啦  文本对比的核心代码 有兴趣的同学可以看看 返回的是两个文本的html代码
    function eq(op) {
        if (!op) {
            return op;
        }
        if (!op.value1_style) {
            op.value1_style = "background-color:#FEC8C8;";
        }
        if (!op.value2_style) {
            op.value2_style = "background-color:#FEC8C8;";
        }
        if (!o