Blockly 中关于category的hidden无效的问题

196 阅读1分钟

背景

在使用Blockly 中的category的时候,看到文档中写到 developers.google.com/blockly/gui… 想用一下hidden暂时隐藏,但是不生效

排查问题

在源码中category.js ,是如下代码

if (this.toolboxItemDef_['hidden'] === 'true') {
      this.hide();
}

我写的是

<category id="id_h" hidden="true" name="Curs" toolboxitemid="categoryId"></category>

看起来没啥问题,也跟官方文档一模一样,为啥就是不生效

开始打印看看toolboxItemDef_,到底是啥

发现如下

{
    ...
    hidden: ''
    ...
}

这就奇怪了,我把hidden改成别的单词,都没问题

我又在想是不是框架问题,研究发现并不是

最终如下,

以前一直以为hidden=true 是在各个框架中使用,平时没有用过

<p hidden>这个段落应该被隐藏。</p>

这样的,www.w3school.com.cn/tags/att_gl…

原来是这个属性的问题

继续查源代码,那个true获取不到,查到了这个函数 convertToolboxDefToJson

最终的最终 发现blocklyToolbox.childNodes[7].attributes[1]

这么获取 hidden 是空字符串

我再继续往下排查

原来不是Blockly的问题

是Vue生产的结构里面,hidden="true" 变成了

<category id="id_h" hidden name="Curs" toolboxitemid="categoryId"></category>

把true给去掉了

继续研究vue的问题

后续是通过修改源码,解决了问题