将如下代码封装成jsoneditor组件
<template>
<div class="json-editor">
<el-row style="height: 100%;overflow-y: auto;">
<textarea ref="codemirror"/>
</el-row>
<slot></slot>
</div>
</template>
<script>
// 引入CodeMirror和基础样式
import CodeMirror from "codemirror";
import "codemirror/lib/codemirror.css";
// JSON代码高亮需要由JavaScript插件支持
import "codemirror/mode/javascript/javascript.js";
// 选择IDEA主题样式,还有其他很多主题可选
import "codemirror/theme/idea.css";
// 支持使用Sublime快捷键
import "codemirror/keymap/sublime.js";
// 搜索功能的依赖
import "codemirror/addon/dialog/dialog.js";
import "codemirror/addon/dialog/dialog.css";
// 支持搜索功能
import "codemirror/addon/search/search";
import "codemirror/addon/search/searchcursor.js";
// 支持各种代码折叠
import "codemirror/addon/fold/foldgutter.css";
import "codemirror/addon/fold/foldcode.js";
import "codemirror/addon/fold/foldgutter.js";
import "codemirror/addon/fold/brace-fold.js";
import "codemirror/addon/fold/comment-fold.js";
// 支持代码区域全屏功能
import "codemirror/addon/display/fullscreen.css";
import "codemirror/addon/display/fullscreen.js";
// 支持括号自动匹配
import "codemirror/addon/edit/matchbrackets.js";
import "codemirror/addon/edit/closebrackets.js";
// 支持代码自动补全
import "codemirror/addon/hint/show-hint.css";
import "codemirror/addon/hint/show-hint.js";
import "codemirror/addon/hint/anyword-hint.js";
// 行注释
import "codemirror/addon/comment/comment.js";
// JSON错误检查
import "codemirror/addon/lint/lint.css";
import "codemirror/addon/lint/lint.js";
// 需要依赖全局的jsonlint,不是很优雅
import "codemirror/addon/lint/json-lint.js";
//及时自动更新,配置里面也需要设置autoRefresh为true
import 'codemirror/addon/display/autorefresh';
// 引入jsonlint
import jsonlint from "jsonlint-mod";
window.jsonlint = jsonlint;
export default {
name: "jsoneditor",
/* eslint-disable vue/require-prop-types */
props: {
value: [String, Number, Object, Array],
readOnly: [Boolean],
},
data() {
return {
jsoneditor: false
};
},
// 监听是否数据改变,随时更新json数据
watch: {
value(value) {
// console.log(value);
const editorValue = this.jsoneditor.getValue();
if (value !== editorValue) {
this.jsoneditor.setValue(JSON.stringify(this.value, null, 2));
}
this.jsoneditor.refresh()
},
},
mounted() {
// CodeMirror的配置项,搜官网看这里的配置项配置
this.jsoneditor = CodeMirror.fromTextArea(this.$refs.codemirror, {
mode: "application/json", // 接受的类型,json xml....
smartIndent: true, // 是否智能缩进
styleActiveLine: true, // 当前行高亮
lineNumbers: true, // 是否显示行数
indentUnit: 2, // 缩进单位,默认2
gutters: [
"CodeMirror-linenumbers",
"CodeMirror-foldgutter",
"CodeMirror-lint-markers", // CodeMirror-lint-markers是实现语法报错功能
],
lint: true,
//lineWrapping: true, // 自动换行
matchBrackets: true, // 括号匹配显示
autoCloseBrackets: true, // 输入和退格时成对
readOnly: this.readonly, // 只读
foldGutter: true,
autoRefresh: true
});
this.jsoneditor.setValue(JSON.stringify(this.value, null, 2));
this.jsoneditor.on("change", cm => {
this.$emit("changed", cm.getValue());
// this.$emit('input', cm.getValue())
// 编辑json框里面的内容可以时刻监听到值,通过cm.getValue()获取到
});
},
methods: {
getValue() {
return this.jsoneditor.getValue();
},
}
};
</script>
<style scoped>
.json-editor {
height: 100%;
position: relative;
}
.json-editor >>> .CodeMirror {
height: auto;
min-height: 300px;
}
.json-editor >>> .CodeMirror-scroll {
min-height: 300px;
}
</style>
可以使用如下方式调用
<jsoneditor ref="jsoneditor" v-model="jsonValue">
<el-row type="flex" justify="center" style="margin-top: 10px">
<el-button type="primary" @click="onjsonSave" size="mini">保存</el-button>
</el-row>
</jsoneditor>
通过定义的getValue获取json值
onjsonSave(){
let value = this.$refs.jsoneditor.getValue()
if (this.jsonValue !== value) {
this.jsonValue = value;
}
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。