npm package: @qingbing/ts-v3-json-editor
Description: vite + ts + vue3 封装的 JsonEditor 插件
Author: qingbing
Latest version: 2.1.8

# JsonEditor 插件介绍

- [JsonEditor 插件介绍](#jsoneditor-插件介绍)
  - [1. 概要说明](#1-概要说明)
    - [1.1 地址](#11-地址)
    - [1.2 插件描述](#12-插件描述)
    - [1.3 重要依赖](#13-重要依赖)
    - [1.4 插件安装](#14-插件安装)
  - [2. 包说明](#2-包说明)
    - [2.1 属性说明](#21-属性说明)
    - [2.2 事件说明](#22-事件说明)
    - [2.3 实例暴露说明](#23-实例暴露说明)
  - [3. 示例](#3-示例)
    - [3.1 全局注册使用](#31-全局注册使用)
    - [3.2 模板组件使用](#32-模板组件使用)

## 1. 概要说明

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

### 1.1 地址

[https://gitee.com/duqingbing/ts-v3-package/tree/ts-v3-json-editor](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 插件安装

```bash
# yarn 安装
yarn add @qingbing/ts-v3-json-editor

# npm 安装
npm i @qingbing/ts-v3-json-editor
```

## 2. 包说明

### 2.1 属性说明

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


- options 详细说明

```ts
// vue3-ts-jsoneditor 插件的参数可以直接透传
type Mode = "text" | "tree" | "table";
interface JSONEditorOptions {
  readOnly?: boolean;
  indentation?: number | string;
  tabSize?: number;
  selection?: JSONEditorSelection;
  mode?: Mode;
  mainMenuBar?: boolean;
  navigationBar?: boolean;
  statusBar?: boolean;
  askToFormat?: boolean;
  escapeControlCharacters?: boolean;
  escapeUnicodeCharacters?: boolean;
  flattenColumns?: boolean;
  validator?: Validator;
  parser?: JSONParser;
  validationParser?: JSONParser;
  pathParser?: JSONPathParser;
  queryLanguagesIds?: QueryLanguageId[];
  queryLanguageId?: QueryLanguageId;
  onRenderValue?: OnRenderValue;
  onClassName?: OnClassName;
  onRenderMenu?: OnRenderMenu;
  height?: string | number;
  fullWidthButton?: boolean;
  darkTheme?: boolean;
}
```

### 2.2 事件说明

- 参考 vue3-ts-jsoneditor 插件

### 2.3 实例暴露说明

| 属性名 | 类型 |
| :----- | :--- |
| -      | 无   |

## 3. 示例
### 3.1 全局注册使用

- 一旦注册， `JsonEditor` 作为组件全局通用 
- 使用方法参考 [3.2 模板组件使用](#32-模板组件使用), 去掉组件导入的语句即可

```ts
// main.ts
import '@qingbing/ts-v3-json-editor/dist/style.css'
import { JsonEditorPlugin } from '@qingbing/ts-v3-json-editor'
app.use(JsonEditorPlugin, {
  name: 'JsonEditor',
  options: {}
})
```

### 3.2 模板组件使用

```vue
<template>
    <h1>Parent: {{ record }}</h1>
    <JsonEditor :options="options" v-model="record.data" />
    <JsonEditor :options="options2" v-model="record.data2" :disabled-fullscreen="disabledFullscreen" />
</template>

<script setup lang="ts">
import '@qingbing/ts-v3-json-editor/dist/style.css'
import type { TJsonEditorOptions } from "@qingbing/ts-v3-json-editor";
import { JsonEditor } from '@qingbing/ts-v3-json-editor' // 如果注册成了全局组件，这句将不再需要
import { reactive } from "vue";

const record = reactive({
    data: {
        array: [1, 2, 3],
        boolean: true,
        Null: null,
        number: 123,
        seconds: 0,
        object: { a: "b", c: "d" },
        string: "Hello World",
    },
    data2: {
        array: [1, 2, 3]
    },
});

const options: TJsonEditorOptions = {
    height: 500,
    mode: "text",
};
const options2: TJsonEditorOptions = {
    height: 400,
    mode: "text",
};
const disabledFullscreen = ref(true)
</script>
```