@qingbing/ts-vue3-json-editor v2.0.3

ts-vue3-json-editor

• 2.0.0
  • 结构成型推送
• 2.0.1
  • 基本完成
    • 透传属性给 vue3-ts-jsoneditor
    • 不支持事件传递
• 2.0.2
  • 修复 mode 选项不能提示的问题
• 2.0.3
  • mode 设置为非必选

1. 功能说明

typescript 实现的封装 vue3-ts-jsoneditor, 方便使用。

2. 下载

npm i @qingbing/ts-vue3-json-editor

3. 使用

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

<script setup lang="ts">
import { reactive } from "vue";
import { JsonEditor, JSONEditorOptions } from "@qingbing/ts-vue3-json-editor";

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: JSONEditorOptions = {
  height: 500,
  mode: "text",
};
const options2: JSONEditorOptions = {
  height: 400,
  mode: "tree",
};
</script>