|
@@ -1,6 +1,11 @@
|
|
|
<template>
|
|
|
- <!-- ${focus ? 'active' : ''} -->
|
|
|
- <ui-group-option :class="`sign-guide `" @click.stop="clickHandler">
|
|
|
+ <!-- -->
|
|
|
+ <ui-group-option
|
|
|
+ :class="`sign-guide ${hover ? 'active' : ''} `"
|
|
|
+ @click.stop="clickHandler"
|
|
|
+ @mouseenter="enterHandler"
|
|
|
+ @mouseleave="leaveHandler"
|
|
|
+ >
|
|
|
<div class="info">
|
|
|
<div class="guide-cover">
|
|
|
<span class="img">
|
|
@@ -54,6 +59,7 @@ const actions = {
|
|
|
};
|
|
|
|
|
|
const focus = computed(() => custom.showPath === props.path.id);
|
|
|
+const hover = ref(false);
|
|
|
const node = computed(() => getPathNode(props.path.id));
|
|
|
watchEffect((onCleanup) => {
|
|
|
if (!node.value) return;
|
|
@@ -61,10 +67,29 @@ watchEffect((onCleanup) => {
|
|
|
const focusHandler = (f: boolean) => {
|
|
|
node.value?.fly();
|
|
|
};
|
|
|
- $node.bus.on("focus", focusHandler);
|
|
|
+ const leaveHandler = () => {
|
|
|
+ hover.value = false;
|
|
|
+ };
|
|
|
+ const enterHandler = () => {
|
|
|
+ hover.value = true;
|
|
|
+ };
|
|
|
+
|
|
|
+ $node.bus.on("enter", enterHandler);
|
|
|
+ $node.bus.on("leave", leaveHandler);
|
|
|
onCleanup(() => $node.bus.off("focus", focusHandler));
|
|
|
});
|
|
|
|
|
|
+const leaveHandler = () => {
|
|
|
+ hover.value = false;
|
|
|
+ node.value?.highlight && node.value?.highlight(false);
|
|
|
+};
|
|
|
+
|
|
|
+const enterHandler = () => {
|
|
|
+ hover.value = true;
|
|
|
+ console.log("enter");
|
|
|
+ node.value?.highlight && node.value?.highlight(true);
|
|
|
+};
|
|
|
+
|
|
|
const clickHandler = () => {
|
|
|
node.value?.fly();
|
|
|
};
|
|
@@ -137,6 +162,7 @@ const clickHandler = () => {
|
|
|
|
|
|
p {
|
|
|
color: #fff;
|
|
|
+ word-break: break-all;
|
|
|
font-size: 14px;
|
|
|
margin-bottom: 6px;
|
|
|
}
|