监听组件外部点击事件 | 猎人杂货铺

监听组件外部点击事件

需求点

一般来说,在网页上点击「删除」按钮之后,会弹出一个二次确认框,等待用户确认后再删除。

一般来说,确认框弹出位置位于页面正中间,而「删除」按钮多布局会在页面的右侧。那么问题来了,用户每进行一次删除操作都少不了一个这样的步骤:从页面右侧移动到页面中间位置,再确认删除。

如果有什么优化办法,可以减少用户操作步骤和操作时间,岂不妙哉?

设计

针对这个问题,我们打算在删除按钮上做手脚:

  • 当用户点击按钮时,进入 10 秒的倒计时,同时弹出一个提示框,告知用户是确认删除
  • 如果确认删除,则在 10 秒倒计时结束之前,再次单击按钮
  • 10 秒倒计时结束自动取消删除,或者单击按钮外的其它区域取消删除

难点与解决方案

主要麻烦点在于按钮如何监听其它区域的点击事件,好在有找到一个合适的插件 v-click-outside,能够完美解决问题。

HunterX wechat
『猎人杂货铺 • 微信公众号』
0%