Suggestion 快捷指令

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

何时使用

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

代码演示

基本

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

<script setup lang="ts">
import type { RenderChildrenProps } from '@artmate/chat'
import type { CascaderOption } from 'element-plus'
import { Sender, Suggestion } from '@artmate/chat'
import { Promotion } from '@element-plus/icons-vue'
import { ElButton, ElIcon } from 'element-plus'
import { ref } from 'vue'

const value = ref('')

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

function onSelect(val: string) {
  value.value = `[${val}]:`
}

function senderChange(val: string, onTrigger: RenderChildrenProps<any>['onTrigger']) {
  if (val === '/') {
    onTrigger()
  } else {
    onTrigger(false)
  }
}
</script>

<template>
  <Suggestion :items="suggestions" @select="onSelect">
    <template #default="{ onKeyDown, onTrigger }">
      <Sender
        v-model="value"
        placeholder="输入 / 获取建议"
        :on-key-press="onKeyDown"
        @input="senderChange(value, onTrigger)"
      >
        <template #actions>
          <ElButton circle type="primary">
            <ElIcon color="white">
              <Promotion />
            </ElIcon>
          </ElButton>
        </template>
      </Sender>
    </template>
  </Suggestion>
</template>

<style lang="scss" scoped></style>

查看源代码

整行宽度

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

<script setup lang="ts">
import type { RenderChildrenProps } from '@artmate/chat'
import type { CascaderOption } from 'element-plus'
import { Sender, Suggestion } from '@artmate/chat'
import { Promotion } from '@element-plus/icons-vue'
import { ElButton, ElIcon } from 'element-plus'
import { ref } from 'vue'

const value = ref('')

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

function onSelect(val: string) {
  value.value = `[${val}]:`
}

function senderChange(val: string, onTrigger: RenderChildrenProps<any>['onTrigger']) {
  if (val === '/') {
    onTrigger()
  } else {
    onTrigger(false)
  }
}
</script>

<template>
  <Suggestion :items="suggestions" block @select="onSelect">
    <template #default="{ onKeyDown, onTrigger }">
      <Sender
        v-model="value"
        placeholder="输入 / 获取建议"
        :on-key-press="onKeyDown"
        @input="senderChange(value, onTrigger)"
      >
        <template #actions>
          <ElButton circle type="primary">
            <ElIcon color="white">
              <Promotion />
            </ElIcon>
          </ElButton>
        </template>
      </Sender>
    </template>
  </Suggestion>
</template>

<style lang="scss" scoped></style>

查看源代码

自定义

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

<script setup lang="ts">
import type { RenderChildrenProps } from '@artmate/chat'
import type { CascaderOption } from 'element-plus'
import { Suggestion } from '@artmate/chat'
import { ElInputTag } from 'element-plus'
import { ref } from 'vue'

const tags = ref<string[]>([])

const uuid = ref(0)

const suggestions: (info?: any) => CascaderOption[] = (info) => {
  return [{ label: `Trigger by '${info}'`, value: String(info) }]
}

function onSelect() {
  uuid.value++
  tags.value = [...tags.value, `Cell_${uuid.value}`]
}

function senderChange(e: KeyboardEvent, onTrigger: RenderChildrenProps<any>['onTrigger']) {
  if (e.key === '/' || e.key === '#') {
    onTrigger(e.key)
  } else {
    onTrigger(false)
  }
}
</script>

<template>
  <Suggestion :items="suggestions" @select="onSelect">
    <template #default="{ onKeyDown, onTrigger }">
      <ElInputTag
        v-model="tags"
        placeholder="可任意输入 / 与 # 多次获取建议"
        :save-on-blur="false"
        trigger="Space"
        @keypress="senderChange($event, onTrigger)"
        @keydown="onKeyDown"
      />
    </template>
  </Suggestion>
</template>

<style lang="scss" scoped></style>

查看源代码

Suggestions Props

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

onTrigger

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

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

Suggestions Exposed

该组件为泛型组件，获取组件实例类型需使用 vue-component-type-helpers

Suggestions Slots

插槽名	说明	类型
default	用于自定义输入框	{ onTrigger, onKeyDown }

CascaderOption

继承自 CascaderPanel 的 options 属性，用于自定义 Suggestion 的 items。

属性	说明	类型	默认值	版本
children	子项目	CascaderOption[]	-	-
label	建议项显示内容	string	-	-
value	建议项值	string	-	-