【con】有内容才显示tooltip（前端bug日记2）

最新推荐文章于 2022-08-02 18:13:27 发布

Lexie_con

最新推荐文章于 2022-08-02 18:13:27 发布

阅读量277

点赞数

分类专栏：修bug日记【新】文章标签：前端 bug javascript vue.js html

本文链接：https://blog.csdn.net/Lexie_con/article/details/125908279

版权

修bug日记【新】专栏收录该内容

4 篇文章 0 订阅

订阅专栏

本文档记录了解决Vuetify组件在显示空tooltip和WebSocket连接失败的过程。作者首先遇到mouseover事件导致所有按钮tooltip异常显示的问题，通过修复v-for中的数组访问错误并调整判断条件来解决。此外，WebSocket连接被拒绝，通过修改vue.config.js配置解决了跨域问题。最终，通过理解和利用Vuetify的内置事件成功修复了tooltip显示问题。

摘要由CSDN通过智能技术生成

空tooltip显示问题

目前的情况

同一个v-btn又要加tooltip，又要弹菜单，用了Vuetify官网的复杂模板（两层template嵌套）。
默认行为：无论tooltip有没有内容（或者有没有tooltip这个键），都显示，没内容时就是一个空的小方框。
在按钮上监听mouseover事件，根据鼠标目前的位置，判断这里有没有tooltip内容，然后进行显示
问题：鼠标一放上去所有按钮的tooltip都冒出来，而且控制台报一堆错。

[Vue warn]: Error in v-on handler: “TypeError: Cannot create property
‘2’ on boolean ‘false’”

支线：WebSocket拒绝连接

WebSocket connection to ‘ws://192.168.5.3:8080/ws’ failed: Error in
connection establishment: net::ERR_CONNECTION_REFUSED

可以正常显示，但控制台一会报一个错。
检查发现终端里项目地址：

 App running at:
  - Local:   http://localhost:8080/
  - Network: http://192.168.5.3:8080/

但浏览器只能通过localhost访问，192.168.5.3拒绝连接。
——查了一下，大概是vue项目里有个地方硬编码写了这个地址，导致内部访问“自己网站”的时候，也用了这个地址。

根据CSDN博文，在vue.config.js里加了这段，问题解决。

  devServer: {
    host: 'localhost',
    port: 8080,
    client: {
      webSocketURL: 'ws://localhost:8080/ws',
    },
    headers: {
      'Access-Control-Allow-Origin': '*',
    }
  },

经过检查，cannot create property的问题是数组访问，v-for里应该写xxx[i]只写了xxx（和网上说得一模一样，只是昨天没定位到）。现在一个一个弹窗了，但没有内容还在弹。
【我再次把判断写反了，搞成了是undefined才弹窗（尽管不知为什么，不是它也弹了）……】

11:30：v-model没问题（确实如果是false就不显示了），是我判断机制有问题，有没有内容都是true
11:32：判断机制有巨大的问题，送进去的不是tooltip是按钮的内容！
11:33：undefined怎么还弹！
11:35：它怎么又false还弹了！
11:38：v-model直接给false，不改变，还显示。可能真的是哪里出问题，或者需要禁止原生行为。
11:41：或许我真的可以用Vuetify那个说不清楚的tooltip事件，先复制了文件试试。
11:52：捕获到了！tooltip是Vuetify包装好的，本身是一个类，里面有blur、focus、keydown、mouseenter、mouseleave的处理方法。看了代码（竟然没有uglify还能看懂），只有focus和mouseenter是open，那就重写这两个阻止默认事件【也就是三个点拆包的地方，只提取另外三个出来】。
12:05：好像没法重写响应函数（的里面），因为需要用到Vuetify内部的类。不过可以尝试封装这个事件？
- 说不定都不需要switchTooltips()和hasTooltip了，只依靠触发事件就能判断这个
12:09：我像个大傻子，v-on="{mouseenter: doThis, mouseleave: doThat}"本来就是标准写法，我还半天才想到……看来其实可以直接把拆包出来的响应函数传进switchTooltips()再判断？（不过反正大概不需要hasTooltip了）
12:15：写成v-on=“{mouseenter: switchTooltips(i, fake.toolTip, tooltip.mouseenter)}”，一直报错mouseenter的响应函数是undefined。大概是我自己写那个函数得返回，返回的东西才是它读到的（好像本来也就是这样，我怎么一直在犯低级错误……）
12:19：奇迹般地好了！不报任何错！完美得有点不真实！