驱采列表加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"> <span v-else-if="row == 1 || col == 1">
{{ row == 1 ? col - 1 : row - 1 }}</span {{ row == 1 ? col - 1 : row - 1 }}</span
> >
<span v-else> <div v-else @mouseover="onMouseOver" @mouseleave="showTooltip = false">
{{ map.get(`${row - 1}-${col - 1}`) }} {{ 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>
</div> </div>
<template v-slot:titleButton> <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> </script>
<style scoped> <style scoped>

View File

@ -19,9 +19,16 @@
<span v-else-if="row == 1 || col == 1"> <span v-else-if="row == 1 || col == 1">
{{ row == 1 ? col - 1 : row - 1 }}</span {{ row == 1 ? col - 1 : row - 1 }}</span
> >
<span v-else> <div v-else @mouseover="onMouseOver" @mouseleave="showTooltip = false">
{{ map.get(`${row - 1}-${col - 1}`) }} {{ 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>
</div> </div>
<template v-slot:titleButton> <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> </script>
<style scoped> <style scoped>