0.0.1 • Published 2 years ago

my-json-editor v0.0.1

Weekly downloads
-
License
MIT
Repository
-
Last release
2 years ago

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" />

参数

NameTypeDescriptionDefault
modelValueObject要编辑的 json 值
optionsObjectjsoneditor 的 options,参考configuration-options
currentModeString当前编辑模式code
modeListArray可选的编辑模式列表"tree", "code", "form", "text", "view"
languageArray语言en

事件

NameDescription
update:modelValuejson 更新
changejson 更新
textSelectionChange参考configuration-options对应参数,参数有重写,第一个参数为编辑器的实例,后续参数与官方参数相同
selectionChange同上
focus同上
blur同上
colorPicker同上