You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
72 lines
1.8 KiB
TypeScript
72 lines
1.8 KiB
TypeScript
1 year ago
|
import './index.less'
|
||
|
|
||
|
import { DownOutlined, EllipsisOutlined } from '@ant-design/icons-vue'
|
||
|
import type { MenuItemProps } from 'ant-design-vue'
|
||
|
import { Dropdown, Menu, Button } from 'ant-design-vue'
|
||
|
import type { VueNode } from '../../../types'
|
||
|
import type { CSSProperties, FunctionalComponent } from 'vue'
|
||
|
import { getPrefixCls } from '../../../layout/RouteContext'
|
||
|
|
||
|
interface MenuItems extends MenuItemProps {
|
||
|
name: VueNode
|
||
|
key: string
|
||
|
title?: string
|
||
|
}
|
||
|
|
||
|
export type DropdownProps = {
|
||
|
menus?: MenuItems[]
|
||
|
onSelect?: (key: string) => void
|
||
|
}
|
||
|
|
||
|
/**
|
||
|
* 一个简单的下拉菜单
|
||
|
*/
|
||
|
const DropdownButton: FunctionalComponent<DropdownProps> = (
|
||
|
{ menus, onSelect },
|
||
|
{ attrs, slots }
|
||
|
) => {
|
||
|
const tempClassName = getPrefixCls('pro-table-dropdown')
|
||
|
const menu = (
|
||
|
<Menu onClick={params => onSelect && onSelect(params.key as string)}>
|
||
|
{menus?.map(item => (
|
||
|
<Menu.Item key={item.key}>{item.name}</Menu.Item>
|
||
|
))}
|
||
|
</Menu>
|
||
|
)
|
||
|
return (
|
||
|
<Dropdown overlay={menu} class={[tempClassName, attrs.class]}>
|
||
|
<Button style={attrs.style}>
|
||
|
{slots.default?.()} <DownOutlined />
|
||
|
</Button>
|
||
|
</Dropdown>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
const TableDropdown: FunctionalComponent<DropdownProps> & {
|
||
|
Button: typeof DropdownButton
|
||
|
} = ({ onSelect, menus = [] }, { attrs, slots }) => {
|
||
|
const className = getPrefixCls('pro-table-dropdown')
|
||
|
const menu = (
|
||
|
<Menu
|
||
|
onClick={params => {
|
||
|
onSelect?.(params.key as string)
|
||
|
}}
|
||
|
>
|
||
|
{menus.map(({ key, name, ...rest }) => (
|
||
|
<Menu.Item key={key} {...rest}>
|
||
|
{name}
|
||
|
</Menu.Item>
|
||
|
))}
|
||
|
</Menu>
|
||
|
)
|
||
|
return (
|
||
|
<Dropdown overlay={menu} class={[className, attrs.class]}>
|
||
|
<a style={attrs.style as CSSProperties}>{slots.default?.() || <EllipsisOutlined />}</a>
|
||
|
</Dropdown>
|
||
|
)
|
||
|
}
|
||
|
|
||
|
TableDropdown.Button = DropdownButton
|
||
|
|
||
|
export default TableDropdown
|