vue組件之間畫線

在 vue 中，可以在組件之間使用 svg 元素進行連線。具體步驟包括：1. 創建 元素；2. 初始化 元素；3. 定義畫線函數；4. 在 data 中定義變量；5. 計算組件偏移量；6. 組件更新時重新計算偏移量；7. 調用畫線函數傳遞目標組件和連線屬性。

Vue 組件之間如何畫線

在 Vue 中，想要在組件之間畫線，可以使用 SVG 元素。以下步驟介紹瞭如何實現：

1. 創建一個 SVG 元素

在需要畫線的組件模板中，添加一個 SVG 元素：

立即學習“前端免費學習筆記（深入）”；

<template>  <div>    <svg :width="width" :height="height" @load="init"></svg>  </div></template>

登錄後複製

2. 初始化 SVG

在組件的 mounted 方法中，初始化 SVG 元素：

mounted() {  this.svg = this.$refs.svg;  this.init();},

登錄後複製

3. 定義畫線函數

創建一個函數來定義畫線路徑：

drawLine(target, strokeColor, strokeWidth) {  const line = document.createElementNS('http://www.w3.org/2000/svg', 'line');  line.setAttribute('x1', 0);  line.setAttribute('y1', 0);  line.setAttribute('x2', target.left - this.left);  line.setAttribute('y2', target.top - this.top);  line.setAttribute('stroke', strokeColor);  line.setAttribute('stroke-width', strokeWidth);  this.svg.appendChild(line);}

登錄後複製

4. 在 data 中定義變量

在組件的 data 中，定義以下變量：

data() {  return {    svg: null,  // SVG 元素的引用    left: 0,  // 當前組件的左偏移量    top: 0,  // 當前組件的頂偏移量  }},

登錄後複製

5. 計算組件偏移量

在 init 方法中，計算組件的偏移量：

init() {  const rect = this.svg.getBoundingClientRect();  this.left = rect.left;  this.top = rect.top;}

登錄後複製

6. 在組件更新時重新計算偏移量

在組件更新時，重新計算偏移量：

updated() {  this.init();}

登錄後複製

7. 調用畫線函數

在適當的時候調用 drawLine 函數，傳遞一個目標組件和畫線屬性：

drawLine(targetComponent, strokeColor, strokeWidth) {  const target = targetComponent.$el.getBoundingClientRect();  this.drawLine(target, strokeColor, strokeWidth);}

登錄後複製

以上就是vue組件之間畫線的詳細內容，更多請關注本站其它相關文章！