antd-dropdown

最新推荐文章于 2025-05-30 18:33:11 发布

开水没有冬天

最新推荐文章于 2025-05-30 18:33:11 发布

阅读量1.5k

点赞数

CC 4.0 BY-SA版权

分类专栏： antd

本文链接：https://blog.youkuaiyun.com/weixin_42995876/article/details/99964042

antd 专栏收录该内容

23 篇文章

订阅专栏

本文详细介绍了Ant Design 7.x版本中下拉菜单组件的使用方法，包括如何创建一个基本的下拉菜单，以及如何设置菜单项为可选中状态。通过示例代码展示了如何在下拉菜单中添加hover效果，并实现菜单项的选中功能。

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

antd 7.x：

<nz-dropdown>
  <a nz-dropdown> Hover me <i nz-icon type="down"></i> </a>
  <ul nz-menu nzSelectable>
    <li nz-menu-item>
      <a>1st menu item</a>
    </li>
    <li nz-menu-item>
      <a>2nd menu item</a>
    </li>
    <li nz-menu-item>
      <a>3rd menu item</a>
    </li>
  </ul>
</nz-dropdown>

下拉选中的某一项：

// nz-menu-item上加上属性：
[nzSelected]='true'

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

开水没有冬天

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

React学习day15--antd组件Dropdown下拉菜单、导航栏、分页

weixin_46758732的博客

06-28

2563

下拉菜单 https://ant.design/components/dropdown-cn/ import React, {Component} from 'react'; import {Menu,Dropdown} from "antd"; import 'antd/dist/antd.css'; import './index.css'; import {DownOutlined} from '@ant-design/icons' const menu = ( <Menu>

antd源码解读（8）- Dropdown

weixin_34258838的博客

10-25

1632

DropDown 下拉菜单下拉菜单组件是一个可以将页面上比较冗杂的操作收纳在一个点，以便节省页面空间，达到整洁美观的目的。 Antd的下拉菜单组件中有一个点，就是他的内部元素必须是Antd的Menu组件，感觉有点捆绑的意思。 DropDownProps 这里留一个小问题，为什么触发方式是一个数组，而不是单个的 export interface DropDownProps { trig...

参与评论您还未登录，请先登录后发表或查看评论

antd的下拉菜单dropdown组件，如何控制点击空白处时，二级菜单一层一层收起，且阻止页面其他点击事件

最新发布

cjsnyxz的博客

05-30

412

摘要在Vue2项目中遇到antdv树形选择器与地图交互的bug：点击地图时下拉面板无法自动收起。通过分析发现需要手动控制面板显隐。解决方案是：1) 绑定tree-select的open属性；2) 创建click-outside自定义指令，判断点击区域并控制面板状态；3) 通过指令参数实现多组件复用。该方法优雅地解决了面板收放问题，提升了交互体验。技术栈为Vue2+antdv1.7.8，关键点在于指令的事件监听和状态管理。

antd中的dropdown组件，下拉框打不开

qq_36579455的博客

10-28

332

不要把自定义的组件当作，rc组件中触发下拉框的children。很多时候自定义组件是没有对鼠标事件做透传处理

antd中Drop Down的属性简介

WJX_601189的博客

09-16

3436

export interface DropDownProps { trigger?: ('click' | 'hover')[]; // 触发方式 overlay: React.ReactNode; // 下拉菜单所承载的内容元素，要求为Antd的Menu组件 style?: React.CSSProperties; // 行内样式 onVisibleChange?: (visible?: boolean) => void; // 监听下拉菜单出现/消失 ...

antd Select组件和 Dropdown组件踩坑·记

青蛙king的博客

03-16

6278

1、Select组件，展开下拉框后，滑动滚轮，下拉框会跟着上下滑动解决： <Select getPopupContainer={trigger => trigger.parentNode} > 2、Select组件，上下滑动下拉框里的数据，数据自动变了解决： ...

antd-Dropdown怎么写样式

05-12

<a className="ant-dropdown-link" onClick={e => e.preventDefault()}> Click me </Dropdown> ); export default App; ``` 如果需要使用内联样式，可以在组件中设置 style 属性： ```jsx import React from...

react-multilevel-dropdown:React多级下拉组件

05-04

Kontentino的react-multilevel-dropdown ReactJS多级下拉组件安装 npm install react-multilevel-dropdown NPM：用法 import Dropdown from 'react-multilevel-dropdown' ; ... < Dropdown title = 'Dropdown ...

antd-react 组件库工作以来的总结

weixin_44457030的博客

11-13

1554

antd-react 组件库工作以来的总结

react-ant-dropdown-menu:下拉菜单+基于antd的菜单

03-06

React物下拉菜单下拉菜单基于antd。安装 npm install -S @jswork/react-ant-dropdown-menu 特性姓名类型必需的默认描述班级名称细绳错误的 -- menuOptions 形状错误的 -- 用法导入css @import " ~@jswork/react-ant-dropdown-menu/dist/style.css " ; // or use sass @import " ~@jswork/react-ant-dropdown-menu/dist/style.scss " ; // customize your styles: $react-ant-dropdown-menu-options : () 导入js import ReactDemokit from '@jswork/react-demokit'

antd modal上的dropdown下拉框弹窗位置不固定+被遮挡解决

hang_zh的博客

04-10

1645

项目场景：antd框架下，Modal弹窗页面上存在Dropdown下拉组件。

a-dropdown下拉选项，当进行二次校验时，点击空白处不触发

m0_68965080的博客

10-18

530

在下拉框里面进行删除时，需要进行二次校验，但是当进行二次校验时，发现仅点击文字处生效，点击空白处不触发。在需要进行二次弹窗校验的a-menu-item标签上添加 popconfirm 属性。

antdv Select dropdownRender Input 不能输入的问题

WangYan的博客

07-26

1298

小说明：外层 div click 事件触发select开启，然后 slot 内部 div 利用 mouseleave 属性，模拟出select 的失焦 blur 事件。简言之：外层套div，然后利用Select的open属性。

antd design vue：a-dropdown在列表中同时传当前行数据和选中的key值

qq_39032149的博客

03-18

1115

rec为table当前行的数据，key是选择的内容key值。

vue实现的dropDown

april_4的博客

04-18

8561

实现：css.btn-group { min-width: 100px; height: 40px; position: relative; margin: 10px 1px; display: inline-block; vertical-align: middle; a { &:hover { ...

ant-design-vue:Dropdown, Layout, Menu, SubMenu

ZywOo_的博客

06-15

712

Dropdown 注册组件菜单出现位置常见api Layout

antd Dropdown动态加载数据

sappmis的博客

03-25

2443

antd Dropdown组件动态加载数据，主要为在子菜单下循环添加，第一个sapn元素为固定的表头。先来看看模板写法， <a-dropdown> <span class="action ant-dropdown-link user-dropdown-menu"> <a-avatar size="small" icon="user" /> <span>{{ org.orgName }}</span

AntDesign中a-drop-down组件点击无法显示菜单项问题

qq619982638的博客

07-31

690

通过查阅，发现这是Vue2中的写法，在Vue3中已经无效，在Vue3中正确写法应如下。去除slot插槽改用<template #ovelay>背景如下：在Vue3下使用ant-design组件库中的a-drop-down，将官网源码贴过来自己代码运行后没有显示出相应的菜单项。