vue2-ace-editor 自定义提示

 

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,//只能补全
            })
        }