驱采列表加tooltip
This commit is contained in:
parent
9ec7f73ff2
commit
e6b1b0c63d
@ -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>
|
||||||
|
@ -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>
|
||||||
|
Loading…
Reference in New Issue
Block a user