cocoroboBlockly/src/components/blockly.vue

<template>
  <div class="ablockly">
    <el-button type="primary" @click="go" class="btnPosition">下一步</el-button>
    <div id="blocklyDiv"></div>
    <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 id="catIOTScreen" name="屏幕" colour="#5cb2d6">
        <block type="iot_lcd_screeninit"></block>
      </category>
      <sep></sep>
      <category id="cat" name="人脸识别" colour="#ee783a">
        <block type="iot_lcd_faceinit"></block>
      </category>
    </xml>
  </div>
</template>


<style scoped>
.ablockly,
#blocklyDiv {
  width: 100%;
  height: 100%;
}

.btnPosition {
  position: fixed;
  right: 130px;
  bottom: 35px;
  z-index: 999999;
}
</style>


<script>
// 引入Blockly
import Blockly from "blockly";
// 引入想要转换的语言，语言有php python dart lua javascript
import * as JavaScript from "blockly/javascript";
import * as Blocks from "blockly/blocks";
// 引入语言包并使用
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");

export default {
  data() {
    return {
      that: this,
    };
  },

  methods: {
    // 代码生成器
    myUpdateFunction(event) {
      var code = Blockly.JavaScript.workspaceToCode(this.workspace);
    },
    // 获取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();
    },
    //下一步
    go() {
      this.$router.push("./function?isCamera=" + false);
    },
  },

  mounted() {
    this.workspace = Blockly.inject("blocklyDiv", {
      //工具栏
      toolbox: document.getElementById("toolbox"),
      //网格效果
      grid: { spacing: 20, length: 3, colour: "#ccc", snap: true },
      //媒体资源
      media: "../assets/img/",
      //垃圾桶
      trashcan: true,
    });
    //工作区监听代码生成器
    this.workspace.addChangeListener(this.myUpdateFunction);

    Blockly.Blocks["iot_lcd_screeninit"] = {
      init: function () {
        this.appendDummyInput().appendField(
          new Blockly.FieldImage(
            require("../assets/img/screen_init_header.png"),
            45,
            45
          )
        );
        this.appendDummyInput().appendField("LCD屏幕打开");
        this.setInputsInline(false);
        this.setPreviousStatement(true);
        this.setNextStatement(true);
        this.setColour("#5cb2d6");
        this.setTooltip("");
        this.setHelpUrl("");
      },
    };

    Blockly.JavaScript.iot_lcd_screeninit = function (block) {
      var _code = "";
      return _code;
    };

    Blockly.Blocks["iot_lcd_faceinit"] = {
      init: function () {
        this.appendDummyInput().appendField(
          new Blockly.FieldImage(
            require("../assets/img/face_recognition_header.png"),
            45,
            45
          )
        );
        this.appendDummyInput().appendField("人脸辨识");
        this.setInputsInline(false);
        this.setPreviousStatement(true);
        this.setNextStatement(true);
        this.setColour("#ee783a");
        this.setTooltip("");
        this.setHelpUrl("");
      },
    };

    Blockly.JavaScript.iot_lcd_faceinit = function (block) {
      var _code = "";
      return _code;
    };
  },
};
</script>