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

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

vue自定义下拉菜单,点击下拉其它空白区域,下拉消失_第1张图片

 

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

html:

vue自定义下拉菜单,点击下拉其它空白区域,下拉消失_第2张图片

js:

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

vue自定义下拉菜单,点击下拉其它空白区域,下拉消失_第3张图片

2、methods方法区域

vue自定义下拉菜单,点击下拉其它空白区域,下拉消失_第4张图片

备注:

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

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

参考:https://blog.csdn.net/qq_40190624/article/details/82184103

你可能感兴趣的:(vue)