uniapp 打包 安卓APP后,无法使用dom环境,所以如果想在打包APP时使用leader-line-vue组件,需要使用renderJS环境.

<template>
	<view>
		<view>Vue 数据: {{ message }}</view>
		    
		    <!-- RenderJS 模块 -->
		    <view 
		      :change:prop="renderjs.updateMessage"
		      :prop="message"
		      @touchmove="renderjs.handleTouchMove"
		    >
		      RenderJS 区域
			  <!-- 使用 ref 绑定元素 -->
			      <div ref="startElement" id="startElement" class="node">开始节点</div>
			      <div ref="endElement" id="endElement" class="node">结束节点</div>
		    </view>
		    
		    <button @click="changeMessage">改变消息</button>
	</view>
</template>

<script setup>
	import { ref } from 'vue'
	
	const message = ref('Hello RenderJS')
	
	const changeMessage = () => {
	  message.value = '消息已更新 ' + Date.now()
	}
</script>
<script module="renderjs" lang="renderjs">
	import LeaderLine from 'leader-line-vue'
export default {
  data() {
    return {
      localData: 'RenderJS 数据',
	  lineOptions: {
	    color: '#3498db',
	    size: 3,
	    path: 'straight'
	  }
    }
  },
  mounted() {
    console.log('RenderJS mounted')
  },
  methods: {
    updateMessage(newValue, oldValue, ownerInstance, instance) {
      console.log('数据变化:', oldValue, '->', newValue)
      // 这里可以执行 DOM 操作或复杂计算
	  const startElement = document.getElementById('startElement')
	  const endElement = document.getElementById('endElement')
	  
	  
	  let line = LeaderLine.setLine(startElement, endElement, 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 {
  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>