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

monaco editor ：http://www.javashuo.com/article/p-nxgdqkuz-gw.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', {}); } }