2.1.11 • Published 9 months ago
field-map-vue v2.1.11
介绍
本组件基于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组件的动画结束回调中调用绘制方法
2.1.11
9 months ago
2.1.9
11 months ago
2.1.6
11 months ago
2.1.5
11 months ago
2.1.10
11 months ago
2.1.8
11 months ago
2.1.7
11 months ago
2.0.2
1 year ago
1.1.1
1 year ago
1.1.5
1 year ago
1.1.4
1 year ago
1.1.3
1 year ago
2.0.1
1 year ago
0.0.8
1 year ago
0.0.7
1 year ago
0.0.6
1 year ago
0.0.5
1 year ago
0.0.4
1 year ago
0.0.3
1 year ago
0.0.2
1 year ago