JsonEditor 插件介绍

• JsonEditor 插件介绍
  • 1. 概要说明
    • 1.1 地址
    • 1.2 插件描述
    • 1.3 重要依赖
    • 1.4 插件安装
  • 2. 包说明
    • 2.1 属性说明
    • 2.2 事件说明
    • 2.3 实例暴露说明
  • 3. 示例
    • 3.1 全局注册使用
    • 3.2 模板组件使用

1. 概要说明

• 参考地址: https://github.com/bestkolobok/vue3-jsoneditor

1.1 地址

https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-json-editor

1.2 插件描述

vite + ts + vue3 封装的 JsonEditor 插件

1.3 重要依赖

• @qingbing/ts-v3-utils: ^2.0.15
• vue: ^3.4.21
• vue3-ts-jsoneditor: ^2.11.2

1.4 插件安装

1# yarn 安装
2yarn add @qingbing/ts-v3-json-editor
3
4# npm 安装
5npm i @qingbing/ts-v3-json-editor

2. 包说明

2.1 属性说明

属性名	类型	是否必需	默认值	意义
options	TJsonEditorOptions	否	{}	JsonEditor 的绑定参数, 参考 vue3-ts-jsoneditor 的绑定参数
modelValue	{jsonable}	否	""	JsonEditor 编辑的 json 数据， 值为任意可 json 化的内容
disabledFullScreen	Boolean	否	false	控制是否显示全屏按钮

• options 详细说明

1// vue3-ts-jsoneditor 插件的参数可以直接透传
2type Mode = "text" | "tree" | "table";
3interface JSONEditorOptions {
4  readOnly?: boolean;
5  indentation?: number | string;
6  tabSize?: number;
7  selection?: JSONEditorSelection;
8  mode?: Mode;
9  mainMenuBar?: boolean;
10  navigationBar?: boolean;
11  statusBar?: boolean;
12  askToFormat?: boolean;
13  escapeControlCharacters?: boolean;
14  escapeUnicodeCharacters?: boolean;
15  flattenColumns?: boolean;
16  validator?: Validator;
17  parser?: JSONParser;
18  validationParser?: JSONParser;
19  pathParser?: JSONPathParser;
20  queryLanguagesIds?: QueryLanguageId[];
21  queryLanguageId?: QueryLanguageId;
22  onRenderValue?: OnRenderValue;
23  onClassName?: OnClassName;
24  onRenderMenu?: OnRenderMenu;
25  height?: string | number;
26  fullWidthButton?: boolean;
27  darkTheme?: boolean;
28}

2.2 事件说明

• 参考 vue3-ts-jsoneditor 插件

2.3 实例暴露说明

属性名	类型
-	无

3. 示例

3.1 全局注册使用

• 一旦注册， JsonEditor 作为组件全局通用
• 使用方法参考 3.2 模板组件使用, 去掉组件导入的语句即可

1// main.ts
2import '@qingbing/ts-v3-json-editor/dist/style.css'
3import { JsonEditorPlugin } from '@qingbing/ts-v3-json-editor'
4app.use(JsonEditorPlugin, {
5  name: 'JsonEditor',
6  options: {}
7})

3.2 模板组件使用

1<template>
2    <h1>Parent: {{ record }}</h1>
3    <JsonEditor :options="options" v-model="record.data" />
4    <JsonEditor :options="options2" v-model="record.data2" :disabled-fullscreen="disabledFullscreen" />
5</template>
6
7<script setup lang="ts">
8import '@qingbing/ts-v3-json-editor/dist/style.css'
9import type { TJsonEditorOptions } from "@qingbing/ts-v3-json-editor";
10import { JsonEditor } from '@qingbing/ts-v3-json-editor' // 如果注册成了全局组件，这句将不再需要
11import { reactive } from "vue";
12
13const record = reactive({
14    data: {
15        array: [1, 2, 3],
16        boolean: true,
17        Null: null,
18        number: 123,
19        seconds: 0,
20        object: { a: "b", c: "d" },
21        string: "Hello World",
22    },
23    data2: {
24        array: [1, 2, 3]
25    },
26});
27
28const options: TJsonEditorOptions = {
29    height: 500,
30    mode: "text",
31};
32const options2: TJsonEditorOptions = {
33    height: 400,
34    mode: "text",
35};
36const disabledFullscreen = ref(true)
37</script>