Vue 中JSON或代码对比的插件和工具

先看效果

实现方案

// 1、安装依赖
"vue-diff": "^1.2.4"

///2、main.ts 注册组件
import VueDiff from 'vue-diff';
import 'vue-diff/dist/index.css';

app.use(VueDiff);


///3、页面使用组件
<template>
  <el-dialog title="对比 ">
    <Diff
      mode="split"
      theme="light"
      language="json"
      :prev="oldStr"
      :current="newStr"
      style="height: 500px; margin-top: 20px; overflow-y: auto"
    />
  </el-dialog>
</template>

<script setup>

const obj = {
  room_rule: {
    player_limit: 4,
    hand_ready: 2,
    limit_same_ip: 1,
    game_srcj: 0,
    continue_game: 0,
    start_left_time: 10,
    share_gps: 2,
    yu_yin: 0,
    name: {
      nameStr: "张三",
      level: "大师",
      info: {
        name: "张三",
        desc: "这是个人描述",
        sub: {
          name: "张三",
          desc: "这是个人描述",
        },
      },
    },
    room_name: "欢乐2048",
    room_desc: "无房卡,房卡,金币",
  },
};

const obj1 = {
  room_rule: {
    player_limit: 4,
    hand_ready: 2,
    limit_same_ip: 1,
    game_srcj: 0,
    start_left_time: 10,
    type: 0,
    share_gps: 2,
    yu_yin: 0,
    name: {
      nameStr: "张三",
      level: "大师",
      info: {
        name: "张三000",
        desc: "这是个人描述",
        sub: {
          name: "张三111111",
          desc: "这是个人描述33333",
        },
      },
    },
  },
};

const oldStr = JSON.stringify(obj, null, 2);
const newStr = JSON.stringify(obj1, null, 2);
</script>

<style lang='scss' scoped>
</style>

实现方案

// 1、安装依赖
"vue-diff": "^1.2.4"

///2、main.ts 注册组件
import VueDiff from 'vue-diff';
import 'vue-diff/dist/index.css';

app.use(VueDiff);


///3、页面使用组件
<template>
  <el-dialog title="对比 ">
    <Diff
      mode="split"
      theme="light"
      language="json"
      :prev="oldStr"
      :current="newStr"
      style="height: 500px; margin-top: 20px; overflow-y: auto"
    />
  </el-dialog>
</template>

<script setup>

const obj = {
  room_rule: {
    player_limit: 4,
    hand_ready: 2,
    limit_same_ip: 1,
    game_srcj: 0,
    continue_game: 0,
    start_left_time: 10,
    share_gps: 2,
    yu_yin: 0,
    name: {
      nameStr: "张三",
      level: "大师",
      info: {
        name: "张三",
        desc: "这是个人描述",
        sub: {
          name: "张三",
          desc: "这是个人描述",
        },
      },
    },
    room_name: "欢乐2048",
    room_desc: "无房卡,房卡,金币",
  },
};

const obj1 = {
  room_rule: {
    player_limit: 4,
    hand_ready: 2,
    limit_same_ip: 1,
    game_srcj: 0,
    start_left_time: 10,
    type: 0,
    share_gps: 2,
    yu_yin: 0,
    name: {
      nameStr: "张三",
      level: "大师",
      info: {
        name: "张三000",
        desc: "这是个人描述",
        sub: {
          name: "张三111111",
          desc: "这是个人描述33333",
        },
      },
    },
  },
};

const oldStr = JSON.stringify(obj, null, 2);
const newStr = JSON.stringify(obj1, null, 2);
</script>

<style lang='scss' scoped>
</style>