Sender 输入框

用于聊天的输入框组件。

何时使用

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

代码演示

基本用法

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

<script setup lang="ts">
import { Sender } from '@artmate/chat'
import { Promotion } from '@element-plus/icons-vue'
import { ElButton, ElIcon, ElMessage, ElSpace } from 'element-plus'
import { onWatcherCleanup, ref, watch } from 'vue'
import StopLoading from './loading.vue'

const loading = ref(false)
const value = ref('')

// Mock send message
watch(loading, () => {
  if (loading.value) {
    const timer = setTimeout(() => {
      loading.value = false
      ElMessage.success('Send message successfully!')
    }, 3000)
    onWatcherCleanup(() => {
      clearTimeout(timer)
    })
  }
})

function submit() {
  if (!loading.value) {
    value.value = ''
    loading.value = true
    ElMessage.info('Send message!')
  } else {
    loading.value = false
    ElMessage.error('Cancel sending!')
  }
}
</script>

<template>
  <ElSpace style="width: 100%" direction="vertical" fill>
    <Sender v-model="value">
      <template #actions>
        <ElButton circle type="primary" :disabled="!value && !loading" @click="submit">
          <ElIcon v-if="!loading" color="white">
            <Promotion />
          </ElIcon>
          <ElIcon v-else color="white" size="32">
            <StopLoading />
          </ElIcon>
        </ElButton>
      </template>
    </Sender>

    <Sender model-value="Force as loading" read-only>
      <template #actions>
        <ElButton circle type="primary">
          <ElIcon color="white" size="32">
            <StopLoading />
          </ElIcon>
        </ElButton>
      </template>
    </Sender>

    <Sender model-value="Set to disabled" disabled>
      <template #actions>
        <ElButton circle type="primary" disabled>
          <ElIcon color="white">
            <Promotion />
          </ElIcon>
        </ElButton>
      </template>
    </Sender>
  </ElSpace>
</template>

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

查看源代码

提交用法

通过 submitType 控制换行与提交模式。

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

const value = ref('')

function submit() {
  ElMessage.success('Send message successfully!')
}
</script>

<template>
  <Sender
    v-model="value"
    submit-type="shiftEnter"
    placeholder="Press Shift + Enter to send message"
    @submit="submit"
  >
    <template #actions>
      <ElButton circle type="primary" @click="submit">
        <ElIcon color="white">
          <Promotion />
        </ElIcon>
      </ElButton>
    </template>
  </Sender>
</template>

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

查看源代码

展开面板

使用 header 自定义文件上传示例。

Upload Sample

Drag file here(just demo)

Support pdf, doc, xlsx, ppt, txt, image file types

<script setup lang="ts">
import { Sender, SenderHeader } from '@artmate/chat'
import { Link, Promotion, UploadFilled } from '@element-plus/icons-vue'
import { ElButton, ElIcon, ElMessage, ElSpace, ElText } from 'element-plus'
import { ref } from 'vue'

const value = ref('')
const open = ref(false)

function submit() {
  ElMessage.success('Send message successfully!')
}
</script>

<template>
  <ElSpace style="width: 100%; height: 300px" fill alignment="end">
    <Sender v-model="value" @submit="submit">
      <template #header>
        <SenderHeader title="Upload Sample" :open="open">
          <template #default>
            <ElSpace style="width: 100%" direction="vertical" alignment="center">
              <ElIcon size="50">
                <UploadFilled />
              </ElIcon>
              <div>Drag file here(just demo)</div>
              <ElText type="info">Support pdf, doc, xlsx, ppt, txt, image file types</ElText>
              <ElButton @click="ElMessage.success('Upload file successfully!')">
                Select File
              </ElButton>
            </ElSpace>
          </template>
        </SenderHeader>
      </template>
      <template #prefix>
        <ElButton circle text @click="open = !open">
          <ElIcon>
            <Link />
          </ElIcon>
        </ElButton>
      </template>
      <template #actions>
        <ElButton circle type="primary" @click="submit">
          <ElIcon color="white">
            <Promotion />
          </ElIcon>
        </ElButton>
      </template>
    </Sender>
  </ElSpace>
</template>

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

查看源代码

引用

使用 header 做引用效果。

With Reference

"Tell more about ArtChat"

<script setup lang="ts">
import { Sender, SenderHeader } from '@artmate/chat'
import { Promotion, TopLeft } from '@element-plus/icons-vue'
import { ElButton, ElIcon, ElMessage, ElSpace, ElSwitch } from 'element-plus'
import { ref } from 'vue'

const value = ref('123')
const hasRef = ref(true)

function submit() {
  ElMessage.success('Send message successfully!')
}
</script>

<template>
  <ElSpace style="width: 100%" direction="vertical" alignment="align-start" fill>
    <ElSwitch
      v-model="hasRef"
      inline-prompt
      active-text="With Reference"
      inactive-text="With Reference"
    />
    <Sender
      v-model="value"
      submit-type="shiftEnter"
      placeholder="Press Shift + Enter to send message"
      @submit="submit"
    >
      <template #header>
        <SenderHeader :open="hasRef">
          <template #title>
            <ElSpace>
              <ElIcon><TopLeft /></ElIcon>
              <div>"Tell more about ArtChat"</div>
            </ElSpace>
          </template>
        </SenderHeader>
      </template>
      <template #actions>
        <ElButton circle type="primary" @click="submit">
          <ElIcon color="white">
            <Promotion />
          </ElIcon>
        </ElButton>
      </template>
    </Sender>
  </ElSpace>
</template>

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

查看源代码

黏贴图片

配合 Attachments 进行黏贴文件上传。

Upload Sample

Upload Sample

Click or drag files to this area to upload

<script setup lang="ts">
import { Attachment, Sender, SenderHeader } from '@artmate/chat'
import { Link, Promotion, UploadFilled } from '@element-plus/icons-vue'
import { ElButton, ElIcon, ElMessage, ElSpace } from 'element-plus'
import { ref } from 'vue'

const value = ref('')
const open = ref(false)

function submit() {
  ElMessage.success('Send message successfully!')
}
</script>

<template>
  <ElSpace style="width: 100%; height: 300px" fill alignment="end">
    <Sender v-model="value" @submit="submit">
      <template #header>
        <SenderHeader title="Upload Sample" :open="open">
          <template #default>
            <Attachment title="Upload files">
              <template #icon>
                <ElIcon size="50">
                  <UploadFilled />
                </ElIcon>
              </template>
              <template #title>Upload Sample</template>
              <template #description>Click or drag files to this area to upload</template>
            </Attachment>
          </template>
        </SenderHeader>
      </template>
      <template #prefix>
        <ElButton circle text @click="open = !open">
          <ElIcon>
            <Link />
          </ElIcon>
        </ElButton>
      </template>
      <template #actions>
        <ElButton circle type="primary" @click="submit">
          <ElIcon color="white">
            <Promotion />
          </ElIcon>
        </ElButton>
      </template>
    </Sender>
  </ElSpace>
</template>

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

查看源代码

聚焦

使用 ref 选项控制聚焦。

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

const senderRef = ref<InstanceType<typeof Sender>>()

const value = ref('欢迎使用 ArtChat！')

function focus() {
  senderRef.value?.inputRef?.focus()
}

function blur() {
  senderRef.value?.inputRef?.blur()
}

function select() {
  senderRef.value?.inputRef?.select()
}
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 10px">
    <ElSpace>
      <ElButton @click="focus">Focus</ElButton>
      <ElButton @click="blur">Blur</ElButton>
      <ElButton @click="select">Select</ElButton>
    </ElSpace>
    <Sender ref="senderRef" v-model="value">
      <template #actions>
        <ElButton circle type="primary">
          <ElIcon color="white">
            <Promotion />
          </ElIcon>
        </ElButton>
      </template>
    </Sender>
  </div>
</template>

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

查看源代码

API

SenderProps

属性	说明	类型	默认值	版本
v-model	双向绑定	string	-	-
classNames	样式类名	Partial<Record<SemanticType, string>>	-	-
placeholder	占位符	string	-	-
disabled	是否禁用	boolean	false	-
loading	是否加载中	boolean	false	-
readOnly	是否让输入框只读	boolean	false	-
rootClassName	根元素样式类	string	-	-
styles	语义化定义样式	Partial<Record<SemanticType, CSSProperties>>	-	-
submitType	提交模式	SubmitType	enter | shiftEnter	-
onChange	输入框值改变的回调	(value: string, event?: FormEvent | ChangeEvent ) => void	-	-
onKeyPress	键盘按键按下的回调	(event: KeyboardEvent) => void	-	-

SemanticType

type SemanticType = 'actions' | 'input' | 'prefix';

Sender Slots

插槽名	说明
header	头部面板
footer	底部面板
components	自定义组件,会覆盖内置input组件
actions	操作按钮
prefix	前缀内容

SenderHeader

属性	说明	类型	默认值	版本
closable	是否可关闭	boolean	true	-
open	是否展开	boolean	-	-
title	标题	string	-	-
onOpenChange	展开状态改变的回调	(open: boolean) => void	-	-

SenderHeader Slots

插槽名	说明
default	内容区域
title	标题区域