0.0.2 • Published 2 months ago
ceel-json-editor-vue3 v0.0.2
JsonEditor
Vue3 JSON online editor developed based on JSONeditor. 基于 jsoneditor 开发的 vue3 json在线编辑器。
Fully compatible with all functions of JSONEDITOR, and supports Vue3 syntax.
完全兼容 jsoneditor 所有功能,并且支持 vue3 语法。
Support all configurations of JSONEDITOR, simple
支持 jsoneditor 的所有配置, 简单的配置方式。
More flexible, support custom configuration.
更加灵活, 支持自定义配置。
Install
npm install ceel-json-editor-vue3
# or
yarn add ceel-json-editor-vue3
# or
pnpm add ceel-json-editor-vue3
Use
Global import
import Vue from 'vue'
import JsonEditorVue from 'ceel-json-editor-vue3'
Vue.use(JsonEditorVue)
Local introduction
import JsonEditor from 'ceel-json-editor-vue3'
Parameter description
Attributes | Type | Default Value | Description |
---|---|---|---|
v-model | - | - | - |
height | string | 100% | height |
width | string | 100% | width |
option | object | - | options |
Configuration item
Attributes | Type | Default Value | Description |
---|---|---|---|
mode | string | 'code' | Edit mode, optional value:'code'、'tree'、'form' |
onChange | function | - | Value change event |
....
Example
<script setup lang="ts">
import { ref } from 'vue'
import JsonEditor from 'ceel-json-editor-vue3'
// Set default value
const c = ref(`{"abd":121212123,"abc":1999999998}`)
/**
* For all configuration items, see:
* 请查看 api 文档
* https://github.com/josdejong/jsoneditor/blob/master/docs/api.md#configuration-options
*/
const option = {
mode: 'code', // Override default configuration
onChange: (v: string) => { // Add change event
console.log(v)
},
}
</script>
<template>
<JsonEditor height="500px" v-model="c" :option="option" />
</template>