【antd + vue】a-select 的下拉菜单点击事件不能被正常触发

文章探讨了在使用a-select组件和dropdownRender插槽时遇到的点击事件不触发的问题,包括下拉框自动关闭、输入框无法聚焦以及二级选项复选框文字点击后下拉框关闭等。解决方案包括在select组件外层阻止默认鼠标事件,为输入框添加点击聚焦事件,以及为二级选项文字添加聚焦处理。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

1、问题:

a-select扩展菜单使用 dropdownRender 插槽后,中的点击事件不能被正常触发,具体问题如下:

  1. 多选时,点击下拉选项,下拉框自动关闭;

  1. 下拉浮层中的输入框无法聚焦;

  1. 点击二级选项复选框后的文字,下拉浮层关闭

2、目标:

下拉框浮层正常打开和关闭

3、解决办法:

以下a、b、c分别为上述问题中的a、b、c的对应解决办法
  1. 在select组件外部包一层div,将鼠标默认事件注释掉;

@mousedown="(e) => {e.preventDefault(); }"

  1. 输入框添加 @click="e=>e.target.focus()" 事件;

  1. 点击二级选项复选框后的文字,添加下拉框聚焦事件;

document.getElementById("获取对对应文字节点").focus();

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值