Sender 输入框 💭

介绍

Sender 是用于聊天的输入框组件。具备丰富的交互功能和自定义特性。

基础用法

基础用法

这是一个 Sender 输入框

<template>
  <Sender v-model="value" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Sender } from 'vue-chat-pro'
const value = ref('')
</script>

<style scoped></style>

提示词

提示词

这是一个 Sender 输入框，并设置了提示词

<template>
  <Sender v-model="value" placeholder="请输入内容" />
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Sender } from 'vue-chat-pro'
const value = ref('')
</script>

<style scoped></style>

组件的各种状态

禁用状态

只读状态

Loading状态

禁用状态

这是一个 Sender 输入框，并设置了禁用状态

<template>
  <el-text class="mx-1" type="primary">禁用状态</el-text>
  <Sender ref="senderRef" v-model="value" placeholder="请输入内容" disabled />
  <br />
  <el-text class="mx-1" type="success">只读状态</el-text>
  <Sender ref="senderRef2" v-model="value2" readonly />
  <br />
  <el-text class="mx-1" type="info">Loading状态</el-text>
  <Sender ref="senderRef3" v-model="value3" loading />
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Sender } from 'vue-chat-pro'
const value = ref('')
const value2 = ref('只读状态')
const value3 = ref('loading状态')
const senderRef = ref<InstanceType<typeof Sender>>()
const senderRef2 = ref<InstanceType<typeof Sender>>()
const senderRef3 = ref<InstanceType<typeof Sender>>()
</script>

<style scoped></style>
loading

实例方法

实例方法

这是一个 Sender 输入框，并设置了提示词

<template>
  <div style="display: flex;flex-direction: column;gap: 10px;">
    <div style="display: flex;">
      <el-button type="primary" @click="handleSubmit" :disabled="!value">提交内容</el-button>
      <el-button type="warning" @click="handleClear" :disabled="!value">清空内容</el-button>
    </div>
    <Sender ref="senderRef" v-model="value" placeholder="请输入内容" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Sender } from 'vue-chat-pro'
import { ElMessage } from 'element-plus'
const value = ref('')
const senderRef = ref<InstanceType<typeof Sender>>()

const handleSubmit = () => {
  senderRef.value?.handleInputSubmit()
  ElMessage.success('提交成功')
}

const handleClear = () => {
  senderRef.value?.handleInputClear()
  ElMessage.success('清空成功')
}
</script>

<style scoped></style>

提交方法

enter shiftEnter

提交方法

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

<template>
  <div style="display: flex; flex-direction: column; gap: 12px;">
    <el-radio-group v-model="activeName">
      <el-radio-button value="enter">
        enter
      </el-radio-button>
      <el-radio-button value="shiftEnter">
        shiftEnter
      </el-radio-button>
    </el-radio-group>
    <Sender v-model="senderValue" :submit-type="activeName" :loading="senderLoading" @onSubmit="handleSubmit" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Sender } from 'vue-chat-pro'
import type { SenderProps } from 'vue-chat-pro/types'
import { ElMessage } from 'element-plus'
const activeName = ref<SenderProps['submitType']>('enter')
const senderValue = ref('')
const senderLoading = ref<SenderProps['loading']>(false)

const handleSubmit = (value: string) => {
  ElMessage.info(`发送中`)

  senderLoading.value = true
  setTimeout(() => {
    // 可以在控制台 查看打印结果
    console.log('submit-> value：', value)
    console.log('submit-> senderValue', senderValue.value)
    senderLoading.value = false
    ElMessage.success(`发送成功`)
  }, 2000)
}
</script>

<style scoped></style>

变体

通过 variant 属性设置输入框的变体。默认 'default' | 上下结构 'updown'

深度思考

左边是自定义 prefix 前缀 右边是自定义 操作列表

变体

通过 variants 控制输入框的变体。默认

<template>
  <Sender v-model="value1" variants="default" />
  <br />
  <Sender v-model="value2" variants="updown">
    <template #prefix>
      <div style="display: flex; align-items: center; gap: 8px; flex-wrap: wrap;">
        <el-button round plain color="#626aef">
          <el-icon>
            <Paperclip />
          </el-icon>
        </el-button>

        <div :class="{ isSelect }"
          style="display: flex; align-items: center; gap: 4px; padding: 2px 12px; border: 1px solid silver; border-radius: 15px; cursor: pointer; font-size: 12px;"
          @click="isSelect = !isSelect">
          <el-icon>
            <ElementPlus />
          </el-icon>
          <span>深度思考</span>
        </div>

        左边是自定义 prefix 前缀 右边是自定义 操作列表
      </div>
    </template>
  </Sender>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Sender } from 'vue-chat-pro'
import { Paperclip, ElementPlus } from '@element-plus/icons-vue'
const value1 = ref('')
const value2 = ref('')
const isSelect = ref<boolean>(false)
</script>

<style scoped lang="scss">
.isSelect {
  color: #626aef;
  border: 1px solid #626aef !important;
  border-radius: 15px;
  padding: 3px 12px;
  font-weight: 700;
}
</style>

自定义操作列表

通过 actionsList 插槽设置输入框的操作列表。

自定义操作列表

通过 actionsList 插槽设置输入框的操作列表。

<template>
  <Sender v-model="value">
    <!-- 自定义操作列表 -->
    <template #actionsList>
      <div class="action-list-self-wrap">
        <el-button type="danger" circle>
          <el-icon>
            <Delete />
          </el-icon>
        </el-button>
        <el-button type="primary" circle style="rotate: -45deg;">
          <el-icon>
            <Position />
          </el-icon>
        </el-button>
      </div>
    </template>
  </Sender>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import { Sender } from 'vue-chat-pro'
import { Delete, Position } from '@element-plus/icons-vue'
const value = ref('')
</script>

<style scoped lang="scss">
.action-list-self-wrap {
  display: flex;
  align-items: center;

  &>span {
    width: 120px;
    font-weight: 600;
    color: var(--el-color-primary);
  }
}
</style>

自定义头部

通过 header 插槽可以自定义输入框的头部内容。

相关方法：

• senderRef.value.handleHeaderOpen() - 打开头部容器
• senderRef.value.handleHeaderClose() - 关闭头部容器

自定义头部

通过 header 插槽设置输入框的头部。

<template>
  <div style="height: 350px; display: flex;flex-direction: column;justify-content: space-between;">
    <el-button @click="handleClick">打开header</el-button>
    <Sender v-model="senderValue" ref="senderRef" @on-input="handleChange" @on-submit="handleSubmit" variants="updown">
      <template #prefix>
        <el-button type="primary" @click="handleClickClose">关闭header</el-button>
      </template>

      <template #header>
        <div class="header-self-wrap">
          <div class="header-self-title">
            <div class="header-left">
              💯 欢迎使用 VueChat
            </div>
            <div class="header-right">
              <el-button @click="handleClickClose">
                <el-icon>
                  <CircleClose />
                </el-icon>
                <span>关闭头部</span>
              </el-button>
            </div>
          </div>
          <div class="header-self-content">
            🦜 自定义头部内容
          </div>
        </div>
      </template>
    </Sender>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue'
import { Sender } from 'vue-chat-pro'
const senderValue = ref('')
const senderRef = ref<InstanceType<typeof Sender>>()

const handleClick = () => {
  senderRef.value?.handleHeaderOpen()
  senderRef.value?.handleFocusDefault()
}
const handleClickClose = () => {
  senderRef.value?.handleHeaderClose()
  senderRef.value?.handleFocusDefault()
}
const handleChange = (e) => {
  console.log(e);
}
const handleSubmit = (e) => {
  console.log(e);
}
</script>

<style scoped lang="scss">
.header-self-wrap {
  display: flex;
  flex-direction: column;
  padding: 16px;
  height: 200px;

  .header-self-title {
    width: 100%;
    display: flex;
    height: 30px;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 8px;
  }

  .header-self-content {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    color: #626aef;
    font-weight: 600;
  }
}
</style>

Sender Attributes

属性	说明	类型	默认值	版本
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	-
variants	变体	default | updown	default	-

Sender Event

事件名	说明
onInput	输入框值改变的回调
onSubmit	提交时的回调

Ref 实例方法

方法名	说明
handleHeaderOpen	打开头部容器
handleHeaderClose	关闭头部容器
handleFooterClose	关闭底部容器
handleFooterOpen	打开底部容器
handleFocusDefault	聚焦默认变体
handleFocusupDown	聚焦上下变体
handleInputSubmit	提交输入框
handleInputClear	清除输入框

Sender Slots

插槽名	说明
header	头部面板
footer	底部面板
actionsList	操作按钮
prefix	前缀内容