跳到主要内容

Menu 下拉菜单

下拉菜单，常见用于一些表单的筛选

示例​

import { Menu, Form } from '@/duxui'

const itemRef = useRef()

<Menu round>
  <Form.Item field='show1'>
    <Menu.Item
      title='显示1'
      options={[{ name: '标题1', value: 1 }, { name: '标题2', value: 2 }]}
    />
  </Form.Item>
  <Form.Item field='show2'>
    <Menu.Item
      column={2}
      title='多列'
      options={[{ name: 'ABC1', value: 1 }, { name: 'ABC2', value: 2 }, { name: 'ABC3', value: 3 }]}
    />
  </Form.Item>
  <Form.Item field='show3'>
    <Menu.Item
      title='自定义内容'
      ref={itemRef}
    >
      <Text>自定义显示</Text>
      <Button onClick={() => itemRef.current.toggle()}>关闭</Button>
    </Menu.Item>
  </Form.Item>
</Menu>

Props​

继承自 Layout Props

round​

弹出的菜单是否显示圆角

类型必填默认值
boolean否false

Menu.Item 只能放在 Menu 的子元素中，但是不限制是一级子元素

继承自 Row Props

title​

菜单项标题

类型必填默认值
string是

options​

菜单项目

类型必填默认值
{ value: any name: string }[]是

cancel​

是否能取消选中项目

类型必填默认值
boolean否false

column​

列数

类型必填默认值
number否1

align​

文本对齐方式

类型必填默认值
enum('left', 'center', 'right')否left

value​

当前选中的值

类型必填默认值
any否

onChange​

值改变时触发的事件

类型必填默认值
(value: any) => void否

renderIcon​

自定义图标区域

类型必填默认值
ReactElement否

children​

自定义渲染弹出元素，优先级高于options

类型必填默认值
ReactElement否

onClick​

点击事件回调函数，当传入点击事件参数时，默认的点击事件将不会被触发

类型必填默认值
() => void否

toggle()​

切换菜单项的显示/隐藏状态