首页 > Vue >

monaco-editor代码提示registerCompletionItemProvider数据重复问题

时间: 作者:admin 浏览:

monaco-editor的代码提示都知道是使用以下代码:

monaco.languages.registerCompletionItemProvider('javascript', {
    provideCompletionItems:function(model, position){
        .......
        return { 
            suggestions: [{
                label: "显示的名称",
                detail: "说明",
                insertText: "实际插入的代码",
                kind: 6
            }]
        }
    }
})

仅此一个方法,找了很久没找到别的方法设置代码提示;

monaco编辑器是在elementUI的弹窗中使用的,关闭弹窗再次打开,代码提示会出现重复数据,打开多几次,代码提示里全是重复数据;
一开始尝试:

this.editor.dispose()

发现没有效果,多次调试发现是弹窗重复渲染导致重复注册,provideCompletionItems方法多次执行,导致重复添加了相同的数据;最后的解决办法是将注册方法的返回结果保存起来,在vue组件销毁时执行dispose()方法:

import * as monaco from "monaco-editor"
export default{
    data(){
        return {
            editor:null,
            registerObject:null
        }
    },
    beforeMount(){
        this.registerObject.completionItemProvider = monaco.languages.registerCompletionItemProvider('javascript', {
            provideCompletionItems:function(model, position){
                return { 
                    suggestions: [{
                        label: "显示的名称",
                        detail: "说明",
                        filtertText: "搜什么关键字显示",
                        insertText: "实际插入的代码",
                        kind: 6
                    }]
                }
            }
        })
    },
    mounted(){
        this.init()
    },
    destroyed(){
        this.registerObject.completionItemProvider.dispose()
        this.editor.dispose()
    },
    methods:{
        init(){
            this.editor = monaco.editor.create(this.$refs.editor,{
                //这里的参数就不写了
            })
        }
    }

}
前端新手交流群
欢迎加入web前端新手交流qq群:
734802480(已满)、 794324979

更多文章

栏目文章


Copyright © 2014-2022 seozhijia.net 版权所有-粤ICP备13087626号-4