vue中集成blockly的踩坑之旅
Posted 六月June June
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了vue中集成blockly的踩坑之旅相关的知识,希望对你有一定的参考价值。
blockly是一款可视化编辑器。
blockly源码下载地址:https://gitee.com/mirrors/blockly?_from=gitee_search
blockly的文档参考网址:
https://itbilu.com/other/relate/Ek5ePdjdX.html#configure-fixed-size
https://www.npmjs.com/package/blockly
请结合以上文档来看这篇博客
初步搭建blockly:
npm install blockly 如果安装失败,请删除node_modules重新安装
在.vue单文件的script中 引入
// 引入Blockly
import Blockly from'blockly'
// 引入想要转换的语言,语言有php python dart lua javascript
import 'blockly/javascript'
// 引入语言包并使用
import * as hans from 'blockly/msg/zh-hans'
Blockly.setLocale(hans);
//引入媒体文件:我是在github上下载的blockly源码,将源码中的media文件放入我项目中的public文件夹下
//忽略被vue错认为组件的blockly中的标签,不止以下这些,请发现一个忽略一个
import Vue from'vue'
Vue.config.ignoredElements.push('xml')
Vue.config.ignoredElements.push('block')
Vue.config.ignoredElements.push('field')
Vue.config.ignoredElements.push('category')
Vue.config.ignoredElements.push('sep')
Vue.config.ignoredElements.push('value')
Vue.config.ignoredElements.push('statement')
Vue.config.ignoredElements.push('mutation')
在.vue单文件的template中确定引入位置并添加工具栏
<!-- blockly工作区 -->
<div id="blocklyDiv" style="height: 480px; width: 600px;"></div>
<!-- blockly工具栏 -->
</xml id="toolbox" style="display: none">
<category name="逻辑" colour="%BKY_LOGIC_HUE">
<block type="controls_if"></block>
<block type="logic_compare"></block>
<block type="logic_operation"></block>
<block type="logic_negate"></block>
<block type="logic_boolean"></block>
</category>
<sep></sep>
<category name="数学" colour="%BKY_MATH_HUE">
<block type="math_number">
<field name="NUM">123</field>
</block>
<block type="math_arithmetic"></block>
<block type="math_single"></block>
</category>
</xml>
<!-- blockly代码区 -->
<textarea name="" id="textarea" cols="30" rows="10"></textarea>
在.vue单文件的script中创建blockly工作区
this.workspace = Blockly.inject('blocklyDiv',
//工具栏
toolbox: document.getElementById('toolbox'),
//网格效果
grid:spacing: 20,length: 3,colour: '#ccc',snap: true,
//媒体资源
media: './media/',
//垃圾桶
trashcan: true
);
//工作区监听代码生成器
this.workspace.addChangeListener(this.myUpdateFunction);
methods:
// 代码生成器
myUpdateFunction(event)
var code = Blockly.JavaScript.workspaceToCode(this.workspace);
document.getElementById('textarea').value = code;
,
// 获取blockly工作区中的code和xml结构
getBlockData()
const code = Blockly.JavaScript.workspaceToCode(this.workspace);
const xml = Blockly.Xml.workspaceToDom(this.workspace)
const xmlText = Blockly.Xml.domToText(xml);
,
// 回显工作区中的xml结构
setBlockData(xmlText)
this.clearBlockData();
const xml = Blockly.Xml.textToDom(xmlText);
Blockly.Xml.domToWorkspace(xml, this.workspace);
,
// 清空工作区
clearBlockData()
this.workspace.clear();
,
报错:[Vue warn]: Unknown custom element: <xml> - did you register the component correctly? For recursive components, make sure to provide the "name" option.
原因:vue将xml标签错认为组件
解决:①引入v-blockly ②Vue.config.ignoredElements.push('xml')所以报类似错误的标签,都要一一忽略
如其他相关问题欢迎提问,乐意为你解答。
以上是关于vue中集成blockly的踩坑之旅的主要内容,如果未能解决你的问题,请参考以下文章