当前位置：首页 > news >正文

【Ant Design】解决树形组件面板收起问题

news 来源：原创 2025/6/1 11:05:30

最近在做地图开发的需求时，出现了一个bug：antdv 的树形选择器展开下拉面板时，再点击地图，面板并没有正常收起，而点击其他地方是可以正常收起的。-_-|| 没办法，遇到问题就想办法解决吧
在这里插入图片描述

项目环境及版本

技术栈：Vue2（2.6.12）、ES6、Ant Design of Vue（1.7.8）

运行环境：Node（v14.17.6）、Npm（6.14.15）

一、实现步骤

绑定 a-tree-select 的 open 属性
在查看 antdv 官方文档时，tree-select 的api介绍相对较少，想起之前做 Element Plus 的时候，有说树形组件下拉是融合了 select 跟 tree 组件的，说不定能有灵感。果然！在 select 组件介绍找到了可以通过设置 open属性来控制面板的显隐。

在这里插入图片描述

template代码实现：


<a-tree-select :open="areaOpen":dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"class="item-width tree-width"allowClearshowArrowmultipletreeCheckable:maxTagCount="1"v-model="selectedRegion":tree-data="areaTreeData":replaceFields="areaFieldNames"placeholder="区域">
</a-tree-select>

data () {return {/** 区域选择面板是否打开 */areaOpen: false,}
}

自定义指令
- 由于检索框有多个树形选择器，所以考虑封装自定义指令实现面板收起。
- 参数dropdownEl：下拉面板的类名，通过 dropdownClassName 配置
- 参数openField：绑定的 open 字段名
- 需要在指令修改 data 里的值，需要在 bind (el, binding, vnode) 写上 vnode 参数

import Vue from 'vue'
Vue.directive('click-outside', {bind (el, binding, vnode) {const vm = vnode.context;const { dropdownEl, openField } = binding.value;// 定义事件处理函数，绑定到 el 上方便解绑el.__clickOutsideHandler__ = function (event) {const dropdownPanels = document.querySelectorAll(`.${dropdownEl}`);// 1. 判断是否点击下拉面板const isClickInsideDropdown = Array.from(dropdownPanels).some(panel => panel.contains(event.target));if (isClickInsideDropdown) return// 2. 如果点击目标元素上，切换状态；否则，关闭面板const isClickOnEl = el.contains(event.target);vm[openField] = isClickInsideDropdown || isClickOnEl ? !vm[openField] : false;}document.addEventListener('click', el.__clickOutsideHandler__);},unbind (el) {// 移除事件监听document.removeEventListener('click', el.__clickOutsideHandler__);delete el.__clickOutsideHandler__;}
});

指令的使用
- v-+指令名称即可使用该指令，参数写在后面。
- 一个参数时直接传，多个参数则传一个对象

<a-tree-select v-click-outside="{dropdownEl: 'areadropdown', openField: 'areaOpen'}"dropdownClassName="custom-tree-dropdown-style areadropdown"
>
</a-tree-select>