1、引入 "vue2-ace-editor": "^0.0.15",
2、实例代码
<editor v-model="content" @init="editorInit" lang="text" style="overflow:scroll" :options="options"
theme="chrome"/>
import {decode} from 'js-base64';
export default { components: { editor: require('vue2-ace-editor') }, props: { fileId: {type: String}, filePath: {type: String}, data: {type: String} }, data() { return { content: '', options: { // enableBasicAutocompletion: true, // 启用基本自动完成 // enableSnippets: true, // 启用代码段 // enableLiveAutocompletion: true, // 启用实时自动完成 printMargin: false,//显示设置页边距 printMarginColumn: 30,//设置页边距 showPrintMargin: false, //去除编辑器里的竖线 highlightGutterLine: false,//高亮边线 // displayIndentGuides: false, // 显示参考线 enableEmmet: true, // 启用Emmet tabSize: 6, // 标签大小 fontSize: 14, // 设置字号 useWorker: true, // 使用辅助对象 enableMultiselect: true, // 选中多处 readOnly: true, // 是否只读 showFoldWidgets: true, // 显示折叠部件 fadeFoldWidgets: true, // 淡入折叠部件 wrap: true, //换行 animatedScroll: true//滚动动画 } } }, methods: { init() { if (this.data === undefined) { this.getXml() } else { this.content = this.data } }, editorInit: function () { require('brace/ext/language_tools') //language extension prerequsite... require('brace/mode/html') require('brace/mode/javascript') //language require('brace/mode/less') require('brace/theme/chrome') require('brace/snippets/javascript') //snippet }, async getXml() { const {data} = await this.http.post('fileView/getXml', { fileId: this.fileId, filePath: this.filePath, }) if (data.success) { this.content = decode(data.data) } } }, computed: { listenChange() { const {fileId, filePath} = this return {fileId, filePath} }, }, watch: { listenChange() { this.getXml() } } }
3、引用组件
<ace v-else-if="fileType==='xmlType'" style="height: 100%;width: 100%" :fileId="{currentNode.id}"/>
或者
<ace :data="data"/>
