Json-Editor는 CodeMirrorr 기반입니다 . json-lint의 Lint 기반 .
오래된 규칙은 먼저 효과 그림에 온다
구현 단계를 살펴 보겠습니다.
1. CodeMirrorr, jsonlint 설치
npm install codemirror
npm install jsonlint
2. Json-Editor 컴포넌트 작성
다음 위치에 새 JsonEditor 폴더 및 인덱스 파일을 생성합니다.
인덱스 파일 의 전체 내용은 다음과 같습니다.
<template>
<div class="json-editor">
<textarea ref="textarea" />
</div>
</template>
<script>
import CodeMirror from 'codemirror'
import 'codemirror/addon/lint/lint.css'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/rubyblue.css'
require('script-loader!jsonlint')
import 'codemirror/mode/javascript/javascript'
import 'codemirror/addon/lint/lint'
import 'codemirror/addon/lint/json-lint'
export default {
name: 'JsonEditor',
/* eslint-disable vue/require-prop-types */
props: ['value'],
data() {
return {
jsonEditor: false
}
},
watch: {
value(value) {
const editorValue = this.jsonEditor.getValue()
if (value !== editorValue) {
this.jsonEditor.setValue(JSON.stringify(this.value, null, 2))
}
}
},
mounted() {
// CodeMirror.fromTextArea()中第一个参数是DOM元素,而且必须是textarea元素;第二个参数是可选配置项
this.jsonEditor = CodeMirror.fromTextArea(this.$refs.textarea, {
lineNumbers: true,
mode: 'application/json',
gutters: ['CodeMirror-lint-markers'],
theme: 'rubyblue',
lint: 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())
})
},
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;
}
.json-editor >>> .cm-s-rubyblue span.cm-string {
color: #F08047;
}
.addbtn{
margin-bottom: 15px;
margin-left: 30px;
}
</style>
3. json-editor 구성 요소를 사용하여 자신의 논리를 구현합니다. 내 자신의 비즈니스 코드를 넣지 않을 것입니다. 다음은 참조를위한 작은 데모입니다.
<template>
<div class="components-container">
<div class="editor-container">
<json-editor ref="jsonEditor" v-model="value" />
</div>
</div>
</template>
<script>
import JsonEditor from '@/components/JsonEditor'
const jsonData = '[{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"CORN"}],"name":""},{"items":[{"market_type":"forexdata","symbol":"XAUUSD"},{"market_type":"forexdata","symbol":"XAGUSD"},{"market_type":"forexdata","symbol":"AUTD"},{"market_type":"forexdata","symbol":"AGTD"}],"name":"贵金属"},{"items":[{"market_type":"forexdata","symbol":"CORN"},{"market_type":"forexdata","symbol":"WHEAT"},{"market_type":"forexdata","symbol":"SOYBEAN"},{"market_type":"forexdata","symbol":"SUGAR"}],"name":"农产品"},{"items":[{"market_type":"forexdata","symbol":"UKOIL"},{"market_type":"forexdata","symbol":"USOIL"},{"market_type":"forexdata","symbol":"NGAS"}],"name":"能源化工"}]'
export default {
name: 'JsonEditorDemo',
components: {
JsonEditor },
data() {
return {
value: JSON.parse(jsonData)
}
}
}
</script>
<style scoped>
.editor-container{
position: relative;
height: 100%;
}
</style>
https://github.com/PanJiaChen/vue-element-admin/, 훌륭한 백그라운드 통합 시스템을 제공 해주신 Mr. Pan에게 감사드립니다. 필요한 경우 가서 살펴볼 수 있습니다.