驱采列表加tooltip

This commit is contained in:
joylink_zhaoerwei 2023-10-27 11:09:21 +08:00
parent 9ec7f73ff2
commit e6b1b0c63d
2 changed files with 32 additions and 4 deletions

View File

@ -19,9 +19,16 @@
<span v-else-if="row == 1 || col == 1">
{{ row == 1 ? col - 1 : row - 1 }}</span
>
<span v-else>
<div v-else @mouseover="onMouseOver" @mouseleave="showTooltip = false">
{{ map.get(`${row - 1}-${col - 1}`) }}
</span>
<q-tooltip
anchor="bottom middle"
self="bottom middle"
v-if="showTooltip"
>
{{ map.get(`${row - 1}-${col - 1}`) }}
</q-tooltip>
</div>
</div>
</div>
<template v-slot:titleButton>
@ -163,6 +170,13 @@ function updateMap() {
});
});
}
const showTooltip = ref(false);
function onMouseOver(e: MouseEvent) {
if ((e.target as HTMLElement).clientHeight > 30) {
showTooltip.value = true;
}
}
</script>
<style scoped>

View File

@ -19,9 +19,16 @@
<span v-else-if="row == 1 || col == 1">
{{ row == 1 ? col - 1 : row - 1 }}</span
>
<span v-else>
<div v-else @mouseover="onMouseOver" @mouseleave="showTooltip = false">
{{ map.get(`${row - 1}-${col - 1}`) }}
</span>
<q-tooltip
anchor="bottom middle"
self="bottom middle"
v-if="showTooltip"
>
{{ map.get(`${row - 1}-${col - 1}`) }}
</q-tooltip>
</div>
</div>
</div>
<template v-slot:titleButton>
@ -159,6 +166,13 @@ function updateMap() {
});
});
}
const showTooltip = ref(false);
function onMouseOver(e: MouseEvent) {
if ((e.target as HTMLElement).clientHeight > 30) {
showTooltip.value = true;
}
}
</script>
<style scoped>