快捷導(dǎo)航

教你使用vue3寫Json-Preview的示例代碼

更新時(shí)間：2022年06月22日 14:34:01 作者：Jay·Chan

這篇文章主要介紹了用vue3寫了一個(gè)Json-Preview的相關(guān)知識(shí),引入后直接<json-preview?v-model="jsonData"></json-preview>就可以使用了，本文通過示例代碼給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

引入后直接<json-preview v-model="jsonData"></json-preview>就可以使用了。近期比較忙，代碼就不做調(diào)整了。

示例效果

index.vue 文件

<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>

index.sass 文件

.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

到此這篇關(guān)于用vue3寫了一個(gè)Json-Preview的文章就介紹到這了,更多相關(guān)vue3 Json-Preview內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: