leader-line 是一個(gè)基于 svg 在網(wǎng)頁上畫指引線的庫。
本文對 leader-line 官方文檔 進(jìn)行了提煉整理佑钾，方便快速上手開發(fā)。
一烂翰、安裝
-
下載插件
npm install leader-line -
引入
方式一
在依賴文件夾中找到
leader-line.min.js夯缺，路徑可參考node_modules\_leader-line@1.0.7@leader-line\leader-line.min.js。直接使用 script 標(biāo)簽引入甘耿。<script src="./js/leader-line.min.js"></script>方式二
直接使用
import LeaderLine from 'leader-line'會報(bào)錯(cuò)報(bào)模塊找不到踊兜，是因?yàn)?leader-line 包文件沒有支持 es6 等模塊導(dǎo)出語法，整個(gè)文件就只有一個(gè)函數(shù)佳恬。需要把
leader-line.min.js文件復(fù)制到項(xiàng)目文件中捏境，并在文件末尾末尾添加導(dǎo)出語句export default LeaderLine，如下：
然后引用該文件毁葱。
import LeaderLine from "@/plugins/leader-line.min.js";
二垫言、配置項(xiàng)
僅列舉了部分常用配置項(xiàng)，完整配置項(xiàng)參考官方文檔倾剿。
const styleOption = {
// 連線顏色 coral （默認(rèn)） , 取值參考顏色值
color: "coral",
// 連線尺寸 4（默認(rèn)）
size: 10,
// 連線類型 straight 直線 , arc 曲線 , fluid 流體線（默認(rèn)） , magnet 磁鐵線 , grid 折線
path: "fluid",
// 連線邊框顯示 false （默認(rèn)）
outline: true,
// 連線邊框顏色 indianred （默認(rèn)） , 取值參考顏色值
outlineColor: "rgba(0,255,255,1)",
// 連線使用虛線 true 開啟 筷频， false 不開啟（默認(rèn)）
dash: {
// 繪制線的長度 'auto'=size*2
len: "auto",
// 繪制線之間的間隙 'auto'=size
gap: "auto",
// 線條滾動(dòng) true 是(或者{duration: 1000, timing: 'linear'}，詳見動(dòng)畫選項(xiàng))前痘， false 否（默認(rèn)）
animation: {
duration: 1000,
timing: "linear",
},
},
// 連線使用漸變色 true 開啟 凛捏， false 不開啟（默認(rèn)）
// 漸變色開始色為startPlugColor，漸變色結(jié)束色為endPlugColor
gradient: true,
// 連線開始元素
start: "",
// 連線結(jié)束元素
end: "",
// 連線從元素某側(cè)開始 top 上 , right 右 , bottom 下 , left 左 , auto 自適應(yīng)（默認(rèn)）
startSocket: "auto",
// 連線從元素某側(cè)結(jié)束
endSocket: "auto",
// 連線開始點(diǎn)樣式
// disc 圓形 , square 方形 , arrow1 箭頭1 , arrow2 箭頭2 , arrow3 箭頭3 ,
// hand 手指 , crosshair 十字準(zhǔn)線 , behind 無（默認(rèn)）
startPlug: "behind",
// 連線結(jié)束點(diǎn)樣式 arrow1 箭頭1（默認(rèn)）
endPlug: "arrow1",
// 連線開始點(diǎn)顏色 auto 自適應(yīng)（默認(rèn)） , 取值參考顏色值
startPlugColor: "#ff3792",
// 連線結(jié)束點(diǎn)顏色
endPlugColor: "#fff386",
// 連線開始點(diǎn)尺寸 1 （默認(rèn)）
startPlugSize: 1,
// 連線結(jié)束點(diǎn)尺寸 1 （默認(rèn)）
endPlugSize: 1,
// 連線開始文字 默認(rèn)為空
startLabel: "開始",
// 連線中間文字 默認(rèn)為空
middleLabel: "中間",
// 連線結(jié)束文字 默認(rèn)為空
endLabel: "結(jié)束",
};
1芹缔、顏色值
與 CSS 顏色取值相同坯癣。例如：hsl(200, 70%, 58%),rgba(73，172最欠，223示罗，0.5),#49acdf,bule等。
2芝硬、動(dòng)畫選項(xiàng)
duration 動(dòng)畫時(shí)長鹉勒。
timing 指示如何改變速度，它的工作原理和 CSS 動(dòng)畫相同吵取。取值如：ease，linear锯厢，ease-in皮官，ease-out，ease-in-out实辑，[0.5, 0, 1, 0.42]等捺氢。
三、創(chuàng)建連線
styleOption配置項(xiàng)參考配置項(xiàng)
const leaderLine = new LeaderLine(styleOption);
四剪撬、方法
-
setOption
設(shè)置配置項(xiàng)摄乒。
leaderLine.setOption(配置項(xiàng)); -
position
更改連線位置。
leaderLine.position(); -
show
設(shè)置連線顯示。
leaderLine.show(); -
hide
設(shè)置連線隱藏馍佑。
leaderLine.hide(); -
remove
移除連線斋否。
leaderLine.remove();
五、示例
<template>
<div class="page">
<div
v-for="i in 10"
:key="i"
v-drag="changPosition"
:id="'item item-' + i"
class="item"
:style="i | itemFilter"
></div>
<!-- v-drag 為自定義拖拽指令 -->
</div>
</template>
<script>
// import LeaderLine from "leader-line";
import LeaderLine from "@/plugins/leader-line.min.js";
export default {
mounted() {
this.init();
},
filters: {
itemFilter(i) {
let top = 0,
left = 0;
if (i <= 5) {
top = 5 + (i - 1) * 10;
left = 5;
} else {
top = (i - 5) * 15;
left = 30;
}
return `top:${top}vh;left:${left}vw;`;
},
},
methods: {
init() {
const styleOption = {
// 連線顏色 coral （默認(rèn)） , 取值參考顏色值
color: "coral",
// 連線尺寸 4（默認(rèn)）
size: 10,
// 連線類型 straight 直線 , arc 曲線 , fluid 流體線（默認(rèn)） , magnet 磁鐵線 , grid 折線
path: "fluid",
// 連線邊框顯示 false （默認(rèn)）
outline: true,
// 連線邊框顏色 indianred （默認(rèn)） , 取值參考顏色值
outlineColor: "rgba(0,255,255,1)",
// 連線使用虛線 true 開啟 拭荤， false 不開啟（默認(rèn)）
dash: {
// 繪制線的長度 'auto'=size*2
len: "auto",
// 繪制線之間的間隙 'auto'=size
gap: "auto",
// 線條滾動(dòng) true 是({duration: 1000, timing: 'linear'}茵臭，詳見動(dòng)畫選項(xiàng))， false 否（默認(rèn)）
animation: {
duration: 1000,
timing: "linear",
},
},
// 連線使用漸變色 true 開啟 舅世， false 不開啟（默認(rèn)）
// 漸變色開始色為startPlugColor旦委，漸變色結(jié)束色為endPlugColor
gradient: true,
// 連線開始元素
start: "",
// 連線結(jié)束元素
end: "",
// 連線從元素某側(cè)開始 top 上 , right 右 , bottom 下 , left 左 , auto 自適應(yīng)（默認(rèn)）
startSocket: "auto",
// 連線從元素某側(cè)結(jié)束
endSocket: "auto",
// 連線開始點(diǎn)樣式
// disc 圓形 , square 方形 , arrow1 箭頭1 , arrow2 箭頭2 , arrow3 箭頭3 ,
// hand 手指 , crosshair 十字準(zhǔn)線 , behind 無（默認(rèn)）
startPlug: "behind",
// 連線結(jié)束點(diǎn)樣式 arrow1 箭頭1（默認(rèn)）
endPlug: "arrow1",
// 連線開始點(diǎn)顏色 auto 自適應(yīng)（默認(rèn)） , 取值參考顏色值
startPlugColor: "#ff3792",
// 連線結(jié)束點(diǎn)顏色
endPlugColor: "#fff386",
// 連線開始點(diǎn)尺寸 1 （默認(rèn)）
startPlugSize: 1,
// 連線結(jié)束點(diǎn)尺寸 1 （默認(rèn)）
endPlugSize: 1,
// 連線開始文字 默認(rèn)為空
startLabel: "開始",
// 連線中間文字 默認(rèn)為空
middleLabel: "中間",
// 連線結(jié)束文字 默認(rèn)為空
endLabel: "結(jié)束",
};
const itemEls = document.getElementsByClassName("item");
const pathTyps = ["straight", "arc", "fluid", "magnet", "grid"];
this.lines = pathTyps.map((item, i) => {
return new LeaderLine({
...styleOption,
start: itemEls[i],
end: itemEls[i + 5],
path: item,
});
});
},
changPosition() {
this.lines.forEach((item) => {
item.position();
});
},
},
};
</script>
<style lang="scss" scoped>
.page {
background: rgba(0, 0, 0, 0.5);
.item {
width: 50px;
height: 50px;
background: #0f0;
}
}
</style>
效果圖如下：
image.png
看日出必須守到拂曉。
