95ee84574b
* 修复系统工具-代码生成-预览功能，生成预览页面右侧出现双滚动条问题 (#124) Co-authored-by: shusf <shusf@asiainfo.com> * 底部遮挡 (#125) header 84px，footer 22px，94.5px会导致底部存在遮挡 * feat: 更新WangEditor 版本，支持v-model方式绑定 * feat: 修改组件页面，使用新版编辑器 * feat: 更新WangEditor 版本，支持v-model方式绑定 --------- Co-authored-by: shusufen <108729835+shusufen@users.noreply.github.com> Co-authored-by: shusf <shusf@asiainfo.com> Co-authored-by: Schwi <39186981+cyb233@users.noreply.github.com>
78 lines
1.5 KiB
Vue
78 lines
1.5 KiB
Vue
<template>
|
|
<div class="json-editor">
|
|
<textarea ref="textarea" />
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import CodeMirror from 'codemirror'
|
|
import 'codemirror/lib/codemirror.css'
|
|
// 替换主题这里需修改名称
|
|
import 'codemirror/theme/idea.css'
|
|
import 'codemirror/mode/clike/clike'
|
|
export default {
|
|
props: {
|
|
value: {
|
|
type: String,
|
|
required: true
|
|
},
|
|
height: {
|
|
type: String,
|
|
required: true
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
editor: false
|
|
}
|
|
},
|
|
watch: {
|
|
value(value) {
|
|
const editorValue = this.editor.getValue()
|
|
if (value !== editorValue) {
|
|
this.editor.setValue(this.value)
|
|
}
|
|
},
|
|
height(value) {
|
|
this.editor.setSize('auto', this.height)
|
|
}
|
|
},
|
|
mounted() {
|
|
this.editor = CodeMirror.fromTextArea(this.$refs.textarea, {
|
|
mode: 'text/x-java',
|
|
lineNumbers: true,
|
|
lint: true,
|
|
lineWrapping: true,
|
|
tabSize: 2,
|
|
cursorHeight: 0.9,
|
|
// 替换主题这里需修改名称
|
|
theme: 'idea',
|
|
readOnly: true
|
|
})
|
|
this.editor.setSize('auto', this.height)
|
|
this.editor.setValue(this.value)
|
|
},
|
|
methods: {
|
|
getValue() {
|
|
return this.editor.getValue()
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped>
|
|
.json-editor{
|
|
height: 100%;
|
|
margin-bottom: 10px;
|
|
}
|
|
.json-editor >>> .CodeMirror {
|
|
font-size: 14px;
|
|
font-weight:normal
|
|
}
|
|
.json-editor >>> .CodeMirror-scroll{
|
|
}
|
|
.json-editor >>> .cm-s-rubyblue span.cm-string {
|
|
color: #F08047;
|
|
}
|
|
</style>
|