<template>
  <view class="container">
    <!-- 使用 ref 绑定元素 -->
        <div ref="startElement" class="node">开始节点</div>
        <div ref="endElement" class="node">结束节点</div>

  </view>
</template>

<script setup>
import { ref, onMounted, nextTick } from 'vue'
import LeaderLine from 'leader-line-vue'


// 元素引用
const startElement = ref(null)
const endElement = ref(null)

// 响应式数据
const isMounted = ref(false)
const startEl = ref(null)
const endEl = ref(null)

const lineOptions = {
  color: '#3498db',
  size: 3,
  path: 'straight'
}

onMounted(async () => {
  // 等待 DOM 渲染完成
  await nextTick()
  
  // 再次等待确保元素完全渲染
  setTimeout(() => {
    startEl.value = startElement.value
    endEl.value = endElement.value
    isMounted.value = true
    
    console.log('Start element:', startEl.value)
    console.log('End element:', endEl.value)
	let line = LeaderLine.setLine(startEl.value, endEl.value, lineOptions);
  }, 100)
})
</script>

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

.node {
  position: absolute;
  width: 80px;
  height: 80px;
  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>