继 Ant Design X 之后，Vue 又一 AI 组件库发布！

在 Vue 生态系统中，Element Plus 可以称得上是 Vue3 最流行的组件库了，它凭借丰富的组件 、灵活的配置 和优质的用户体验，赢得了广大开发者的喜爱和信赖。

就在近期，一个令人振奋的消息在前端开发者社区中传开 ------ 继广受好评的 ant-design-x（🔗 Ant Design X相关介绍） 之后，专为 Vue 开发者打造的 AI 组件库 Element Plus X 正式发布啦！

满足 Vue 开发者对 AI 组件的需求

随着 AI 技术在各个领域的广泛应用，开发者们越来越需要能够快速构建智能界面的工具。

Element Plus X 的出现，正是为了填补 Vue 生态系统中这一关键需求。

它基于 Element Plus 设计体系，结合了 Vue3 组合式 API 风格，为开发者们带来了一套开箱即用的 AI 交互组件库，让构建智能界面变得像搭积木一样简单。

核心组件

Element Plus X 拥有多个核心组件，每个组件都经过精心设计，以满足不同 AI 应用场景的需求。

Typewriter 打字器组件

Typewriter 组件提供了流畅的打字动画效果，让文本展示更加生动自然。

它支持中断输出、继续打字和销毁等操作，还能够对打字进度进行监听。

这种组件在模拟人类打字、逐步展示信息等场景中非常实用，能够有效提升用户体验。

Bubble 气泡消息组件

Bubble 组件主要用于聊天对话场景，能够展示对话内容，并支持自定义头像、头部、内容、底部等元素。

它内置了 Typewriter 打字器组件，可以实现文本和 markdown 简单样式的打字动画效果。

通过使用 Vue 的 slot 插槽形式定义自定义样式，Bubble 组件为开发者提供了高度的灵活性和可定制性。

BubbleList 气泡消息列表

BubbleList 组件用于展示一组对话气泡列表，支持设置列表最大高度和自动滚动功能。

它提供了多种控制滚动的方法，让开发者能够轻松实现复杂的消息列表交互。此外，BubbleList 组件还新增了对单个气泡打字完成的监听功能，满足了部分特殊需求场景。

Sender 智能输入框

Sender 组件是一个功能强大的智能输入框，支持语音交互。它对输入框组件功能进行了 1:1 还原，内置了清除和提交功能，并支持加载中、只读、禁用、最大宽度等属性设置。

Sender 组件还支持提交类型切换、语音识别，以及自定义前缀、操作列表和头部等功能，为用户提供了丰富的输入体验。

安装与使用

Element Plus X 的安装和使用非常简单，支持 npm、pnpm 和 yarn 等多种安装方式。

csharp 复制代码

# NPM 安装（稳定版）
npm install vue-element-plus-x --save

# PNPM 安装（推荐，速度更快）
pnpm add vue-element-plus-x

# Yarn 安装
yarn add vue-element-plus-x

开发者可以根据项目需求选择按需引入 或全局引入组件，灵活地构建自己的 AI 应用。

xml 复制代码

<script>
import { BubbleList, Sender } from 'vue-element-plus-x'
const list = [
  {
    content: 'Hello, Element Plus X',
    role: 'user',
  },
]
</script>

<template>
  <div style="display: flex; flex-direction: column; height: 230px; justify-content: space-between;">
    <BubbleList :list="list" />
    <Sender />
  </div>
</template>

Element Plus X 是一个开源项目，目前仍在快速迭代中。

项目团队非常欢迎开发者们通过提出功能建议 、反馈 bug 、完善文档 、优化样式等方式参与贡献。

如果你对开源项目感兴趣，想通过提交 PR 来提升自己的技术能力和项目经验，那么 Element Plus X 正是一个绝佳的机会。

Element Plus X 官网 ：https://element-plus-x.com/
Element Plus X Github 地址 ：https://github.com/HeJiaYue520/Element-Plus-X