vue2-ace-editor 自定义提示
template部分:<editor @init="editorInit"@input="changeData"@setCompletions="setCompletions":autoComplete=true:value='dataView'...
·
template部分:
<editor @init="editorInit"
@input="changeData"
@setCompletions="setCompletions"
:autoComplete=true
:value='dataView'
lang="json"
theme="chrome"></editor>
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 = [
{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)
}
}
}
}
</script>
源码改动:使用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 || false
require('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,//只能补全
})
}
更多推荐
已为社区贡献2条内容
所有评论(0)