空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:奇迹般地好了!不报任何错!完美得有点不真实!