vue配合element-ui设置查看表单的JSON数据

由于是演示，所以全局引用了element-ui。核心是格式化JSON的函数getJsonData。配合一些样式设置，标记出对应的数据类型。

// 处理json数据，采用正则过滤出不同类型参数
getJsonData (json) {
  if (typeof json !== 'string') {
    json = JSON.stringify(json, undefined, 2)
  }
  json = json
    .replace(/&/g, '&')
    .replace(/</g, '<')
    .replace(/>/g, '>')
  return json.replace(
    /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\\-]?\d+)?)/g,
    function (match) {
      var cls = 'number'
      if (/^"/.test(match)) {
        if (/:$/.test(match)) {
          cls = 'key'
        } else {
          cls = 'string'
        }
      } else if (/true|false/.test(match)) {
        cls = 'boolean'
      } else if (/null/.test(match)) {
        cls = 'null'
      }
      return '<span class="' + cls + '">' + match + '</span>'
    }
  )
}

下面是全部代码，为了不让样式出现污染问题，设置了scoped。但是element-ui的样式貌似和scoped的有些冲突。dialog的自定义样式属性没有生效，只能使用深度选择器来解决了。或者去掉scoped，就怕出现样式污染。

<template>
  <div>
    <div>
      <el-row>
        <el-col :span="12">
          <!-- 表单 -->
          <div>
            <el-form label-width="80px">
              <el-form-item label="JSON数据">
                <el-input
                  v-model="input"
                  placeholder="请输入内容"
                  size="small"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
        </el-col>

        <!-- 查看JSON格式按钮 -->
        <el-col :span="4">
          <el-button type="primary" @click="getJson">查看JSON</el-button>
        </el-col>
      </el-row>
    </div>

    <!-- dialog -->
    <el-dialog
      title="JSON信息"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose"
      center
      class="json-dialog"
    >
      <pre v-html="showJson" class="json-box"></pre>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data () {
    return {
      dialogVisible: false,
      input: `{  
        "resultcode":"200",  
        "reason":"成功的返回",  
        "result":{  
        "company":"顺丰",  
        "com":"sf",  
        "no":"575677355677",  
        "list":[  
            {  
            "datetime":"2020-06-25 10:44:05",  
            "remark":"已收件",  
            "zone":"台州市"  
            },  
            {  
            "datetime":"2020-06-25 11:05:21",  
            "remark":"快件在 台州 ,准备送往下一站 台州集散中心",  
            "zone":"台州市"  
            }  
        ],  
        "status":1  
        },  
        "error_code":0  
        }`,
      showJson: null
    }
  },
  methods: {
    handleClose (done) {
      this.$confirm('确认关闭？')
        .then(_ => {
          done()
        })
        .catch(_ => {})
    },
    getJson () {
      this.dialogVisible = true
      const json = JSON.parse(this.input)
      this.showJson = this.getJsonData(json)
    },
    // 处理json数据，采用正则过滤出不同类型参数
    getJsonData (json) {
      if (typeof json !== 'string') {
        json = JSON.stringify(json, undefined, 2)
      }
      json = json
        .replace(/&/g, '&')
        .replace(/</g, '<')
        .replace(/>/g, '>')
      return json.replace(
        /("(\\u[a-zA-Z0-9]{4}|\\[^u]|[^\\"])*"(\s*:)?|\b(true|false|null)\b|-?\d+(?:\.\d*)?(?:[eE][+\\-]?\d+)?)/g,
        function (match) {
          var cls = 'number'
          if (/^"/.test(match)) {
            if (/:$/.test(match)) {
              cls = 'key'
            } else {
              cls = 'string'
            }
          } else if (/true|false/.test(match)) {
            cls = 'boolean'
          } else if (/null/.test(match)) {
            cls = 'null'
          }
          return '<span class="' + cls + '">' + match + '</span>'
        }
      )
    }
  }
}
</script>

<style lang="less" scoped>
.json-dialog {
 /deep/ .json-box {
    .string {
      color: green;
    }
    .number {
      color: darkorange;
    }
    .boolean {
      color: blue;
    }
    .null {
      color: magenta;
    }
    .key {
      color: red;
    }
  }
}
</style>