最新要闻

广告

手机

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

iphone11大小尺寸是多少？苹果iPhone11和iPhone13的区别是什么？

 警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

警方通报辅警执法直播中被撞飞：犯罪嫌疑人已投案

家电

  1. 首页
  2. 移动通信
  3. 内容

环球今日讯！切换页签，再切换回来，v-tooltip会一直显示问题

来源：博客园


(资料图片)

仿照github的日历热度图，自己网上找了一个开源控件添加了进去。鼠标悬浮到小方块上，会显示当日记录笔记数，悬浮情况下，切换页签或者切换alt+tab到其它软件，再回来是没有问题的。问题是如果鼠标点击了小方格，切换出去再切换回来，提示框会自动出现并且一直存在(直到进行了其它操作才会消失)。

摸索了几个小时，意识到可能跟控件焦点有关。小方格原来代码是这样写的:

rect.vch__day__square(          v-for="(day, dayIndex) in week",          v-if="day.date < now"          :key="dayIndex",          :transform="getDayPosition(dayIndex)"          :width="SQUARE_SIZE - SQUARE_BORDER_SIZE",          :height="SQUARE_SIZE - SQUARE_BORDER_SIZE",          :style="{ fill: rangeColor[day.colorIndex] }",          v-tooltip="tooltipOptions(day)",         @click="$emit("day-click", day)"        )

于是我改写了

@click="$emit("day-click", day)"  这行代码为    @click="handleClick(dayIndex)"然后在函数里，调用移除焦点方法
handleClick(day) {    // 移除焦点    document.activeElement.blur();    // 发送事件   this.$emit("day-click", day);
}
再次尝试，发现可以了，嘿嘿。记录下来，希望对他人有帮助。

关键词： 鼠标悬浮 几个小时 找了一个