教你使用vue3写Json-Preview的示例代码

<template>
  <div v-if="isObject" class="json-preview">
    <span v-if="!!parentKey"><span class="json-preview-key">"{{ parentKey }}"</span> : </span>
    <span style="color:#2c3e50">{</span>
    <div class="json-preview-object-block">
      <div v-for="(item,index) in jsonValue">
        <span v-if="typeof item.value === 'string' ">
          <span class="json-preview-key">"{{ item.key }}"</span> :
          <span class="json-preview-string-value">"{{ item.value }}"</span><span
            v-if="index != (jsonValue.length-1)">,</span>
        </span>
        <span v-if="typeof item.value === 'number' ">
          <span class="json-preview-key">"{{ item.key }}"</span> :
          <span class="json-preview-number-value">{{
              item.value
            }}</span><span v-if="index != (jsonValue.length-1)"><span v-if="index != (jsonValue.length-1)">,</span>
        </span>
        </span>
        <span v-if="typeof item.value === 'boolean' ">
          <span class="json-preview-key">"{{ item.key }}"</span> :
          <span class="json-preview-bol-value">{{ item.value }}</span><span
            v-if="index != (jsonValue.length-1)">,</span>
        </span>
        <span v-if="typeof item.value === 'object'">
          <json-preview :parent-key="item.key" :model-value="item.value"></json-preview>
        </span>
      </div>
    </div>
    <span style="color:#2c3e50">}</span>
  </div>
  <div v-else>
    <span v-if="!!parentKey"><span class="json-preview-key">"{{ parentKey }}"</span> : </span>
    <span style="color:#2c3e50">[</span>
    <div class="json-preview-object-block">
      <div v-for="(item,index) in jsonValue">
        <span v-if="typeof item === 'string' ">
          <span class="json-preview-string-value">"{{ item }}"</span><span v-if="index != (jsonValue.length-1)">,</span>
        </span>
        <span v-if="typeof item === 'number' ">
          <span class="json-preview-number-value">{{ item }}</span><span v-if="index != (jsonValue.length-1)">,</span>
        </span>
        <span v-if="typeof item === 'boolean' ">
          <span class="json-preview-bol-value">{{ item }}</span><span v-if="index != (jsonValue.length-1)">,</span>
        </span>
        <span v-if="typeof item === 'object'">
          <json-preview :model-value="item"></json-preview>
        </span>
      </div>
    </div>
    <span style="color:#2c3e50">]</span>
  </div>
</template>
<script lang="ts">
import {computed, defineComponent, reactive, toRefs} from 'vue'
import './index.sass'

export default defineComponent({
  name: 'json-preview',
  props: {
    modelValue: {
      type: [String, Array, Object],
      default: ''
    },
    parentKey: {
      default: ''
    },
    paddingLeft: {
      default: 0
    }
  },
  setup(props) {
    const jsonValue = computed(() => {
      if (!!!props.modelValue) {
        return {}
      }
      if (typeof props.modelValue === 'string') {
        let value = JSON.parse(props.modelValue)
        let jsonValue = []
        for (let key in value) {
          jsonValue.push({
            key: key,
            value: value[key],
          })
        }
        return jsonValue
      }
      if (typeof props.modelValue === 'object' && !(props.modelValue instanceof Array)) {
        let jsonValue = []
        for (let key in props.modelValue) {
          jsonValue.push({
            key: key,
            value: props.modelValue[key],
          })
        }
        return jsonValue
      }
      return props.modelValue
    })
    const state = reactive({
      jsonValue,
      isObject: computed(() => {
        return !(props.modelValue instanceof Array)
      })
    })
    return {
      ...toRefs(state),
    }
  }
})
</script>

.json-preview
  font-size: 20px
  font-weight: 400

  &-object-block
    margin: 5px 0 5px 2px
    border-left: dotted 1px
    padding-left: 30px

    .json-preview-key
      color: purple

    .json-preview-number-value
      color: #29b8db

    .json-preview-string-value
      color: #0dbc79

    .json-preview-bol-value
      color: #c678dd