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 是设置的数据，下文查看具体用法

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

     "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 表示权重，为数值，越大提示越靠前