close dropdown

自定义指令之v-close-dropdown，该指令用于在滚动时自动关闭 Ant Design Vue 的下拉弹出框（Select、Cascader、DatePicker、ColorPicker），支持配置滚动监听目标和触发距离阈值。

适用场景

当页面或容器中存在 Ant Design Vue 的下拉组件（如 a-select、a-cascader、a-date-picker、a-color-picker），用户滚动时弹出框不会自动收起，导致弹出框悬浮在页面中。本指令通过监听滚动事件，自动关闭这些弹出框。

支持关闭的弹出框

组件	弹出框选择器
a-select	.a-select-dropdown
a-cascader	.a-cascader-dropdown
a-date-picker / a-time-picker	.a-picker-dropdownr
a-color-picker	.a-color-dropdown

指令值格式

v-close-dropdown 接受三种类型的绑定值：

1. 布尔值

值	说明
true	监听 window 滚动（默认）
false	监听元素自身滚动

<!-- 监听 window 滚动 -->
<div v-close-dropdown="true">

<!-- 监听元素自身滚动 -->
<div v-close-dropdown="false" style="overflow: auto; max-height: 400px">

2. 对象

属性	类型	默认值	说明
window	boolean	true	true 监听 window 滚动，false 监听元素自身滚动
distance	number	50	触发关闭所需的滚动距离阈值（px）。0 表示滚动即触发
classNameList	`string	Array`	[".el-popper"]默认值永远都在，不会覆盖

<!-- 监听元素自身滚动，滚动超过 100px 才触发关闭 -->
<div
  v-close-dropdown="{ window: false, distance: 100 }"
  style="overflow: auto; max-height: 400px"
>

3. 数字

直接指定滚动距离阈值（px），默认监听 window 滚动。

<!-- 监听 window 滚动，滚动超过 200px 才触发关闭 -->
<div v-close-dropdown="200">

4. 数组

直接指定classNameList

<!-- 监听 window 滚动，滚动超过 200px 才触发关闭 -->
<div v-close-dropdown="['.el-popper','xiaobu-popper']">

绑定值对照表

绑定值	滚动目标	距离阈值
true	window	50（滚动50像素触发）
false	元素自身	50（滚动50像素触发）
{ window: true }	window	50
{ window: false }	元素自身	50
{ window: false, distance: 100 }	元素自身	100px
200	window	200px

使用示例

全局注册

import closeDropdown from "@/directives/closeDropdown"

app.use(closeDropdown)

场景一：整页滚动关闭

页面整体滚动时关闭所有弹出框：

<template>
  <div v-close-dropdown="true">
    <a-select v-model:value="value" placeholder="选择">
      <a-option label="选项一" value="1" />
      <a-option label="选项二" value="2" />
    </a-select>

    <a-date-picker v-model:value="date" type="date" placeholder="选择日期" />

    <!-- 大量内容，使页面可滚动 -->
    <div v-for="i in 100" :key="i">内容行 {{ i }}</div>
  </div>
</template>

场景二：局部容器滚动关闭

表格区域滚动时关闭弹出框：

<template>
  <div v-close-dropdown="{ window: false, distance: 50 }" class="table-container"></div>
</template>

<style scoped>
.table-container {
  overflow: auto;
}
</style>

场景三：带距离阈值

避免轻微滚动就关闭弹出框，提升用户体验：

<template>
  <!-- 滚动超过 100px 才关闭弹出框 -->
  <div v-close-dropdown="100">
    <a-cascader v-model:value="cascaderValue" :options="options" />
    <div v-for="i in 200" :key="i">内容行 {{ i }}</div>
  </div>
</template>

工作原理

用户滚动
  │
  ├─ 累计滚动距离 < distance？
  │    └─ 是 → 不触发，继续监听
  │
  └─ 累计滚动距离 ≥ distance？
       └─ 是 → 标记已触发
            │
            ├─ 1. 向 document.body 派发模拟点击事件
            │     (pointerdown → mousedown → mouseup → click)
            │     → 触发 Ant Design Vue 内部的关闭逻辑
            │
            └─ 2. 兜底：直接隐藏可见的弹出框 DOM
                  (设置 display: none)

• 防抖处理：关闭操作使用 99ms 防抖（首尾均触发），避免滚动过程中频繁执行。
• 状态重置：滚动停止 101ms 后重置触发状态，下次滚动需重新达到阈值才会触发。
• 智能跳过：如果滚动停止后弹出框仍处于打开状态且未被关闭过，则不重置滚动基准位置，避免误判。

注意事项

1. 依赖 Ant Design Vue：本指令针对 Ant Design Vue 的弹出框选择器编写，不适用于其他 UI 库。
2. 弹出框选择器：如 Ant Design Vue 版本更新导致弹出框类名变更，需同步更新指令内的选择器。
3. distance 为 0 时：任何滚动都会立即触发关闭，适用于大多数场景。
4. distance 大于 0 时：仅当累计滚动距离超过阈值后才触发，适合需要精确操作弹出框的场景。
5. 模拟点击事件：指令通过向 document.body 派发坐标为 (0, 0) 的模拟点击事件来关闭弹出框，不会影响其他正常交互。