uniapp 支持div获取、失去焦点

遇到的问题场景:点击按钮 出现自己写的弹窗,点击其他空白处 消失弹窗

思路:点击按钮的时候 获取出现弹窗的focus事件,让它聚焦;点击其他地方相当于这个弹窗失去焦点使用blur事件;同时我们需要给弹窗加一个tabindex="-1" 属性,否者blur事件不生效。

第一步:为元素绑定ref,添加tabindex属性,绑定blur事件

第二步:为div获取焦点写事件

第三步:为div失去焦点写事件

 

贴示:

(1)获取焦点需要用$nextTick包含,否则会获取不到

(2)$refs加变量方法 ['tip'+id],id为变量

注意:测试后,仅支持H5,小程序暂不支持

 

posted @   蓦然JL  阅读(3298)  评论(0编辑  收藏  举报
相关博文:
阅读排行:
· TypeScript + Deepseek 打造卜卦网站:技术与玄学的结合
· Manus的开源复刻OpenManus初探
· AI 智能体引爆开源社区「GitHub 热点速览」
· 从HTTP原因短语缺失研究HTTP/2和HTTP/3的设计差异
· 三行代码完成国际化适配,妙~啊~
  1. 1 唯一 G.E.M.邓紫棋
  2. 2 他只是经过 白敬亭 魏大勋
  3. 3 Uptown Funk Mark Ronson / Bruno Mars
  4. 4 在你的身边 盛哲
  5. 5 Edge of My Life Manafest
  6. 6 凄美地 郭顶
  7. 7 Wonderful Tonight Boyce Avenue
  8. 8 心如止水 Ice Paper
  9. 9 Sugar Maroon 5
  10. 10 静谧时光 JIAxNING
  11. 11 Right Now (Na Na Na) Aamir
  12. 12 Dangerously Charlie Puth
  13. 13 Someone You Loved Madilyn Paige
  14. 14 Shape of My Heart Boyce Avenue
  15. 15 We Can't Stop Boyce Avenue / Bea Miller
  16. 16 Perfect Boyce Avenue
  17. 17 Love Me Like You Do Boyce Avenue
  18. 18 Thank You Boyce Avenue
  19. 19 Don’t Wanna Know Boyce Avenue / Sarah Hyland
他只是经过 - 白敬亭 魏大勋
00:00 / 00:00
An audio error has occurred, player will skip forward in 2 seconds.

Not available

访问主页
关注我
关注微博
私信我
返回顶部
点击右上角即可分享
微信分享提示