目录
前言
1.安装 leader-line-vue
官方文档
https://www.npmjs.com/package/leader-line-vue
https://anseki.github.io/leader-line/#start-end
安装
npm i leader-line-vue
使用
示例
<div ref="start">start</div>
<div ref="end">end</div>
import LeaderLine from 'leader-line-vue';
// Add new leader line from `start` to `end` (HTML/SVG element, basically).
LeaderLine.setLine(this.$refs.start, this.$refs.end);
代码
<template>
<div class="HelloWorld">
<div class="ShowContent" id="ShowContentContainer" v-if="showTree">
<div class="FirstContent">
<div
v-for="(item, index) in FirstContentData"
:key="index"
class="Itembox"
:class="FirstContentNowIndex === index ? 'ActiveItembox' : ''"
:id="item.Id"
@click="FirstContentFun(item, index)"
>
<!-- <div class="Itembox_PartOne"></div> -->
<div class="Itembox_PartTwo">
<div class="ContentOutbox">
<div class="TopPart">
<div class="LeftPart">{{ item.Name }}</div>
<div class="RightPart">{{ item.Time }}</div>
</div>
<div class="ShowCode">{{ item.ShowCode }}</div>
<div class="BottomPart">
<div
v-for="(childitem, childindex) in item.List"
:key="childindex"
class="childitembox"
>
<div class="Numbox">{{ childitem.Data }}</div>
<div class="Titlebox">{{ childitem.Title }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="SecondContent">
<div
v-for="(item, index) in SecondContentData"
:key="index"
class="Itembox"
:class="SecondContentNowIndex === index ? 'ActiveItembox' : ''"
:id="item.Id"
@click="SecondContentFun(item, index)"
>
<!-- <div class="Itembox_PartOne"></div> -->
<div class="Itembox_PartTwo">
<div class="ContentOutbox">
<div class="TopPart">
<div class="LeftPart">{{ item.Name }}</div>
<div class="RightPart">{{ item.Time }}</div>
</div>
<div class="ShowCode">{{ item.ShowCode }}</div>
<div class="BottomPart">
<div
v-for="(childitem, childindex) in item.List"
:key="childindex"
class="childitembox"
>
<div class="Numbox">{{ childitem.Data }}</div>
<div class="Titlebox">{{ childitem.Title }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="ThirdContent">
<div
v-for="(item, index) in ThirdContentData"
:key="index"
class="Itembox"
:class="ThirdContentNowIndex === index ? 'ActiveItembox' : ''"
:id="item.Id"
@click="ThirdContentFun(item, index)"
>
<!-- <div class="Itembox_PartOne"></div> -->
<div class="Itembox_PartTwo">
<div class="ContentOutbox">
<div class="TopPart">
<div class="LeftPart">{{ item.Name }}</div>
<div class="RightPart">{{ item.Time }}</div>
</div>
<div class="ShowCode">{{ item.ShowCode }}</div>
<div class="BottomPart">
<div
v-for="(childitem, childindex) in item.List"
:key="childindex"
class="childitembox"
>
<div class="Numbox">{{ childitem.Data }}</div>
<div class="Titlebox">{{ childitem.Title }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="FourContent">
<div
v-for="(item, index) in FourContentData"
:key="index"
class="Itembox"
:class="FourContentNowIndex === index ? 'ActiveItembox' : ''"
:id="item.Id"
@click="FourContentFun(item, index)"
>
<!-- <div class="Itembox_PartOne"></div> -->
<div class="Itembox_PartTwo">
<div class="ContentOutbox">
<div class="TopPart">
<div class="LeftPart">{{ item.Name }}</div>
<div class="RightPart">{{ item.Time }}</div>
</div>
<div class="ShowCode">{{ item.ShowCode }}</div>
<div class="BottomPart">
<div
v-for="(childitem, childindex) in item.List"
:key="childindex"
class="childitembox"
>
<div class="Numbox">{{ childitem.Data }}</div>
<div class="Titlebox">{{ childitem.Title }}</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</template>
<script>
import LeaderLine from "leader-line-vue";
import AnimEvent from "anim-event";
import ListDataJson from "./data/ListData.json";
export default {
name: "HelloWorld",
data() {
return {
ListData: ListDataJson.Data,
FirstContentData: ListDataJson.Data,
SecondContentData: [],
ThirdContentData: [],
FourContentData: [],
FirstContentNowIndex: 0,
SecondContentNowIndex: 0,
ThirdContentNowIndex: 0,
FourContentNowIndex: 0,
lines1: [],
lines2: [],
lines3: [],
};
},
computed: {
/**
* 是否展示树计算属性
*/
showTree() {
return this.ListData && this.ListData.length;
},
},
mounted() {
this.$nextTick(() => {
// this.InitDataFun();
//this.ChangShowDataFun();
this.AsyncFun();
this.AddEventListenerSrollFun();
});
},
beforeDestroy() {
/**
* 离开页面时销毁所有line
*/
this.ClearAllLine();
},
methods: {
/**
* 监听滚动条变化各部分连线跟随变化
*/
AddEventListenerSrollFun() {
window.addEventListener(
"scroll",
AnimEvent.add(() => {
d3.selectAll(".leader-line").remove();
this.lines1 = [];
this.lines2 = [];
this.lines3 = [];
this.DrawLeaderLine1();
this.DrawLeaderLine2();
this.DrawLeaderLine3();
}),
false
);
let scrollableBox1 = document.getElementsByClassName("FirstContent")[0];
scrollableBox1.addEventListener(
"scroll",
AnimEvent.add(() => {
d3.selectAll(".leader-line").remove();
this.lines1 = [];
this.lines2 = [];
this.lines3 = [];
this.DrawLeaderLine1();
this.DrawLeaderLine2();
this.DrawLeaderLine3();
}),
false
);
let scrollableBox2 = document.getElementsByClassName("SecondContent")[0];
scrollableBox2.addEventListener(
"scroll",
AnimEvent.add(() => {
d3.selectAll(".leader-line").remove();
this.lines1 = [];
this.lines2 = [];
this.lines3 = [];
this.DrawLeaderLine1();
this.DrawLeaderLine2();
this.DrawLeaderLine3();
}),
false
);
let scrollableBox3 = document.getElementsByClassName("ThirdContent")[0];
scrollableBox3.addEventListener(
"scroll",
AnimEvent.add(() => {
d3.selectAll(".leader-line").remove();
this.lines1 = [];
this.lines2 = [];
this.lines3 = [];
this.DrawLeaderLine1();
this.DrawLeaderLine2();
this.DrawLeaderLine3();
}),
false
);
let scrollableBox4 = document.getElementsByClassName("FourContent")[0];
scrollableBox4.addEventListener(
"scroll",
AnimEvent.add(() => {
d3.selectAll(".leader-line").remove();
this.lines1 = [];
this.lines2 = [];
this.lines3 = [];
this.DrawLeaderLine1();
this.DrawLeaderLine2();
this.DrawLeaderLine3();
}),
false
);
},
FirstContentFun(item, index) {
this.FirstContentNowIndex = index;
// this.ChangShowDataFun();
this.AsyncFun();
},
SecondContentFun(item, index) {
this.SecondContentNowIndex = index;
// this.ChangShowDataFun();
this.AsyncFun();
},
ThirdContentFun(item, index) {
this.ThirdContentNowIndex = index;
// this.ChangShowDataFun();
this.AsyncFun();
},
FourContentFun(item, index) {
this.FourContentNowIndex = index;
// this.ChangShowDataFun();
this.AsyncFun();
},
ChangShowDataFun() {
this.SecondContentData =
this.ListData[this.FirstContentNowIndex].Children;
this.ThirdContentData =
this.ListData[this.FirstContentNowIndex].Children[
this.SecondContentNowIndex
].Children;
this.FourContentData =
this.ListData[this.FirstContentNowIndex].Children[
this.SecondContentNowIndex
].Children[this.ThirdContentNowIndex].Children;
},
/**
* 异步执行 获取数据----->清空已有连线--->从新绘制连线
*/
AsyncFun() {
new Promise((resolve) => {
setTimeout(() => {
resolve("aaa");
}, 1000);
})
.then((res) => {
this.ChangShowDataFun();
console.log(res, "第一次自己处理别的业务的代码");
return res + "111";
})
.then((res) => {
//this.ClearAllLine();
d3.selectAll(".leader-line").remove();
this.lines1 = [];
this.lines2 = [];
this.lines3 = [];
console.log(res, "第二次自己处理别的业务的代码");
return res + "222";
})
.then((res) => {
this.DrawLeaderLine1();
this.DrawLeaderLine2();
this.DrawLeaderLine3();
console.log(res, "第三次自己处理别的业务的代码");
}).then((res)=>{
})
},
ClearAllLine() {
if (this.lines1 && this.lines1.length) {
this.lines1.forEach((line) => {
line.remove();
});
}
if (this.lines2 && this.lines2.length) {
this.lines2.forEach((line) => {
line.remove();
});
}
if (this.lines3 && this.lines3.length) {
this.lines3.forEach((line) => {
line.remove();
});
}
},
/**
* 根据上下级关系绘制线条
*/
DrawLeaderLine1() {
let FirstStart = document.getElementById(
this.ListData[this.FirstContentNowIndex].Id
);
if (this.SecondContentData && this.SecondContentData.length) {
this.SecondContentData.forEach((ele) => {
let line = LeaderLine.setLine(
FirstStart,
document.getElementById(ele.Id)
);
line.color = "#75cede";
line.path = "fluid";
line.size = 3;
line.setOptions({
dash: { animation: true },
startPlug: "disc",
startPlugSize: 2.5,
startPlugOutlineSize: 2,
startPlugColor: "red",
startPlugOutline: true,
startPlugOutlineColor: "yellow",
endPlug: "disc",
endPlugSize: 2.5,
endPlugOutlineSize: 2,
endPlugColor: "red",
endPlugOutline: true,
endPlugOutlineColor: "yellow",
startSocket: "right", //在指引线开始的地方从元素左侧开始
endSocket: "left", //在指引线开始的地方从元素右侧结束
startSocketGravity: "auto",
endSocketGravity: "auto",
//dropShadow:{dx:0,dy:0}
});
// let scrollableBox =
// document.getElementsByClassName("FirstContent")[0];
// scrollableBox.addEventListener(
// "scroll",
// AnimEvent.add(function () {
// line.position();
// }),
// false
// );
this.lines1.push(line);
});
}
},
DrawLeaderLine2() {
let SecondStart = document.getElementById(
this.SecondContentData[this.SecondContentNowIndex].Id
);
if (this.ThirdContentData && this.ThirdContentData.length) {
this.ThirdContentData.forEach((ele) => {
let line = LeaderLine.setLine(
SecondStart,
document.getElementById(ele.Id)
);
line.color = "#75cede";
line.path = "fluid";
line.size = 3;
line.setOptions({
// dash: { animation: true },
startPlug: "disc",
startPlugSize: 2.5,
startPlugOutlineSize: 2,
startPlugColor: "red",
startPlugOutline: true,
startPlugOutlineColor: "yellow",
endPlug: "disc",
endPlugSize: 2.5,
endPlugOutlineSize: 2,
endPlugColor: "red",
endPlugOutline: true,
endPlugOutlineColor: "yellow",
startSocket: "right", //在指引线开始的地方从元素左侧开始
endSocket: "left", //在指引线开始的地方从元素右侧结束
startSocketGravity: "auto",
endSocketGravity: "auto",
//dropShadow:{dx:0,dy:0}
});
// let scrollableBox =
// document.getElementsByClassName("SecondContent")[0];
// scrollableBox.addEventListener(
// "scroll",
// AnimEvent.add(function () {
// line.position();
// }),
// false
// );
this.lines2.push(line);
});
}
},
DrawLeaderLine3() {
let ThirdStart = document.getElementById(
this.ThirdContentData[this.ThirdContentNowIndex].Id
);
if (this.FourContentData && this.FourContentData.length) {
this.FourContentData.forEach((ele) => {
let line = LeaderLine.setLine(
ThirdStart,
document.getElementById(ele.Id)
);
line.color = "#75cede";
line.path = "fluid";
line.size = 3;
line.setOptions({
// dash: { animation: true },
startPlug: "disc",
startPlugSize: 2.5,
startPlugOutlineSize: 2,
startPlugColor: "red",
startPlugOutline: true,
startPlugOutlineColor: "yellow",
endPlug: "disc",
endPlugSize: 2.5,
endPlugOutlineSize: 2,
endPlugColor: "red",
endPlugOutline: true,
endPlugOutlineColor: "yellow",
startSocket: "right", //在指引线开始的地方从元素左侧开始
endSocket: "left", //在指引线开始的地方从元素右侧结束
startSocketGravity: "auto",
endSocketGravity: "auto",
//dropShadow:{dx:0,dy:0}
});
//d3.selectAll(".leader-line").attr("class","leader-line MySvgClass")
// let scrollableBox =
// document.getElementsByClassName("ThirdContent")[0];
// scrollableBox.addEventListener(
// "scroll",
// AnimEvent.add(() => {
// line.position();
// // d3.selectAll(".leader-line").remove();
// // this.lines2 = [];
// // this.DrawLeaderLine2();
// }),
// false
// );
this.lines3.push(line);
});
}
},
/////
InitDataFun() {
let ListData = [];
let FirstContentData = [];
let SecondContentData = [];
let ThirdContentData = [];
let FourContentData = [];
for (var i = 0; i < 16; i++) {
if (i < 6) {
FirstContentData.push({
Name: "一级水厂" + (i + 1),
Time: "13:0" + i,
Id: "Firstid" + (i + 1),
LID: "Firstlid" + (i + 1),
List: [
{
Title: "浊度",
Data: 0.23,
},
{
Title: "PH",
Data: 3,
},
{
Title: "湿度",
Data: 0.63,
},
{
Title: "COD",
Data: 0.23,
},
],
});
let ListDataSec = [];
for (var Seci = 0; Seci < 16; Seci++) {
let ListDatarsd = [];
for (var Rsdi = 0; Rsdi < 16; Rsdi++) {
let ListDataFour = [];
for (var Fouri = 0; Fouri < 16; Fouri++) {
ListDataFour.push({
Name: "四级水厂" + (Fouri + 1),
Time: "13:0" + Fouri,
Id: "Fourid" + (Fouri + 1),
LID: "Fourlid" + (Fouri + 1),
ShowCode:
"一级---" +
(i + 1) +
"---二级---" +
(Seci + 1) +
"---三级---" +
(Rsdi + 1) +
"---四级---" +
(Fouri + 1),
Children: [],
List: [
{
Title: "浊度",
Data: 0.23,
},
{
Title: "PH",
Data: 3,
},
{
Title: "湿度",
Data: 0.63,
},
{
Title: "COD",
Data: 0.23,
},
],
});
}
ListDatarsd.push({
Name: "三级水厂" + (Rsdi + 1),
Time: "13:0" + Rsdi,
Id: "Thirdid" + (Rsdi + 1),
LID: "Thirdlid" + (Rsdi + 1),
ShowCode:
"一级---" +
(i + 1) +
"---二级---" +
(Seci + 1) +
"---三级---" +
(Rsdi + 1),
Children: ListDataFour,
List: [
{
Title: "浊度",
Data: 0.23,
},
{
Title: "PH",
Data: 3,
},
{
Title: "湿度",
Data: 0.63,
},
{
Title: "COD",
Data: 0.23,
},
],
});
}
ListDataSec.push({
Name: "二级水厂" + (Seci + 1),
Time: "13:0" + Seci,
Id: "Secondid" + (Seci + 1),
LID: "Secondlid" + (Seci + 1),
ShowCode: "一级---" + (i + 1) + "---二级---" + (Seci + 1),
Children: ListDatarsd,
List: [
{
Title: "浊度",
Data: 0.23,
},
{
Title: "PH",
Data: 3,
},
{
Title: "湿度",
Data: 0.63,
},
{
Title: "COD",
Data: 0.23,
},
],
});
}
ListData.push({
Name: "一级水厂" + (i + 1),
Time: "13:0" + i,
Id: "Firstid" + (i + 1),
LID: "Firstlid" + (i + 1),
ShowCode: "一级---" + (i + 1),
List: [
{
Title: "浊度",
Data: 0.23,
},
{
Title: "PH",
Data: 3,
},
{
Title: "湿度",
Data: 0.63,
},
{
Title: "COD",
Data: 0.23,
},
],
Children: ListDataSec,
});
}
SecondContentData.push({
Name: "二级水厂" + (i + 1),
Time: "13:0" + i,
Id: "Secondid" + (i + 1),
LID: "Secondlid" + (i + 1),
List: [
{
Title: "浊度",
Data: 0.23,
},
{
Title: "PH",
Data: 3,
},
{
Title: "湿度",
Data: 0.63,
},
{
Title: "COD",
Data: 0.23,
},
],
});
ThirdContentData.push({
Name: "三级水厂" + (i + 1),
Time: "13:0" + i,
Id: "Thirdid" + (i + 1),
LID: "Thirdlid" + (i + 1),
List: [
{
Title: "浊度",
Data: 0.23,
},
{
Title: "PH",
Data: 3,
},
{
Title: "湿度",
Data: 0.63,
},
{
Title: "COD",
Data: 0.23,
},
],
});
FourContentData.push({
Name: "四级水厂" + (i + 1),
Time: "13:0" + i,
Id: "Fourid" + (i + 1),
LID: "Fourlid" + (i + 1),
List: [
{
Title: "浊度",
Data: 0.23,
},
{
Title: "PH",
Data: 3,
},
{
Title: "湿度",
Data: 0.63,
},
{
Title: "COD",
Data: 0.23,
},
],
});
}
this.FirstContentData = FirstContentData;
this.SecondContentData = SecondContentData;
this.ThirdContentData = ThirdContentData;
this.FourContentData = FourContentData;
// console.log("ListData",ListData)
console.log("JSON.stringify(ListData)", JSON.stringify(ListData));
},
},
};
</script>
<style lang="scss" scoped>
.HelloWorld {
display: flex;
flex-flow: row nowrap;
justify-content: center;
align-items: center;
width: 100%;
height: 100%;
background: #1f4760;
.ShowContent {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
width: calc(100% - 40px);
height: calc(100% - 40px);
.FirstContent {
width: 20%;
height: 100%;
overflow: auto;
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 2px;
background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb {
border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #eee;
}
.Itembox {
display: flex;
flex-flow: row nowrap;
width: 100%;
//height: 190px;
margin-bottom: 10px;
background: #235270;
border-radius: 5px;
cursor: pointer;
// .Itembox_PartOne {
// background: #63d2e1;
// width: 5px;
// height: 100%;
// border-radius: 5px;
// }
.Itembox_PartTwo {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
// width: calc(100% - 5px);
width: 100%;
height: 100%;
border: 3px solid #396079;
border-left: 5px solid #63d2e1;
box-sizing: border-box;
border-radius: 5px;
.ContentOutbox {
width: calc(100% - 20px);
height: calc(100% - 20px);
.TopPart {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 15px 0 15px 0;
.LeftPart {
color: #fff;
font-size: 20px;
font-weight: bold;
}
.RightPart {
color: #fff;
font-size: 16px;
}
}
.ShowCode {
color: #fff;
font-size: 16px;
}
.BottomPart {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 15px 0 15px 0;
.childitembox {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
.Numbox {
color: #fff;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.Titlebox {
color: rgb(213, 213, 213);
font-size: 14px;
}
}
}
}
}
}
.ActiveItembox {
background: #112b3a;
}
}
.SecondContent {
width: 20%;
height: 100%;
overflow: auto;
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 2px;
background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb {
border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #eee;
}
.Itembox {
display: flex;
flex-flow: row nowrap;
width: 100%;
//height: 190px;
margin-bottom: 10px;
background: #235270;
border-radius: 5px;
cursor: pointer;
// .Itembox_PartOne {
// background: #63d2e1;
// width: 5px;
// height: 100%;
// border-radius: 5px;
// }
.Itembox_PartTwo {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
// width: calc(100% - 5px);
width: 100%;
height: 100%;
border: 3px solid #396079;
border-left: 5px solid #63d2e1;
box-sizing: border-box;
border-radius: 5px;
.ContentOutbox {
width: calc(100% - 20px);
height: calc(100% - 20px);
.TopPart {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 15px 0 15px 0;
.LeftPart {
color: #fff;
font-size: 20px;
font-weight: bold;
}
.RightPart {
color: #fff;
font-size: 16px;
}
}
.ShowCode {
color: #fff;
font-size: 16px;
margin: 5px 0 5px 0;
}
.BottomPart {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 15px 0 15px 0;
.childitembox {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
.Numbox {
color: #fff;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.Titlebox {
color: rgb(213, 213, 213);
font-size: 14px;
}
}
}
}
}
}
.ActiveItembox {
background: #112b3a;
}
}
.ThirdContent {
width: 20%;
height: 100%;
overflow: auto;
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 2px;
background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb {
border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #eee;
}
.Itembox {
display: flex;
flex-flow: row nowrap;
width: 100%;
//height: 190px;
margin-bottom: 10px;
background: #235270;
border-radius: 5px;
cursor: pointer;
// .Itembox_PartOne {
// background: #63d2e1;
// width: 5px;
// height: 100%;
// border-radius: 5px;
// }
.Itembox_PartTwo {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
// width: calc(100% - 5px);
width: 100%;
height: 100%;
border: 3px solid #396079;
border-left: 5px solid #63d2e1;
box-sizing: border-box;
border-radius: 5px;
.ContentOutbox {
display: flex;
flex-flow: column;
justify-content: space-between;
width: calc(100% - 20px);
height: calc(100% - 20px);
.TopPart {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 15px 0 15px 0;
.LeftPart {
color: #fff;
font-size: 20px;
font-weight: bold;
}
.RightPart {
color: #fff;
font-size: 16px;
}
}
.ShowCode {
color: #fff;
font-size: 16px;
}
.BottomPart {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 15px 0 15px 0;
.childitembox {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
.Numbox {
color: #fff;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.Titlebox {
color: rgb(213, 213, 213);
font-size: 14px;
}
}
}
}
}
}
.ActiveItembox {
background: #112b3a;
}
}
.FourContent {
width: 20%;
height: 100%;
overflow: auto;
/*定义滚动条高宽及背景 高宽分别对应横竖滚动条的尺寸*/
&::-webkit-scrollbar {
width: 0px;
height: 0px;
background-color: #f5f5f5;
}
/*定义滚动条轨道 内阴影+圆角*/
&::-webkit-scrollbar-track {
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
border-radius: 2px;
background-color: #f5f5f5;
}
/*定义滑块 内阴影+圆角*/
&::-webkit-scrollbar-thumb {
border-radius: 2px;
-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
background-color: #eee;
}
.Itembox {
display: flex;
flex-flow: row nowrap;
width: 100%;
//height: 190px;
margin-bottom: 10px;
background: #235270;
border-radius: 5px;
cursor: pointer;
// .Itembox_PartOne {
// background: #63d2e1;
// width: 5px;
// height: 100%;
// border-radius: 5px;
// }
.Itembox_PartTwo {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
// width: calc(100% - 5px);
width: 100%;
height: 100%;
border: 3px solid #396079;
border-left: 5px solid #63d2e1;
box-sizing: border-box;
border-radius: 5px;
.ContentOutbox {
width: calc(100% - 20px);
height: calc(100% - 20px);
.TopPart {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 15px 0 15px 0;
.LeftPart {
color: #fff;
font-size: 20px;
font-weight: bold;
}
.RightPart {
color: #fff;
font-size: 16px;
}
}
.ShowCode {
color: #fff;
font-size: 16px;
}
.BottomPart {
display: flex;
flex-flow: row nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
margin: 15px 0 15px 0;
.childitembox {
display: flex;
flex-flow: column;
justify-content: center;
align-items: center;
.Numbox {
color: #fff;
font-size: 16px;
font-weight: bold;
margin-bottom: 10px;
}
.Titlebox {
color: rgb(213, 213, 213);
font-size: 14px;
}
}
}
}
}
}
.ActiveItembox {
background: #112b3a;
}
}
}
}
</style>
2.安装 AnimEvent
官方文档
https://www.npmjs.com/package/anim-event
https://github.com/anseki/anim-event
安装
npm i anim-event
使用
import AnimEvent from "anim-event";
let scrollableBox1 = document.getElementsByClassName("FirstContent")[0];
scrollableBox1.addEventListener(
"scroll",
AnimEvent.add(() => {
// d3.selectAll(".leader-line").remove();
// this.lines1 = [];
// this.lines2 = [];
// this.lines3 = [];
// this.DrawLeaderLine1();
// this.DrawLeaderLine2();
// this.DrawLeaderLine3();
this.ResetPositionDrawLine();
}),
false
);
3.安装 d3
安装
npm i d3 @6.2.0
使用
main.js
import * as d3 from "d3";
Vue.prototype.$d3 = d3;
window.d3 = d3;
组件中使用
d3.selectAll(".leader-line").remove();
d3.js 清除svg
rave.select(el).html(''); // 不推荐
rave.selectAll("svg > *").remove(); // 移除svg内部节点
rave.selectAll("svg").remove(); // 移除svg节点
4.js 异步 Promise 状态和链式调用
文档
https://www.jianshu.com/p/a465af2c9b28
使用
new Promise((resolve) => {
setTimeout(() => {
resolve("aaa");
}, 1000);
})
.then((res) => {
this.ChangShowDataFun();
console.log(res, "第一次自己处理别的业务的代码");
return res + "111";
})
.then((res) => {
d3.selectAll(".leader-line").remove();
this.lines1 = [];
this.lines2 = [];
this.lines3 = [];
console.log(res, "第二次自己处理别的业务的代码");
return res + "222";
})
.then((res) => {
this.DrawLeaderLine1();
this.DrawLeaderLine2();
this.DrawLeaderLine3();
console.log(res, "第三次自己处理别的业务的代码");
})
.then((res) => {});
5.源码
GitHub源码 https://github.com/volodyan/vue_ld_component
扫一扫
1631
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
