vue3.0实现jsoneditor组件

踩了很多坑最后写出来了，需要props里加属性自己加，css部分也是很关键的内容
引用后可以在父组件用class设置height
很多处理的灵感来源于vue2.0项目vue-json-editor的代码，原项目代码还是写的很精彩的
安装命令：npm install jsoneditor --save
原项目文档：https://github.com/josdejong/jsoneditor

<template><div><div class="json" /></div>
</template><script>
import JSONEditor from 'jsoneditor';export default {props: {name: String,modelValue: {type: [String, Number, Object, Array],default: () => {return {};}}},data() {return {jsonEditor: null,internalChange: false}},mounted() {this.init();},watch: {modelValue: {handler(json) {if (!this.internalChange) {this.setValue(json);}}}},methods: {init() {let self = this;this.jsonEditor = new JSONEditor(self.$el.querySelector(".json"), {mode: 'code',modes: ['code', 'view', 'tree'],indentation: 4,name: this.name,mainMenuBar: true,onModeChange() {// 去除作者信息if (document.getElementsByClassName('jsoneditor-poweredBy').item(0)) {document.getElementsByClassName('jsoneditor-poweredBy').item(0).remove();}},onChange() {self.internalChange = true;self.$emit('update:modelValue', self.jsonEditor.getText());// 防止双向绑定重复刷新数据self.$nextTick(function () {self.internalChange = false;});}}, self.modelValue);// 去除作者信息document.getElementsByClassName('jsoneditor-poweredBy').item(0).remove();},setValue(jsonStr) {if (this.jsonEditor) {this.jsonEditor.set(jsonStr ? JSON.parse(jsonStr) : '');}}}
};
</script><style>
@import '~jsoneditor/dist/jsoneditor.min.css';.json {height: 100%;
}.jsoneditor {border: thin solid #409EFF;
}.jsoneditor-menu {background-color: #409EFF;
}.ace-jsoneditor {min-height: 50px;
}
</style>

引入，省略import部分

<json-editor class="json" name="body" v-model="bodyJson"></json-editor>

vue3.0实现jsoneditor组件相关推荐

vue3.0（第九篇）vue3.0可用的组件库
1.Elemnet UI 推出Element Plus 源码地址 https://github.com/element-plus/element-plus 官方网站 https://element-p ...
html任务3 模拟滚动条,vue3系列：vue3.0自定义虚拟滚动条V3Scroll|vue3模拟滚动条组件...
/** * @Desc Vue3.0虚拟滚动条组件V3Scroll * @Time andy by 2021-01 * @About Q:282310962 wx:xy190310*/ props: ...
Vue3.0中emit的使用
文章目录一.emit是什么? 二.Vue 2.0和3.0的使用区别一.emit是什么? emit的主要作用是子组件可以通过使用 emit,让父组件监听到自定义事件 ,以及传递的参数二.Vue 2 ...
vue3.0中使用Element-plus默认英文组件修改为中文
vue3.0中使用Element-plus默认英文组件修改为中文修改方法说明:本方法Element-plus 1.0.2-beta.59 之前的版本可以,1.0.2-beta.59之后版本请看下一篇 ...
vue3.0 组件使用引用传值父传子子传父
vue3.0 组件使用引用传值父传子子传父组件的创建组件引入在html中使用组件传值父传子子接收参数子传父父接收参数组件的创建 1.将所需功能封装在components目录下 ...
Vue3.0实现原生高度可自定义菜单组件vue3-menus
vue3-menus Vue3.0 自定义右键菜单 Vue3.0 原生实现完全自定义右键菜单组件, 零依赖,可根据可视区域自动调节显示位置,可支持插槽完全重写每一项菜单项目地址 GitHub Git ...
vue3.0 组件传值
vue3.0组件传值子组件代码如下(示例): <template><p @click="handle">{{ test }}</p> < ...
【Vue3.0实战逐步深入系列】扩展投票功能基于elementui进行组件封装实现一个简单的问卷调查功能
[千字长文,熬夜更新,原创不易,多多支持,感谢大家] 前言小伙伴们大家好.在前面一偏文章中我们把投票功能进行了简单的改造:引入了axios第三方库并进行了二次封装用于模拟请求服务器数据.同时添加了一 ...
Vue3.0实践：使用Vue3.0做JSX(TSX)风格的组件开发
前言我日常工作都是使用React来做开发,但是我对React一直不是很满意,特别是在推出React Hooks以后. 不可否认React Hooks极大地方便了开发者,但是它又有非常多反直觉的地方, ...
vue3.0中找不到组件或者找不到对应的类型声明。怎么解决
vue3.0中找不到组件或者找不到对应的类型声明如何解决? 这里报错 .报错原因报错就是ts影响找不到组件模块或者找不到对应的类型声明 typescript 只能理解 .ts 文件,无法理解 . ...

vue3.0实现jsoneditor组件

vue3.0实现jsoneditor组件相关推荐

最新文章

热门文章