介绍

本组件基于vue和svg，实现了字段映射的连线交互

基本用法

<template>
  <div class="filed-map">
    <mapVue
      ref="mappingNameRef"
      v-model:edges="edges"
      :height="300"
      :input-list="inputList"
      :output-list="outputList"
      :secondary-list="['a']"
    >
    </mapVue>
  </div>
</template>

<script setup lang="ts">
import mapVue from "./components/draw-line";
import { ref, watch } from "vue";

type Edge = { source: string; target: string };
type Edges = Edge[];

const inputList = ref(["a", "b"]);
const outputList = ref(["b", "a"]);
const mappingNameRef = ref();
const edges = ref<Edges>([]);
watch(
  () => edges.value,
  () => {
    console.log(
      "%c [ data-change ]-57",
      "font-size:13px; background:pink; color:#bf2c9f;",
      edges.value
    );
  },
  {
    deep: true,
  }
);
</script>

<style></style>

通过双向绑定的变量 edges来获取连线后的映射关系。

API

types

Field: {id: string, value: string}

props

|参数名|描述|类型|默认值| |--|--|--|--| |edges(v-model)|核心变量，通过该变量获取连线后的映射关系。应固定为ref变量 且初始值为[]|{source: string,target:string}[]|[]| |inputList|左边(source)所展示的列表|Field[]|[]| |outputList|右边(target)所展示的列表|Field[]|[]| |defaultEdges|如果已存在线，需通过此变量进行传递|{source: string,target:string}[]|[]| |height|整体高度，也可在class中进行修改|number|200| |secondaryList|含有二级映射的source列表|string[]|[]| |monogamy|一对一映射，如果需要多对多映射，将该属性设置为false|boolean|true| |init|是否进行初始化。不常用，只有在modal框等特殊情况下需要用到。|boolean|true| |autoSort|自动将有连接关系的线排在上面。|boolean|false|

events

|方法名|描述|参数| |--|--|--| |showSecondaryMapping|在点击二级映射的按钮后触发的事件|edge: {source: string,target:string}|

Methods

|方法名|描述|参数|返回值| |--|--|:--:|:--:| |mappingSameName|同名映射|-|-| |mappingSameRow|同行映射|-|-| |clearMap|清除所有连线|-|-| |drawLines|根据edges进行画线|-|-| |reSort|排版，有连接关系的排在上面|-|-|

slots

|插槽名|描述|参数| |--|--|:--:| |left-content|左边列表的展现形式，可使用插槽自定义|data: string| |right-content|右边列表的展现形式，可使用插槽自定义|data: string| |secondary-icon|二级映射按钮样式|-|

在Modal框中使用

问题

由于arco-design的Modal框在打开时，有一个从小到大的动画。如果初始化时有线需要绘制，会导致线的位置不正确。

解决方法

1.取消动画

将arco-design的modal动画名设置为空，动画会消失，线的位置回归正常。

缺点是弹出的动画效果会消失。

2.父组件调用方法绘制

• 将组件的init属性传递为false
• 在modal组件的动画结束回调中调用绘制方法