谷歌Blockly动态修改field_dropdown的值

最新推荐文章于 2024-05-23 10:17:56 发布

下一页继续

最新推荐文章于 2024-05-23 10:17:56 发布

阅读量1.1k

点赞数 2

分类专栏： js 文章标签： js

本文链接：https://blog.youkuaiyun.com/weixin_38152494/article/details/108593874

版权

js 专栏收录该内容

8 篇文章

订阅专栏

本文介绍了一个使用Blockly创建的动态组件，该组件可以根据不同的选项更新其字段。通过JavaScript和XML配置，实现了动态更改Blockly块的下拉菜单选项，适用于教育软件或编程环境中需要灵活配置的场景。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

效果图如下：
在这里插入图片描述

js部分

<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script type="text/javascript" src="blockly_compressed.js"></script>
    <script type="text/javascript" src="blocks_compressed.js"></script>
    <script type="text/javascript" src="zh-hans.js"></script>
</head>
<body>
<xml id="toolbox">
    <category name="测试" colour="#37B7FF">
        <block type="dynamic_block"></block>
    </category>

</xml>
<div id="blocklyDiv" style="height:100vh; width: 100%;"></div>
<div style="position: absolute;top: 200px;left: 100px;">
    <a href="javascript:dynamicBlockFun.update_dynamic_block([['option1','1']],'');">变为option1</a>
    <a href="javascript:dynamicBlockFun.update_dynamic_block([['option2','2']],'');">变为option2</a>
    <a href="javascript:dynamicBlockFun.update_dynamic_block([['option3','3']],'');">变为option3</a>
</div>
</body>
<script type="text/javascript">
    //初始化workspace工作区间

    var dynamicBlockFun = {
        dynamic_block_options: [["默认值？", "-1"]],
        dynamic_block: function () {
            var _this = this;
            Blockly.Blocks["dynamic_block"] = {
                init: function () {
                    this.jsonInit({
                        type: "dynamic_block",
                        message0: "动态设置 %1",
                        args0: [
                            {
                                type: "field_dropdown",
                                name: "WORD",
                                options: function () {
                                    return _this.dynamic_block_options;
                                },
                            }
                        ],
                        "inputsInline": true,
                        "output": null,
                        "colour": 230,
                        "tooltip": "",
                        "helpUrl": ""
                    });
                },
            }
        },

        update_dynamic_block(options, deleteItem) {
            var setDynamicOptions =
                options && options.length > 0 ? options : [["默认值？", "-1"]];
            this.dynamic_block_options= setDynamicOptions;
            for (var i = 0;i < workspace.getBlocksByType("dynamic_block").length;i++) {
                if (workspace.getBlocksByType("dynamic_block")[i].getField("WORD").getValue()=== "-1" || 			   
                workspace.getBlocksByType("dynamic_block")[i].getField("WORD").getValue() == deleteItem ||
                !options.some((v) => v[1] == workspace.getBlocksByType("dynamic_block")[i].getField("WORD").getValue())) {
                    workspace.getBlocksByType("dynamic_block")[i].getField("WORD").setValue(setDynamicOptions [0][1]);
                    workspace.getBlocksByType("dynamic_block")[i].getField("WORD").setText(setDynamicOptions [0][0]);
                }
            }

        }
    }
    dynamicBlockFun.dynamic_block()
    window.workspace = Blockly.inject('blocklyDiv',
        {
            toolbox: document.getElementById('toolbox'),
            trashcan: false
        });
</script>
</html>