闫增涛
2024-05-31 d29b8917dc2fd0a0f751480cbbf6ed8dba36d436
src/components/drawflow/index.vue
@@ -1,18 +1,27 @@
<template>
  <div class="drawflow">
    <div class="menu">
      <div class="menuItem">
  <div
    class="drawflow"
    :style="{ borderColor: primaryColor ? primaryColor : '#ccc' }"
  >
    <div
      class="menu"
      :style="{ borderColor: primaryColor ? primaryColor : '#ccc' }"
    >
      <div
        class="menuItem"
        :style="{ borderColor: primaryColor ? primaryColor : '#ccc' }"
      >
        <div
          class="drag-drawflow"
          draggable="true"
          @dragstart="drag"
          data-node="template"
        >
          <span>节点</span>
          <span>拖拽此处创建</span>
        </div>
      </div>
    </div>
    <div class="content" id="drawflow" @drop="drop" @dragover="allowDrop">
    <div class="content" :style="{ borderColor: primaryColor ? primaryColor : '#ccc' }" :id="strId" @drop="drop" @dragover="allowDrop">
      <div class="btn-export" @click="exportData">导出</div>
      <div class="btn-clear" @click="editor.clearModuleSelected()">清空</div>
    </div>
@@ -34,17 +43,25 @@
    importData: {
      type: Object,
    },
    primaryColor: {
      type: String,
    },
    strId: {
      type: String,
      default: "drawflow",
    },
  },
  mounted() {
    this.init();
  },
  methods: {
    exportData() {
      console.log(this.editor.export());
      let dataJ = this.editor.export();
      this.$emit("getDrawData", dataJ);
    },
    init() {
      this.editor = new Drawflow(
        document.getElementById("drawflow"),
        (this.container ? this.container : document).getElementById(this.strId),
        Vue,
        this
      );
@@ -169,10 +186,10 @@
          let noneEle = `
              <div class="contentWall">
                <div class="contentTitle">
                  <input df-title />
                  <input placeholder="请输入标题" df-title />
                </div>
                <div class="contentText">
                  <textarea rows="4" df-content></textarea>
                  <textarea rows="4" placeholder="请输入描述" df-content></textarea>
                </div>
              </div>
        `;
@@ -200,7 +217,7 @@
</script>
<style scoped>
@import 'drawflow/dist/drawflow.min.css';
@import "drawflow/dist/drawflow.min.css";
.drawflow {
  width: 100%;
  height: 100%;