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

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


项目环境及版本

技术栈:Vue2(2.6.12)、ES6、Ant Design of Vue(1.7.8)

运行环境:Node(v14.17.6)、Npm(6.14.15)

一、实现步骤

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

template代码实现:

html 复制代码
<a-tree-select :open="areaOpen"
               :dropdown-style="{ maxHeight: '400px', overflow: 'auto' }"
               class="item-width tree-width"
               allowClear
               showArrow
               multiple
               treeCheckable
               :maxTagCount="1"
               v-model="selectedRegion"
               :tree-data="areaTreeData"
               :replaceFields="areaFieldNames"
               placeholder="区域">
</a-tree-select>
js 复制代码
data () {
    return {
      /** 区域选择面板是否打开 */
      areaOpen: false,
      }
}
  1. 自定义指令

    • 由于检索框有多个树形选择器,所以考虑封装自定义指令实现面板收起。
    • 参数dropdownEl:下拉面板的类名,通过 dropdownClassName 配置
    • 参数openField:绑定的 open 字段名
    • 需要在指令修改 data 里的值,需要在 bind (el, binding, vnode) 写上 vnode 参数
js 复制代码
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__;
  }
});
  1. 指令的使用
    • v-+指令名称即可使用该指令,参数写在后面。
    • 一个参数时直接传,多个参数则传一个对象
js 复制代码
<a-tree-select v-click-outside="{dropdownEl: 'areadropdown', openField: 'areaOpen'}"
               dropdownClassName="custom-tree-dropdown-style areadropdown"
>
</a-tree-select>

二、实现效果

没有录屏软件,之后再补个录屏效果吧,下次一定。

主要是点击面板,open不做改变;点击元素则切换面板收起&显示状态;点击元素外则收起面板。没问题 okok

总结

主要绑定open 属性+自定义指令实现,代码写得太漂亮了忍不住分享一下。(✿◡‿◡)

以上就是解决树形组件面板收起问题啦!下班下班,端午快乐^-^

相关推荐
RadiumAg3 分钟前
记一道有趣的面试题
前端·javascript
yangzhi_emo7 分钟前
ES6笔记2
开发语言·前端·javascript
yanlele23 分钟前
我用爬虫抓取了 25 年 5 月掘金热门面试文章
前端·javascript·面试
中微子2 小时前
React状态管理最佳实践
前端
烛阴2 小时前
void 0 的奥秘:解锁 JavaScript 中 undefined 的正确打开方式
前端·javascript
中微子2 小时前
JavaScript 事件与 React 合成事件完全指南:从入门到精通
前端
Hexene...2 小时前
【前端Vue】如何实现echarts图表根据父元素宽度自适应大小
前端·vue.js·echarts
天天扭码3 小时前
《很全面的前端面试题》——HTML篇
前端·面试·html
xw53 小时前
我犯了错,我于是为我的uni-app项目引入环境标志
前端·uni-app
!win !3 小时前
被老板怼后,我为uni-app项目引入环境标志
前端·小程序·uni-app