vue自定义下拉菜单，点击下拉其它空白区域，下拉消失

Love The Way You Lie 2021-09-17 18:10 913阅读 0赞

现有一个需求，点击按钮button，显示下拉选项，点击红色区域之外的地方，下拉消失！

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70][]

直接上代码【通过vue的自定义指令进行操作】：

html：

![20190114180923173.png][]

js：

1、directives自定义指令，具体看官网api

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70 1][]

2、methods方法区域

![20190114181112202.png][]

备注：

1、设置自定义事件v-clickoutside

2、通过selectFlag【true|false】来控制显示隐藏，有时间的话，可以用transform做上动画的效果

参考：[https://blog.csdn.net/qq\_40190624/article/details/82184103][https_blog.csdn.net_qq_40190624_article_details_82184103]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70]: /images/20210812/e48fbef596034b4ebab8838efd7bda57.png
[20190114180923173.png]: /images/20210812/6485bdd626ea4bc89abca32423ecf443.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzM5OTg1NTEx_size_16_color_FFFFFF_t_70 1]: /images/20210812/a88dc0ff4c674a44ad78d0d5b552dea8.png
[20190114181112202.png]: /images/20210812/ee244403f5b4487bbb5c138c0b273563.png
[https_blog.csdn.net_qq_40190624_article_details_82184103]: https://blog.csdn.net/qq_40190624/article/details/82184103

发表评论取消回复

表情：

评论列表（有 0 条评论，913人围观）

还没有评论，来说两句吧...

相关阅读

相关下拉菜单

![在这里插入图片描述][20200614163018558.gif] <!DOCTYPE html> <html lang="en"> <head> <meta c

ゝ一世哀愁。/ 2023年02月17日 14:30/ 0 赞/ 166 阅读

相关 jquery点击下拉菜单鼠标移开隐藏(可模拟下拉框)

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR

太过爱你忘了你带给我的痛/ 2022年09月27日 12:28/ 0 赞/ 141 阅读

相关点击input出现下拉树菜单

[下载地址][Link 1] 原生js实现可多选的下拉树选项，无须引用第三方插件不要引入jQuery ![1631560630.png][] dd: [Link 1]

布满荆棘的人生/ 2022年09月13日 05:22/ 0 赞/ 119 阅读

相关下拉菜单

<!DOCTYPE HTML> <html> <head> <meta http-equiv="Content-Type" content="text/html;

港控/mmm°/ 2022年06月18日 10:51/ 0 赞/ 283 阅读

相关 Vue实现自定义下拉菜单

先看例子，后面有对用到的知识点的总结效果图： ![70][] 实现代码如下： <!DOCTYPE html> <html lang="en">

墨蓝/ 2022年05月20日 07:58/ 0 赞/ 304 阅读

相关 Bootstrap 自定义下拉菜单

原因有 `三角形` ![这里写图片描述][70] 代码 html <span data-toggle="dropdown" class="

快来打我*/ 2022年05月18日 01:42/ 0 赞/ 222 阅读

相关 vue 自定义指令实现点击下拉菜单外部区域关闭下拉菜单

我们来看下常见的下拉菜单： ![在这里插入图片描述][20181220151530308.png] 这里我们点击菜单，下拉菜单就会显示，点击下拉菜单以外的区域就会隐藏。

冷不防/ 2022年04月03日 05:39/ 0 赞/ 1293 阅读

相关实现点击空白区域隐藏下拉弹窗

背景 -------------------- 中后台项目依赖Element UI 组件库，组件库中Select 选择器、Popover 弹出框等组件弹出内容后，点击组

青旅半醒/ 2022年02月20日 12:55/ 0 赞/ 1255 阅读

相关【下拉菜单】随前一个下拉菜单内容变化而变化的下拉菜单

`` <body> <form id="form1" runat="server" method="post"> <!--省份下拉菜单

淡淡的烟草味﹌/ 2021年09月26日 00:42/ 0 赞/ 388 阅读

相关 vue自定义下拉菜单，点击下拉其它空白区域，下拉消失

现有一个需求，点击按钮button，显示下拉选项，点击红色区域之外的地方，下拉消失！ ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow

Love The Way You Lie/ 2021年09月17日 18:10/ 0 赞/ 914 阅读