phpcms v9企业网站模板:蓝色电子科技公司网站模板,潍坊的网站建设,手游平台,重庆网站建设seo公司哪家好一、背景 之前在做录制回放平台的时候#xff0c;需要前端展示子调用信息#xff0c;子调用是一个请求列表数组结构#xff0c;jsoneditor对数组的默认展示结构是[0].[1].[2]..的方式#xff0c;为了达到如下的效果#xff0c;必须用到 onNodeName的钩子函数#xff0c;… 一、背景 之前在做录制回放平台的时候需要前端展示子调用信息子调用是一个请求列表数组结构jsoneditor对数组的默认展示结构是[0].[1].[2]..的方式为了达到如下的效果必须用到 onNodeName的钩子函数因此深入调研了下vue3如何集成jsoneditor 最后做出来的效果图 onNodeName的参考文档 https://github.com/josdejong/jsoneditor/blob/master/docs/api.md 二、参考方案 json-editor-vue3 感谢这位老哥的方案我看了下源码没有满足我的需要核心就是属性需要自己加因此我拿着他的代码改了下 三、代码实现 安装依赖 jsoneditor npm install --save jsoneditor jsoneditor是个开源的js的组件参考文档 https://github.com/josdejong/jsoneditor 编写组件 目录结构如下 vue3-json-editor.tsx: 其中options的定义是完全参考jsoneditor的api文档的具体需要什么功能自己去实现对应的options即可 import { ComponentPublicInstance, defineComponent, getCurrentInstance, onMounted, reactive, watch } from vue// ts-ignore// eslint-disable-next-line import/extensionsimport JsonEditor from jsoneditor;import jsoneditor/dist/jsoneditor.min.css;// eslint-disable-next-line import/prefer-default-exportexport const Vue3JsonEditor defineComponent({ props: { modelValue: [String, Boolean, Object, Array], showBtns: [Boolean], expandedOnStart: { type: Boolean, default: false }, navigationBar: { type: Boolean, default: true }, mode: { type: String, default: tree }, modes: { type: Array, default () { return [tree, code, form, text, view] } }, lang: { type: String, default: en }, onNodeName: { type: Function, default: (){} } }, setup (props: any, { emit }) { const root getCurrentInstance()?.root.proxy as ComponentPublicInstance const state reactive({ editor: null as any, error: false, json: {}, internalChange: false, expandedModes: [tree, view, form], uid: jsoneditor-vue-${getCurrentInstance()?.uid} }) watch( () props.modelValue as unknown as any, async (val) { if (!state.internalChange) { state.json val // eslint-disable-next-line no-use-before-define await setEditor(val) state.error false // eslint-disable-next-line no-use-before-define expandAll() } }, { immediate: true }) onMounted(() { //这个options的定义是完全参考jsoneditor的api文档的 const options { mode: props.mode, modes: props.modes, onChange () { try { const json state.editor.get() state.json json state.error false // eslint-disable-next-line vue/custom-event-name-casing emit(json-change, json) state.internalChange true emit(input, json) root.$nextTick(function () { state.internalChange false }) } catch (e) { state.error true // eslint-disable-next-line vue/custom-event-name-casing emit(has-error, e) } }, onNodeName(v: object) { // eslint-disable-next-line vue/custom-event-name-casing return props.onNodeName(v); }, onModeChange () { // eslint-disable-next-line no-use-before-define expandAll() }, navigationBar: props.navigationBar } state.editor new JsonEditor( document.querySelector(#${state.uid}), options, state.json ) // eslint-disable-next-line vue/custom-event-name-casing emit(provide-editor, state.editor) }) function expandAll () { if (props.expandedOnStart state.expandedModes.includes(props.mode)) { (state.editor as any).expandAll() } } function onSave () { // eslint-disable-next-line vue/custom-event-name-casing emit(json-save, state.json) } function setEditor (value: any): void { if (state.editor) state.editor.set(value) } return () { // ts-ignore // ts-ignore return ( div div id{state.uid} class{jsoneditor-vue}/div /div ) } }}) style.css .ace_line_group { text-align: left;}.json-editor-container { display: flex; width: 100%;}.json-editor-container .tree-mode { width: 50%;}.json-editor-container .code-mode { flex-grow: 1;}.jsoneditor-btns { text-align: center; margin-top: 10px;}.jsoneditor-vue .jsoneditor-outer { min-height: 150px;}.jsoneditor-vue div.jsoneditor-tree { min-height: 350px;}.json-save-btn { background-color: #20a0ff; border: none; color: #fff; padding: 5px 10px; border-radius: 5px; cursor: pointer;}.json-save-btn:focus { outline: none;}.json-save-btn[disabled] { background-color: #1d8ce0; cursor: not-allowed;}code { background-color: #f5f5f5;} index.ts export * from ./vue3-json-editor; 四、如何使用 template div classcontainer Vue3JsonEditor v-modeljson modeview :show-btnstrue :on-node-nameonNodeName / /div/templatescript langts setupimport {computed,} from vueimport {Vue3JsonEditor} from /components/json-editor;const props defineProps({ record: { type: Object, default() { return { request: undefined, }; }, },});const jsoncomputed((){ const {record} props; return record.subInvocations;});// eslint-disable-next-line consistent-returnconst onNodeName (node: { value: any; type: any}){ if (node.typeobject node.value.identity) { return node.value.identity; } return undefined;}/scriptscript langtsexport default { name: Invocations,};/scriptstyle scoped langless.container { padding: 0 20px 20px 20px;}/style 本文由 mdnice 多平台发布
