You're Invited:Meet the Socket Team at BlackHat and DEF CON in Las Vegas, Aug 4-6.RSVP
Socket
Book a DemoInstallSign in
Socket

json-editor-vue3

Package Overview
Dependencies
Maintainers
1
Versions
12
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

json-editor-vue3

[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url]

1.0.4
npmnpm
Version published
Weekly downloads
1.2K
15.9%
Maintainers
1
Weekly downloads
 
Created
Source

json-editor-vue3

NPM version npm download

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

参数

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同上

公众号

欢迎关注作者公众号,如果您有任何问题,也可以通过该公众号联系作者。

Keywords

json-editor-vue3

FAQs

Package last updated on 29 Oct 2021

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts