Security News
tea.xyz Spam Plagues npm and RubyGems Package Registries
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
json-editor-vue3
Advanced tools
[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url]
Readme
基于 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 | Type | Description |
---|---|---|
update:modelValue | (json: Object) => void | json 更新 |
change | (json: Object) => void; | json 更新 |
textSelectionChange | (editor:Editor, start: number, end: number, text: string) => void; | 选择文本时触发的回调函数 |
selectionChange | (editor:Editor, start: number, end: number) => void; | 选择节点时触发的回调函数 |
focus | (editor:Editor, target: HTMLElement) => void; | 获取焦点 |
blur | (editor:Editor, target: HTMLElement) => void; | 时区焦点 |
colorPicker | (editor:Editor, parent: any, color: string, onChange: any) => void; | 当用户点击颜色时触发回调函数 |
validationError | (editor:Editor, errors: ValidationError[]) => void; | 如果发现任何类型的错误,则会使用错误数据调用此回调 |
jsoneditor does not provide an export named 'default'
这是因为vite对commonjs兼容性太差,导致无法引入jsoneditor
,可以使用@originjs/vite-plugin-commonjs
插件解决。
// vite.config.js
import { viteCommonjs } from '@originjs/vite-plugin-commonjs'
export default defineConfig({
plugins: [vue(),viteCommonjs()],
})
Vite的 官方文档 也有提到:Pre-bundle them to improve page loading speed and convert CommonJS / UMD modules to ESM.所以不需要这个plugin,不过得直接在项目源代码里 import 'jsoneditor' 才会转换。
参考 issue #4
欢迎关注作者公众号前端方程式
,如果您有任何问题,也可以通过该公众号联系作者。
json-editor-vue3 的文档和代码完全开源,如果该项目有帮助到你的开发工作,你可以捐赠json-editor-vue3的研发工作,捐赠无门槛,哪怕是一杯可乐也好。
FAQs
[![NPM version][npm-image]][npm-url] [![npm download][download-image]][download-url]
The npm package json-editor-vue3 receives a total of 925 weekly downloads. As such, json-editor-vue3 popularity was classified as not popular.
We found that json-editor-vue3 demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
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.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.
Security News
UnitedHealth Group disclosed that the ransomware attack on Change Healthcare compromised protected health information for millions in the U.S., with estimated costs to the company expected to reach $1 billion.