vue2-brace-editor自定义提示和重置提示

需求说明

使用MySQL模式的提示，可以提示SQL关键字，但是，往往写SQL时我们需要提示库和表的字段，分析之后发现有addCompleter方法可以自定义提示，但是在改变库后，以往库的表的提示会存在，需要清除，于是在源码中添加了flag来判断是否时清除。

改造步骤

1. 下载vue2-brace-editor 源码包，进入文件夹， npm i 下载所需依赖
2. 在 Ace.component.vue文件的 methods方法中添加如下代码

setCustomPrompts(flag, data){
      let lt = ace.acequire('ace/ext/language_tools')
      if(flag){
        lt.addCompleter({
                getCompletions: function(editor, session, pos, prefix, callback){
                  if(prefix.length === 0){
                    return callback(null, []);
                  }else {
                    return callback(null, data)
                  }
                }
              })
      }else{
        let {textCompleter, keyWordCompleter, snippetCompleter} = lt;
        lt.setCompleters([textCompleter, keyWordCompleter, snippetCompleter])
      }
    },

• flag 是表示是否设置，为 false 时会重置编辑框的提示
• data 是设置的数据，下文查看具体用法

3. 完成后，使用打包指令输出对应的包

"scripts": {
 "build": "yarn run build:lib && yarn run build:umd && yarn run build:umd:min",
 "build:lib": "babel src --out-dir lib",
 "build:umd": "webpack src/index.js dist/vue-ace.js --config webpack.config.dev.js",
 "build:umd:min": "webpack src/index.js dist/vue-ace.min.js --config webpack.config.prod.js",
 "clean": "rimraf lib dist"
},

使用方法

1. 引入打包文件后，具体封装可参考百度
2. 在封装的组件上可通过this.$refs['你的编辑器ref'] 获取实例调用 setCustomPrompts传入参数设置或清除(flag 为 false 时为清除)；如

this.$refs['MyAceEditor'].setCustomPrompts(flag, data);

3. data的格式如下

let data = [
  {meta: '提示字段', caption: '提示字段', value: '提示字段', score: 5},
]

• score 表示权重，为数值，越大提示越靠前