monaco editor 實現自定義提示（sql為例）

monaco editor ：https://www.cnblogs.com/XHappyness/p/9414177.html

這里實現自己定義的提示：

.vue

<template>
  <div>
     <div id="container" ></div>
  </div>
</template>

.ts

import { Vue, Component, Watch } from "vue-property-decorator"
import * as monaco from 'monaco-editor';

@Component({

})

export default class Parent extends Vue {
    ...
    value = '初始sql語句'；
    monacoEditor;
    get hints() {
        let arr = []；
        .... //根據需求實時獲取提示項

        return arr;
     }
    creatMonacoEditor() {
        //創建
        this.monacoEditor = monaco.editor.create(document.getElementById('container'), {
            value: this.value,
            language: 'sql'
        });
        //提示項設值
        monaco.languages.registerCompletionItemProvider('sql', {
            provideCompletionItems: () => {
                return this.hints;
            }
        });

        //監聽變化
        this.monacoEditor.onDidChangeModelContent(e => {
            this.caretOffset = e.changes[0].rangeOffset;//獲取光標位置
            this.value= this.monacoEditor.getValue(); //使value和其值保持一致
        })
    }
    mounted() {
　　　　　　//  注意：要等container渲染成功才能monaco.editor.create
　　　　　　　this.creatMonacoEditor();
    }

    @Watch('hints')
    triggerSuggest(newVal) {
       // 當提示項非空時，觸發提示，能夠使提示項更新並顯示
        if (newVal.length > 0)
            this.monacoEditor.trigger('提示', 'editor.action.triggerSuggest', {});
    }
}