引入后直接<json-preview v-model="jsonData"></json-preview>就可以使用了。近期比较忙，代码就不做调整了。
示例效果
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到此这篇关于用vue3写了一个Json-Preview的文章就介绍到这了,更多相关vue3 Json-Preview内容请搜索编程网以前的文章或继续浏览下面的相关文章希望大家以后多多支持编程网！
