Vue 使用v-title时鼠标悬浮,定位获取不到click事件,导致跳转页面悬浮无法消失问题

前言

使用v-title进行鼠标悬浮提示,(为了考虑悬浮样式多样化,引用了网上的title.js,然后在js中进行修改,目前样式如下图),引用后样式修改了,但是会出现一些问题,比如悬浮的位置不固定,正常的情况出现在文字的正上方,时而会出现左下方(定位是通过计算的哈,这个可以根据引用的js,自行修改哈),然后目前我的这个项目中出现了一种情况就是,在这个页面中时,鼠标悬浮样式,没有在点击事件之后消失,悬浮还在跳转的页面中,查看了js文件后,发现计算获取并没有问题,但是在鼠标点击跳转的时候,获取不到点击事件“click”,因为我是通过鼠标获取点击事件然后进行判断,移除鼠标悬浮样式的,所以查看啦半天很是头疼。不过最后通过各种尝试,终于找到解决了办法。。开心。。。。

一、效果

在这里插入图片描述
图为点击按钮前的鼠标状态
在这里插入图片描述
图为点击按钮后跳转到新页面后的样式(鼠标悬浮仍然存在)

二、代码查看

<div v-show="isShowBtnEdit" v-title="'点击对此建议进行编辑处理'" class="btnEdit" @click="isShowEdit">
	<i class="el-icon-edit" />
	<span>编辑</span>
</div>

查看代码发现我的代码并没有任何问题,我的点击事件也有并且也生效,但是这个悬浮却不能识别出来点击事件,这是为什么呢。。。。。。后来经过不断的尝试发现

更改后的代码
 <div v-show="isShowBtnEdit" v-title="'点击对此建议进行编辑处理'" class="btnEdit" @click="isShowEdit">
    <div v-title="'点击对此建议进行编辑处理'">
      <i class="el-icon-edit" />
      <span>编辑</span>
    </div>
  </div>

以上的代码就解决了这个问题,并且也成功的捕捉到了点击事件,那么这个问题是为什么呢?

三、示例讲解

在这里插入图片描述
在这里插入图片描述

四、结论

所以我的这个问题是因为包含关系导致无法捕获到点击事件后导致悬浮不消失,如果有同样的类型问题可以查看下可以在你的title上加个标签,避免同级使用。希望我的这个问题可以帮助到大家,如果解释的有问题多多留言指教!感谢感谢哈!!!

  • 1
    点赞
  • 0
    收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
©️2022 CSDN 皮肤主题:像素格子 设计师:CSDN官方博客 返回首页
评论

打赏作者

兜兜风~

你的鼓励将是我创作的最大动力

¥2 ¥4 ¥6 ¥10 ¥20
输入1-500的整数
余额支付 (余额:-- )
扫码支付
扫码支付:¥2
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值