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', {}); } }