zoukankan      html  css  js  c++  java
  • vue-code-diff

    Vue中格式化对比json串插件

    安装

    yarn add vue-code-diff

    npm install vue-code-diff

    使用

    <template>
      <div>
        <code-diff :old-string="oldStr" :new-string="newStr" :context="10" />
      </div>
    </template>
    
    import CodeDiff from 'vue-code-diff'
    export default {
      components: {CodeDiff},
      data(){
        return {
          oldStr: 'old code',
          newStr: 'new code'
        }
      },

      mounted() {
        this.getgrouplist();
      },
      methods: {

        getgrouplist() {

          let oldJSON = {

                      measures: [
                          {
                              metric: 'coverage测试一下',
                              value: '0.0',
                              periods: [{ index: 1, value: '0.0' }],
                              component: '     <br/ > com.umetrip.msg:AirlinesAbnormalTickets',
                          },
                          {
                              metric: 'coverage',
                              value: '0.0',
                              periods: [{ index: 1, value: '0.0' }],
                              component: 'com.umetrip.etd:AirportDelayReason',
                          },
                      ],

        }


        let newJSON = {

                      measures: [
                          {
                              metric: 'coverage小改动',
                              value: '0.0',
                              periods: [{ index: 2, value: '0.1' }],
                              component: 'com.umetrip.msg:AirlinesAbnormalTickets',
                          },
                          {
                              metric: 'coverage',
                              value: '0.0',
                              periods: [{ index: 1, value: '0.0' }],
                              component: 'com.umetrip.etd:AirportDelayReason',
                          },
                      ],

         }

         this.oldStr = JSON.stringify(oldJSON, null, 4);
         this.newStr = JSON.stringify(newJSON, null, 4);
        },
      }

    }

    参数说明

    参数说明类型可选值默认值
    old-string 陈旧的字符串 string
    new-string 新的字符串 string
    context 不同地方上下间隔多少行不隐藏 number
    outputFormat 展示的方式 string line-by-line,side-by-side line-by-line
    drawFileList 展示对比文件列表 boolean - false
    renderNothingWhenEmpty 当无对比时不渲染 boolean - false
    diffStyle 每行中对比差异级别 string word, char word
    fileName 文件名 string -  
    isShowNoChange 当无对比时展示源代码 boolean - false

    效果展示

    line-by-line

    image

    side-by-side

    image

     

  • 相关阅读:
    ElasticSearch关闭重启命令
    解决使用驱动器中的光盘之前需要将其格式化
    mac利用Synergy操作多台电脑
    一次真实的蓝屏分析 ntkrnlmp.exe
    JS字符串false转boolean
    启明星会议室预定系统更新日志-通用版
    利用Visual Studio 2013 开发微软云Windows Azure配置指南(针对中国大陆)
    利用Bootstrap+Avalonjs+EntityFramework 开发ASP.NET WebForm应用程序(上)
    启明星会议室系统与Office365集成说明
    jQuery中attr和prop方法的区别说明
  • 原文地址:https://www.cnblogs.com/gluncle/p/14971152.html
Copyright © 2011-2022 走看看