my-json-editor
基于 jsoneditor 开发的 vue3 json editor,支持全屏编辑,有完善的事件回调,可以在失去焦点时,对编辑器内容做校验。
json-editor-vue3
参考json-editor-vue3实现,加入 vite 打包压缩,将 jsoneditor 集成打包,减少需要自主安装 jsoneditor 的工作量。
项目地址
依赖
- Vue 3.0.0+
- jsoneditor
安装方式
pnpm install my-json-editor
全局引入方式
//全局引入
import Vue from 'vue';
import JsonEditor from 'my-json-editor';
const app = createApp(App);
app.use(JsonEditor).mount('#app'); //使用方式:<JsonEditor></JsonEditor>
局部引入方式
//局部引入
import JsonEditor from 'my-json-editor';
模板使用
<json-editor class="editor" v-model="data" />
参数
Name | Type | Description | Default |
---|---|---|---|
modelValue | Object | 要编辑的 json 值 | |
options | Object | jsoneditor 的 options,参考configuration-options | |
currentMode | String | 当前编辑模式 | code |
modeList | Array | 可选的编辑模式列表 | ["tree", "code", "form", "text", "view"] |
language | Array | 语言 | en |
事件
Name | Description |
---|---|
update:modelValue | json 更新 |
change | json 更新 |
textSelectionChange | 参考configuration-options对应参数,参数有重写,第一个参数为编辑器的实例,后续参数与官方参数相同 |
selectionChange | 同上 |
focus | 同上 |
blur | 同上 |
colorPicker | 同上 |