使用leader-line-vue 时垂直元素间距过小连线打转的解决

原来是这样

对应代码

<template>
	<view>
		<button @click="changeMessage">改变消息</button>
		<!-- RenderJS 模块 -->
		<view :change:prop="renderjs.updateMessage" :prop="lineList" @touchmove="renderjs.handleTouchMove">
			<!-- 使用 ref 绑定元素 -->
			<view style="display: flex;">
				<view :ref="dataList[0].id" :id="dataList[0].id" class="node">开始节点1</view>
				<view :ref="dataList[1].id" :id="dataList[1].id" class="node">开始节点2</view>
			</view>
			<view style="margin-left: 200rpx;" :ref="dataList[2].id" :id="dataList[2].id" class="node">结束节点</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const dataList = ref([{
			id: 'startElement',
			text: 'abc'
		},
		{
			id: 'startElementa',
			text: 'def'
		},
		{
			id: 'endElement',
			text: 'ghi'
		},
	])
	const lineList = ref([
		['startElement', 'endElement'],
		['startElementa', 'endElement']
	])

	const changeMessage = () => {
		lineList.value = JSON.parse(JSON.stringify(lineList.value))
	}
</script>
<script module="renderjs" lang="renderjs">
	import LeaderLine from 'leader-line-vue'
	export default {
		data() {
			return {
				localData: 'RenderJS 数据',
				lineOptions: {
					color: '#34C759',
					size: 3,
					path: 'grid', // 使用网格路径  // grid  fluid
					startSocket: 'bottom',
					endSocket: 'top',
					endPlug: 'arrow1',
					gradient: true,
					//startSocketGravity: [0, 1], // 向上
					//endSocketGravity: [0, -1], // 向下
					dash: {
						animation: true
					},
				},
				colorList: ['#3498db', '#E6B991'],
			}
		},
		mounted() {
			console.log('RenderJS mounted')
		},
		methods: {
			updateMessage(newValue, oldValue, ownerInstance, instance) {
				if (newValue && newValue.length) {
					newValue.forEach((item, index) => {
						if (item && item.length) {
							item.forEach((temp, indexa) => {
								const domea = document.getElementById(item[0]);
								const domeab = document.getElementById(item[1]);
								this.lineOptions.color = this.colorList[index]
								LeaderLine.setLine(domea, domeab, this.lineOptions);
							})
						}
					})
				}
			},
			handleTouchMove(event, ownerInstance) {
				// 处理触摸事件，比普通事件更高效
				console.log('Touch move:', event)
				// 可以向 Vue 组件发送数据
				ownerInstance.callMethod('onTouchMove', {
					x: event.touches[0].pageX,
					y: event.touches[0].pageY
				})
			}
		}
	}
</script>
<style>

</style>



<style>
	.container {
		position: relative;
		height: 400px;
		border: 1px solid #ddd;
	}

	.node {
		margin-top: 100rpx;
		margin-left: 100rpx;
		width: 80px;
		height: 366rpx;
		background: #3498db;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}

	.node:nth-child(1) {
		top: 50px;
		left: 100px;
	}

	.node:nth-child(2) {
		top: 200px;
		left: 300px;
	}
</style>

修改后

修改后代码

<template>
	<view>
		<button @click="changeMessage">改变消息</button>
		<!-- RenderJS 模块 -->
		<view :change:prop="renderjs.updateMessage" :prop="lineList" @touchmove="renderjs.handleTouchMove">
			<!-- 使用 ref 绑定元素 -->
			<view style="display: flex;">
				<view :ref="dataList[0].id" :id="dataList[0].id" class="node">开始节点1</view>
				<view :ref="dataList[1].id" :id="dataList[1].id" class="node">开始节点2</view>
			</view>
			<view style="margin-left: 200rpx;" :ref="dataList[2].id" :id="dataList[2].id" class="node">结束节点</view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref
	} from 'vue'
	const dataList = ref([{
			id: 'startElement',
			text: 'abc'
		},
		{
			id: 'startElementa',
			text: 'def'
		},
		{
			id: 'endElement',
			text: 'ghi'
		},
	])
	const lineList = ref([
		['startElement', 'endElement'],
		['startElementa', 'endElement']
	])

	const changeMessage = () => {
		lineList.value = JSON.parse(JSON.stringify(lineList.value))
	}
</script>
<script module="renderjs" lang="renderjs">
	import LeaderLine from 'leader-line-vue'
	export default {
		data() {
			return {
				localData: 'RenderJS 数据',
				lineOptions: {
					color: '#34C759',
					size: 3,
					path: 'grid', // 使用网格路径  // grid  fluid
					startSocket: 'bottom',
					endSocket: 'top',
					endPlug: 'arrow1',
					gradient: true,
					startSocketGravity: [0, 1], // 向下
					endSocketGravity: [0, -1], // 向上
					dash: {
						animation: true
					},
				},
				colorList: ['#3498db', '#E6B991'],
			}
		},
		mounted() {
			console.log('RenderJS mounted')
		},
		methods: {
			updateMessage(newValue, oldValue, ownerInstance, instance) {
				if (newValue && newValue.length) {
					newValue.forEach((item, index) => {
						if (item && item.length) {
							item.forEach((temp, indexa) => {
								const domea = document.getElementById(item[0]);
								const domeab = document.getElementById(item[1]);
								this.lineOptions.color = this.colorList[index]
								LeaderLine.setLine(domea, domeab, this.lineOptions);
							})
						}
					})
				}
			},
			handleTouchMove(event, ownerInstance) {
				// 处理触摸事件，比普通事件更高效
				console.log('Touch move:', event)
				// 可以向 Vue 组件发送数据
				ownerInstance.callMethod('onTouchMove', {
					x: event.touches[0].pageX,
					y: event.touches[0].pageY
				})
			}
		}
	}
</script>
<style>

</style>



<style>
	.container {
		position: relative;
		height: 400px;
		border: 1px solid #ddd;
	}

	.node {
		margin-top: 100rpx;
		margin-left: 100rpx;
		width: 80px;
		height: 366rpx;
		background: #3498db;
		border-radius: 8px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
	}

	.node:nth-child(1) {
		top: 50px;
		left: 100px;
	}

	.node:nth-child(2) {
		top: 200px;
		left: 300px;
	}
</style>

主要在于

startSocketGravity: [0, 1], // 向下
endSocketGravity: [0, -1], // 向上