教你使用vue3寫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)文章
在vue中實現(xiàn)表單驗證碼與滑動驗證功能的代碼詳解
在Web應用程序中,表單驗證碼和滑動驗證是常見的安全機制,用于防止惡意攻擊和機器人攻擊,本文將介紹如何使用Vue和vue-verify-code庫來實現(xiàn)表單驗證碼和滑動驗證功能,需要的朋友可以參考下2023-06-06Vue項目前后端聯(lián)調(diào)(使用proxyTable實現(xiàn)跨域方式)
這篇文章主要介紹了Vue項目前后端聯(lián)調(diào)(使用proxyTable實現(xiàn)跨域方式),具有很好的參考價值,希望對大家有所幫助。一起跟隨小編過來看看吧2020-07-07Vue中使用 ElementUi 的 el-select 實現(xiàn)全選功能(思路詳解
在開發(fā)中,有一個需求是 選項組件中使用到一個 全選的功能,特在這記錄下實現(xiàn)的方法,方便后續(xù)的查閱,以及方便大家查閱借鑒,對vue ElementUi 全選功能感興趣的朋友一起看看吧2024-02-02