教你使用vue3寫Json-Preview的示例代碼
更新時間:2022年06月22日 14:34:01 作者:Jay·Chan
這篇文章主要介紹了用vue3寫了一個Json-Preview的相關(guān)知識,引入后直接<json-preview?v-model="jsonData"></json-preview>就可以使用了,本文通過示例代碼給大家介紹的非常詳細,具有一定的參考借鑒價值,需要的朋友可以參考下
引入后直接<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寫了一個Json-Preview的文章就介紹到這了,更多相關(guān)vue3 Json-Preview內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
使用vite構(gòu)建vue3項目的實現(xiàn)步驟
通過本文,您可以了解如何使用Vue CLI創(chuàng)建Vue 3項目,配置Vite,利用其優(yōu)勢進行開發(fā),具有一定的參考價值,感興趣的可以了解一下2023-08-08
vue中進入詳情頁記住滾動位置的方法(keep-alive)
今天小編就為大家分享一篇vue中進入詳情頁記住滾動位置的方法(keep-alive),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2018-09-09
vue項目index.html中使用環(huán)境變量的代碼示例
在Vue3中使用環(huán)境變量的方式與Vue2基本相同,下面這篇文章主要給大家介紹了關(guān)于vue項目index.html中使用環(huán)境變量的相關(guān)資料,文中通過代碼介紹的非常詳細,需要的朋友可以參考下2024-02-02

