Actions 操作列表

用于快速配置一些 AI 场景下所需要的操作按钮/功能。

何时使用

Actions 组件用于快速配置一些 AI 场景下所需要的操作按钮/功能。

代码演示

基本

基础用法。

<script setup lang="tsx">
import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { App } from 'ant-design-vue';
import { Actions, type ActionsProps } from 'ant-design-x-vue';

defineOptions({ name: 'AXActionsBasic' });

const actionItems: ActionsProps['items'] = [
  {
    key: 'retry',
    icon: <RedoOutlined />,
    label: 'Retry',
  },
  {
    key: 'copy',
    icon: <CopyOutlined />,
    label: 'Copy',
  },
];

const Demo = () => {
  const { message } = App.useApp();

  const onClick: ActionsProps['onClick'] = ({ keyPath }) => {
    // Logic for handling click events
    message.success(`you clicked ${keyPath?.join(',')}`);
  };

  return <Actions items={actionItems} onClick={onClick} />;
};

defineRender(() => {
  return (
    <App>
      <Demo />
    </App>
  );
});
</script>

隐藏源代码

更多菜单项

支持嵌套菜单项和自定义点击事件。

<script setup lang="tsx">
import { CopyOutlined, DeleteOutlined, RedoOutlined, ShareAltOutlined } from '@ant-design/icons-vue';
import { App, Modal } from 'ant-design-vue';
import { Actions, type ActionsProps } from 'ant-design-x-vue';

defineOptions({ name: 'AXActionsSub' });

const Demo = () => {
  const { message } = App.useApp();

  const actionItems: ActionsProps['items'] = [
    {
      key: 'retry',
      label: 'Retry',
      icon: <RedoOutlined />,
    },
    {
      key: 'copy',
      label: 'Copy',
      icon: <CopyOutlined />,
    },
    {
      key: 'more',
      children: [
        {
          key: 'share',
          label: 'Share',
          icon: <ShareAltOutlined />,
          children: [
            { key: 'qq', label: 'QQ' },
            { key: 'wechat', label: 'WeChat' },
          ],
        },
        { key: 'import', label: 'Import' },
        {
          key: 'delete',
          label: 'Delete',
          icon: <DeleteOutlined />,
          onItemClick: () => {
            Modal.confirm({
              title: 'Are you sure want to delete?',
              content: 'Some descriptions',
              onOk() {
                message.success('Delete successfully');
              },
              onCancel() {
                message.info('Cancel');
              },
            });
          },
          danger: true,
        },
      ],
    },
    {
      key: 'clear',
      label: 'Clear',
      icon: <DeleteOutlined />,
    },
  ];

  const onClick: ActionsProps['onClick'] = ({ keyPath }) => {
    // Logic for handling click events
    message.success(`you clicked ${keyPath.join(',')}`);
  };

  return <Actions items={actionItems} onClick={onClick} />;
};

defineRender(() => {
  return (
    <App>
      <Demo />
    </App>
  );
});
</script>

隐藏源代码

使用变体

使用 variant 属性来设置不同的样式变体。

<script setup lang="tsx">
import { CopyOutlined, RedoOutlined } from '@ant-design/icons-vue';
import { App } from 'ant-design-vue';
import { Actions, type ActionsProps } from 'ant-design-x-vue';

defineOptions({ name: 'AXActionsVariant' });

const actionItems: ActionsProps['items'] = [
  {
    key: 'retry',
    icon: <RedoOutlined />,
    label: 'Retry',
  },
  {
    key: 'copy',
    icon: <CopyOutlined />,
    label: 'Copy',
  },
];

const Demo = () => {
  const { message } = App.useApp();

  const onClick: ActionsProps['onClick'] = ({ keyPath }) => {
    // Logic for handling click events
    message.success(`you clicked ${keyPath.join(',')}`);
  };

  return <Actions items={actionItems} onClick={onClick} variant="border" />;
};

defineRender(() => {
  return (
    <App>
      <Demo />
    </App>
  );
});
</script>

隐藏源代码

API

ActionsProps

属性	说明	类型	默认值	版本
items	包含多个操作项的列表	ActionItem[]	-	-
rootClassName	根节点样式类	string	-	-
block	子操作项是否占据一行	boolean	false	-
onClick	Item 操作项被点击时的回调函数	function({ item, key, keyPath, domEvent })	-	-
style	根节点样式	CSSProperties	-	-
variant	变体	'borderless' | 'border'	'borderless'	-
prefixCls	样式类名的前缀	string	-	-

ItemType

属性	说明	类型	默认值	版本
key	自定义操作的唯一标识	string	-	-
label	自定义操作的显示标签	string	-	-
icon	自定义操作的图标	VNode	-	-
children	子操作项	ActionItem[]	-	-
triggerSubMenuAction	触发子菜单的操作	'hover' | 'click'	'hover'	-
onItemClick	点击自定义操作按钮时的回调函数	(info: ActionItem) => void	-	-

SubItemType

属性	说明	类型	默认值	版本
label	自定义操作的显示标签	string	-	-
key	自定义操作的唯一标识	string	-	-
icon	自定义操作的图标	VNode	-	-
onItemClick	点击自定义操作按钮时的回调函数	(info: ActionItem) => void	-	-
danger	语法糖，设置危险 icon	boolean	false	-

ActionItem

type ActionItem = ItemType | SubItemType;

主题变量（Design Token）

贡献者

贡献者

正在加载贡献者信息...