json-editor-vue3
基于 jsoneditor
开发的vue3 json editor,支持全屏编辑,有完善的事件回调,可以在失去焦点时,对编辑器内容做校验。
安装
npm install json-editor-vue3
使用
全局引入
import Vue from 'vue'
import JsonEditorVue from 'json-editor-vue3'
Vue.use(JsonEditorVue)
组件引入
import JsonEditorVue from 'json-editor-vue3'
export default {
name: 'app',
components: {
JsonEditorVue
},
data() {
return {
data: {
"hello": "vue"
}
}
},
methods: {}
}
模板使用
<json-editor-vue 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 | 同上 |
公众号
欢迎关注作者公众号前端方程式
,如果您有任何问题,也可以通过该公众号联系作者。