vue2-ace-editor|vue2-ace-editor 自定义提示
【vue2-ace-editor|vue2-ace-editor 自定义提示】
template部分：
scripts部分：
import editor from 'vue2-ace-editor'
import 'brace/ext/language_tools'export default {
name: 'BodyJsonEdit',
components: {
editor
},
props: {
dataView: String,
readOnly: Boolean
},
data () {
return {
}
},
methods: {
editorInit: function (ed) {
require('brace/mode/json')
require('brace/theme/chrome')
require('brace/ext/language_tools')
if (this.readOnly) {
ed.setReadOnly(true)
}
},
changeData: function (value) {
this.dataView = value
console.log(value)
},
setCompletions (editor, session, pos, prefix, callback) {
var data = https://www.it610.com/article/[
{caption:'code', meta: '返回值', value: 'code'},
{caption: 'message', meta: '返回值', value: 'message'},
{caption: '@name', meta: 'mock字段：姓名', value: '@name'},
{caption: '@phone', meta: 'mock字段：电话', value: '@phone'}
]
if (prefix.length === 0) {
return callback(null, [])
} else {
return callback(null, data)
}
}
}
}
源码改动：使用vue-cli脚手架时，文件目录为（node_modules/vue2-ace-editor/index.js）
mounted: function () {
var _this = this//插入该行，直接使用this会报错
var vm = this;
var lang = this.lang||'text';
var theme = this.theme||'chrome';
var autoComplete = this.autoComplete || falserequire('brace/ext/emmet');
var editor = vm.editor = ace.edit(this.$el);
this.$emit('init',editor);
editor.$blockScrolling = Infinity;
editor.setOption("enableEmmet", true);
editor.getSession().setMode('ace/mode/'+lang);
editor.setTheme('ace/theme/'+theme);
editor.setValue(this.value,1);
this.contentBackup = this.value;
// 插入以下代码块
if (autoComplete) {
var staticWordCompleter = {
getCompletions: function (editor, session, pos, prefix, callback) {
_this.$emit('setCompletions', editor, session, pos, prefix, callback)
}
}
editor.completers = [staticWordCompleter]editor.setOptions({
enableBasicAutocompletion: true,
enableSnippets: true,
enableLiveAutocompletion: true,//只能补全
})
}
推荐阅读
- SpringBoot调用公共模块的自定义注解失效的解决
- python自定义封装带颜色的logging模块
- 列出所有自定义的function和view
- 呼市首大医院温馨提示（男人有啥也不能有“qian”）
- Spring|Spring Boot 自动配置的原理、核心注解以及利用自动配置实现了自定义 Starter 组件
- 自定义MyAdapter
- Android自定义view实现圆环进度条效果
- Flutter自定义view|Flutter自定义view —— 闯关进度条
- mysql提示无法找到句饼_找不到数据库启动句柄
- js保留自定义小数点