From c6438668f2c0569107f8bc81812fa4e00e3589e1 Mon Sep 17 00:00:00 2001
From: wanglin2 <1013335014@qq.com>
Date: Tue, 28 Jun 2022 19:55:31 +0800
Subject: [PATCH] =?UTF-8?q?fix:1.=E8=8A=82=E7=82=B9=E5=9B=BE=E6=A0=87?=
=?UTF-8?q?=E4=B8=8D=E8=83=BD=E5=88=A0=E9=99=A4=E7=9A=84=E9=97=AE=E9=A2=98?=
=?UTF-8?q?=EF=BC=9B2.=E5=B7=A5=E5=85=B7=E6=8C=89=E9=92=AE=E7=BD=AE?=
=?UTF-8?q?=E7=81=B0=E4=BB=8D=E7=84=B6=E5=8F=AF=E4=BB=A5=E7=82=B9=E5=87=BB?=
=?UTF-8?q?=E7=9A=84=E9=97=AE=E9=A2=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit
---
index.html | 2 +-
web/src/pages/Edit/components/NodeIcon.vue | 49 ++++++++++++++++++----
web/src/pages/Edit/components/Toolbar.vue | 1 +
3 files changed, 43 insertions(+), 9 deletions(-)
diff --git a/index.html b/index.html
index 26d743e3..4ae5e19e 100644
--- a/index.html
+++ b/index.html
@@ -1 +1 @@
-一个简单的web思维导图实现
\ No newline at end of file
+一个简单的web思维导图实现
\ No newline at end of file
diff --git a/web/src/pages/Edit/components/NodeIcon.vue b/web/src/pages/Edit/components/NodeIcon.vue
index 981eccf6..c1063f45 100644
--- a/web/src/pages/Edit/components/NodeIcon.vue
+++ b/web/src/pages/Edit/components/NodeIcon.vue
@@ -13,6 +13,9 @@
v-for="icon in item.list"
:key="icon.name"
v-html="icon.icon"
+ :class="{
+ selected: iconList.includes(item.type + '_' + icon.name)
+ }"
@click="setIcon(item.type, icon.name)"
>
@@ -34,7 +37,7 @@ export default {
return {
nodeIconList,
dialogVisible: false,
- icon: [],
+ iconList: [],
activeNodes: [],
};
},
@@ -43,10 +46,11 @@ export default {
this.activeNodes = args[1];
if (this.activeNodes.length > 0) {
let firstNode = this.activeNodes[0];
- this.icon = firstNode.getData("icon") || [];
+ this.iconList = firstNode.getData("icon") || [];
} else {
- this.icon = [];
+ this.iconList = [];
}
+ console.log(this.iconList, nodeIconList);
});
this.$bus.$on("showNodeIcon", () => {
this.dialogVisible = true;
@@ -59,16 +63,27 @@ export default {
* @Desc: 设置icon
*/
setIcon(type, name) {
- let index = this.icon.findIndex((item) => {
- return item.split("_")[0] === type;
+ let key = type + "_" + name;
+ let index = this.iconList.findIndex((item) => {
+ return item === key;
});
+ // 删除icon
if (index !== -1) {
- this.icon.splice(index, 1, type + "_" + name);
+ this.iconList.splice(index, 1);
} else {
- this.icon.push(type + "_" + name);
+ let typeIndex = this.iconList.findIndex((item) => {
+ return item.split("_")[0] === type;
+ });
+ // 替换icon
+ if (typeIndex !== -1) {
+ this.iconList.splice(typeIndex, 1, key);
+ } else {
+ // 增加icon
+ this.iconList.push(key);
+ }
}
this.activeNodes.forEach((node) => {
- node.setIcon([...this.icon]);
+ node.setIcon([...this.iconList]);
});
},
},
@@ -81,6 +96,10 @@ export default {
padding: 0 20px;
}
+ .deleteBtn {
+ margin-bottom: 20px;
+ }
+
.item {
margin-bottom: 20px;
font-weight: bold;
@@ -99,6 +118,20 @@ export default {
margin-right: 10px;
margin-bottom: 10px;
cursor: pointer;
+ position: relative;
+
+ &.selected {
+ &::after {
+ content: '';
+ position: absolute;
+ left: -4px;
+ top: -4px;
+ width: 28px;
+ height: 28px;
+ border-radius: 50%;
+ border: 2px solid #409EFF;
+ }
+ }
}
}
}
diff --git a/web/src/pages/Edit/components/Toolbar.vue b/web/src/pages/Edit/components/Toolbar.vue
index 960eaae3..24e33355 100644
--- a/web/src/pages/Edit/components/Toolbar.vue
+++ b/web/src/pages/Edit/components/Toolbar.vue
@@ -255,6 +255,7 @@ export default {
&.disabled {
color: #bcbcbc;
cursor: not-allowed;
+ pointer-events: none;
}
.icon {