field-map-vue

介绍

本组件基于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组件的动画结束回调中调用绘制方法