vue.js - 在 VueJS 组件中导入使用 getElementById 的模块

Question

我正在尝试将 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>

Answer 1

我想是v2。

在已安装的事件中尝试

<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>

Answer 2

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

例子：

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

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

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

Answer 3

这对我有用

<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')
           });

  ....
},