工具

blockly +vue+element-plus

问题

我在blockly的块上右键弹出菜单上添加了一个弹出内容，目的是为了将这个函数的xml文件保存到本地，下次打开左边工具栏就可以直接使用。

    options.push({
            enabled: true,
            text: "保存到函数库",
            callback: function() {
               //这个函数
            }.bind(this)
        });

现在问题就是，这函数是在blockly定义块的代码中写的。如果我要保存到本地，编写本地页面的是VUE，他如何响应这个回调事件呢？
我猜想应该是通过workspace。比如生成代码就是

this.workspace.addChangeListener(this.whetherworking);

但是看了workspace.js还是没有找到合理的答案。

参考GPT和自己的思路：首先，如果您想在Vue中响应Blockly块上菜单项的回调，需要在Vue组件中实例化Blockly工作区，然后将回调函数作为Vue组件的方法来定义。下面是样例代码：

在Vue组件实例化中实例化Blockly：

mounted() {
    this.workspace = Blockly.inject(this.$refs.blocklyDiv, {
        toolbox: this.toolboxXml,
        grid: {
            spacing: 20,
            length: 3,
            colour: '#ccc',
            snap: true
        },
        zoom: {
            controls: true,
            wheel: true,
            startScale: 1,
            maxScale: 3,
            minScale: 0.3,
            scaleSpeed: 1.2
        },
        trashcan: true
    });
}

然后在菜单项回调函数中，调用Vue组件方法，例如：

options.push({
    enabled: true,
    text: "保存到函数库",
    callback: function () {
        this.saveToLibrary();
    }.bind(this)
});

其中，saveToLibrary是Vue组件的一个方法，用于将Blockly块保存到本地。

最后，在Vue组件中定义saveToLibrary方法来响应菜单项回调，例如：

methods: {
    saveToLibrary() {
        //实现保存到函数库的代码
    }
}

希望以上介绍对您有所帮助！