Suggestion 快捷指令

用于给予用户快捷提示的组件。

何时使用

需要构建一个对话场景下的输入框。

代码演示

基本

基础用法，受控进行状态管理。自定义触发器。

<script setup lang="tsx">
import { RedditOutlined } from '@ant-design/icons-vue';
import { Input } from 'ant-design-vue';
import { Suggestion, type SuggestionProps } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXSuggestionBasic' });

type SuggestionItems = Exclude<SuggestionProps['items'], () => void>;

const suggestions: SuggestionItems = [
  { label: 'Write a report', value: 'report' },
  { label: 'Draw a picture', value: 'draw' },
  {
    label: 'Check some knowledge',
    value: 'knowledge',
    icon: <RedditOutlined />,
    children: [
      {
        label: 'About React',
        value: 'react',
      },
      {
        label: 'About Ant Design',
        value: 'antd',
      },
    ],
  },
];

const Demo = () => {
  const value = ref('')

  const updateValue = (v: string) => {
    value.value = v
  }

  return (
    <Suggestion
      items={suggestions}
      onSelect={(itemVal) => {
        updateValue(`[${itemVal}]:`);
      }}
      children={({ onTrigger, onKeyDown }) => {
        return (
          <Input
            value={value.value}
            onChange={(e) => {
              const nextVal = e.target.value
              if (nextVal === '/') {
                onTrigger();
              } else if (!nextVal) {
                onTrigger(false);
              }
              updateValue(nextVal);
            }}
            onKeydown={onKeyDown}
            placeholder="输入 / 获取建议"
          />
        );
      }}
    />
  );
};

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

隐藏源代码

整行宽度

通过 block 改为整行展示，extra 可用于配置额外信息。

<script setup lang="tsx">
import { Input } from 'ant-design-vue';
import { Suggestion, type SuggestionProps } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXSuggestionBlock' });

type SuggestionItems = Exclude<SuggestionProps['items'], () => void>;

const suggestions: SuggestionItems = [
  { label: 'Write a report', value: 'report' },
  { label: 'Draw a picture', value: 'draw' },
  {
    label: 'Check some knowledge',
    value: 'knowledge',
    extra: 'Extra Info',
  },
];

const value = ref('');

defineRender(() => {
  return (
    <Suggestion
      items={suggestions}
      onSelect={(itemVal) => {
        value.value = `[${itemVal}]:`;
      }}
      block
      children={({ onTrigger, onKeyDown }) => {
        return (
          <Input
            value={value.value}
            onChange={(e) => {
              const nextVal = e.target.value
              if (nextVal === '/') {
                onTrigger();
              } else if (!nextVal) {
                onTrigger(false);
              }
              value.value = nextVal;
            }}
            onKeydown={onKeyDown}
            placeholder="输入 / 获取建议"
          />
        );
      }}
    />
  )
});
</script>

隐藏源代码

自定义

根据输入动态展示建议项的多标签示例。

 

可任意输入 / 与 # 多次获取建议

<script setup lang="tsx">
import { Select } from 'ant-design-vue';
import { Suggestion } from 'ant-design-x-vue';
import { ref } from 'vue';

defineOptions({ name: 'AXSuggestionTrigger' });

const uuid = ref(0);
const tags = ref<string[]>([]);
const value = ref('');

defineRender(() => {
  return (
    <Suggestion<string>
      items={(info) => [{ label: `Trigger by '${info}'`, value: String(info) }]}
      onSelect={(info) => {
        uuid.value += 1;
        tags.value = [...tags.value, `Cell_${uuid.value}`];
        value.value = value.value.replace(info, '');
      }}
      children={({ onTrigger, onKeyDown }) => {
        return (
          <Select
            value={tags.value}
            style={{ width: '100%' }}
            mode="tags"
            open={false}
            searchValue={value.value}
            onChange={(nextTags) => {
              if ((nextTags as string[]).length < tags.value.length) {
                tags.value = nextTags as string[];
              }
            }}
            onSearch={(nextVal) => {
              value.value = nextVal;
            }}
            onKeydown={(e) => {
              if (e.key === '/' || e.key === '#') {
                onTrigger(e.key);
              }
              onKeyDown(e);
            }}
            placeholder="可任意输入 / 与 # 多次获取建议"
          />
        );
      }}
    />
  )
});
</script>

隐藏源代码

API

SuggestionsProps

属性	说明	类型	默认值	版本
block	是否整行宽度	boolean	false	-
children	自定义输入框	({ onTrigger, onKeyDown }) => VNode	-	-
items	建议项列表	SuggestionItem[] | ((info: T) => SuggestionItem[])	-	-
open	受控打开面板	boolean	-	-
rootClassName	根元素样式类名	string	-	-
onSelect	选中建议项回调	(value: string) => void	-	-
onOpenChange	面板打开状态变化回调	(open: boolean) => void	-	-

onTrigger

type onTrigger<T> = (info: T | false) => void;

Suggestion 接受泛型以自定义传递给 items renderProps 的参数类型，当传递 false 时，则关闭建议面板。

SuggestionItem

属性	说明	类型	默认值	版本
children	子项目	SuggestionItem[]	-	-
extra	建议项额外内容	VNode | string	-	-
icon	建议项图标	VNode	-	-
label	建议项显示内容	VNode | string	-	-
value	建议项值	string	-	-

主题变量（Design Token）