在 VueJS 组件中导入使用 getElementById 的模块

Posted 2023-02-23

【中文标题】在 VueJS 组件中导入使用 getElementById 的模块

【英文标题】：Importing module that uses getElementById in VueJS component

【发布时间】：2017-07-03 09:10:52

【问题描述】：

我正在尝试将 Blockly（通过 npm 的 node-blockly）导入 VueJS 组件，但 Blockly 的 javascript 部分包含 getElementById() 调用，这会导致错误为 document.getElementById() 在 VueJS 中不可用。

知道如何解决这个问题吗？

（编辑）代码示例：

<template> 
 <div class="hello"> 
   <div id="blocklyDiv" style="height: 480px; width: 600px;">
   </div> 
    <xml id="toolbox" ref=toolbox style="display: none"> 
     <block type="controls_if"></block> 
     <block type="text"></block> <block type="text_print"></block> 
    </xml> 
   </div> 
</template> 
<script> 
 import Blockly from "node-blockly" 
 export default  name: 'hello'  
 var workspace = Blockly.inject('blocklyDiv', toolbox: document.getElementById('toolbox')); 
</script>

【问题讨论】：

我不确定我是否理解。 document.getElementById 适用于 vue.js。你能提供一个不起作用的代码示例吗？

我认为您使用的是具有 eslint 的 webpack 版本？如果是，那么您需要在 eslintrc 中允许浏览器。如果这是您的情况，那么我将发布答案。

我在创建 webpack 项目（使用 vue cli）时选择不使用 eslint。

【参考方案1】：

这对我有用

<script>
export default 
    mounted() 
        console.log('blockly');
           var workspace = Blockly.inject('blocklyDiv', 
             toolbox: document.getElementById('toolbox')
           );

           var blocklyArea = document.getElementById('blocklyArea');
           var blocklyDiv = document.getElementById('blocklyDiv');

           var workspace = Blockly.inject(blocklyDiv, 
              toolbox: document.getElementById('toolbox')
           );

  ....
,

【讨论】：

更新 - 这种方法不允许 Blockly.JavaScript.workspaceToCode(workspace);正在调查。

【参考方案2】：

假设您使用的是 VueJS 版本 2，您可以在模板中标记您的元素后使用 this.$refs.myElement 访问对元素的引用。

例子：

<div ref="blocklyDiv" style="height: 480px; width: 600px;">

mounted () 
  this.workspace = Blockly.inject(this.$refs.blocklyDiv);

然后，对你的工具箱做同样的事情。

【参考方案3】：

我想是 v2。

试试mounted event

<template> 
 <div class="hello"> 
   <div id="blocklyDiv" style="height: 480px; width: 600px;">
   </div> 
    <xml id="toolbox" ref=toolbox style="display: none"> 
     <block type="controls_if"></block> 
     <block type="text"></block> <block type="text_print"></block> 
    </xml> 
   </div> 
</template> 
<script> 
 import Blockly from "node-blockly" 
 export default  
   name: 'hello',
   data()
     return 
       workspace: null
     
   ,
   mounted()
     this.workspace = Blockly.inject('blocklyDiv', toolbox: document.getElementById('toolbox'));
   
  
</script>

【讨论】：

恐怕这并没有什么不同。调用注入时的 getElementById() 函数实际上不是问题。它是 Blockly JS 中的 getElementById()。我猜需要将其他元素（xml、工具箱等）正确注册为子组件。我会试试这个并在这里发布结果....