🥳Element Plus X 正式开源啦！🥳

关注更多AI编程资讯请去AI Coding专区：https://juejin.cn/aicoding

🙊哈喽，同志萌，大家好。基于 Element-Plus 设计体系，还有最近正火的 AI 人工智能。也是在参考 ant-design-x 和 ant-design-x-vue 等较多 AI 组件库项目后。我们决定用 「Vue3 组合式 API 风格 + Element-Plus 样式风格」 的方式， 正式推出 「Vue」 版本的 「AI 界面解决方案 —— Element-Plus-X」！

前言

在 AI 应用爆发的今天，我们希望为 「Vue 开发者」 提供一套 「开箱即用的 AI 交互组件库」，让构建智能界面像搭积木一样简单。于是，我们决定将 「Element Plus X」 开源出来。

🚀 Element-Plus-X 简介

该库是一个 ant-design-x 的 Vue 复刻版本，你可以理解他是遵循 「Element Plus」 设计体系的 「Vue3 AI 组件」 库。

开源之初，我们暂时复刻了 ant-design-x 的三个组件常用组件，也是最常用的 AI 项目相关的组件。同时还新增了打字器组件

🍉 第一次做开源项目，目前我们团队只有两位维护者进行维护，还请各位兄弟稍安勿躁，给我们少许时间，慢慢迁移...

这些组件相结合，已经能实现基本的 AI 相关需求。我也在项目中，进行了实战体验。

针对实战后的使用，我们对组件的功能，在复刻 ant-design-x 的逻辑样式的同时，结合需求和 vue 的组合式 API 风格，进行了组件功能的 「拓展」 和 「性能优化」。

「下面我给大家简单介绍一下相关组件」

Typewriter 打字器组件 🆕

❝

「组件亮点：」

1. 在使用的时候，不需要考虑内存泄漏，组件内部，会在组件的生命周期中，将组件销毁。
2. 组件支持，中断输出、继续打字和销毁等操纵，也支持对组件打字中的进度的监听。

❞

❝

Typewriter组件 和 流式输出，还是有一点区别，他主要解决大篇幅字符串展现时候，设置的打字动画效果。

当然也可以把他作为 流式输出 需求的实现，我们只需要将字符串进行拼接。

支持更新 content 如果是之前的子集，则会继续输出，否则会重新输出。

❞

「💩💩💩」 原谅我设备有限，带给你不好体验 「😹😹😹」 想解锁高清无码，请移步 👉 「`Typewriter组件`^[1]」

Bubble 对话气泡 🔥

这个组件用于聊天对话，它可以展示对话内容，支持自定义头像、头部、内容、底部，并且具备打字效果和加载状态展示。该组件内置 Typewriter 打字器组件，能够实现文本和 markdown 简单样式的打字动画效果。

自定义样式均使用 Vue 「solt 插槽」 形式定义，请 「Vue 开发者」 放心使用 💞

「组件内部内置较多气泡样式」 样式基本复刻 ant-design-x 通过属性设置，且在样式上，全部使用 element-plus 的边框和阴影 样式变量

BubbleList 气泡列表 🍅

用于展示一组对话气泡列表。该组件支持设置 列表最大高度，具备 自动滚动 功能。同时，它还提供了多种 控制滚动 的方法，使用者 可以轻松调用，性能强大，无需任何开发心理负担。

「支持自定义样式」 同样也是通过 solt 插槽 的形式，设置列表的 头像、 头部、 气泡内容 、 加载状态、 脚部

❝

值得注意的是 我们在这组件中，新增了对单个气泡打字完成的监听。 通过 trigger-indices 属性指定想要监听的气泡，配合 @complete 事件对被指定的气泡进行完成事件的监听，不传则默认不监听，这是为了实现部分特殊需求场景，所添加的功能。

具体详情可以 移步 👉 「`BubbleList 气泡列表`^[2]」

❞

Sender 输入框 💭

输入框是较为重要的 AI组件 ，我们决定将它优先复刻。

我们对输入框组件功能进行了 「1:1」 还原。

1. 内置清除和提交

1. 内置加载中、只读、禁用、最大宽度 属性设置

1. 支持提交类型切换

1. 支持语音识别。内置语音识别按钮、录音中状态按钮展示。并且内置浏览器的语音识别 API，默认使用时，自动调用。如果在谷歌浏览器环境下，可能需要 🪄魔法。没有魔法的伙伴可以在 Microsoft Edge 浏览器中预览查看

1. 支持自定义 #prefix 前缀、 #action-list 操作列表 、#header 头部。支持打开头部，关闭头部 ref 实例方法。

📦 安装与使用

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line# npmnpm install vue-element-plus-x --save# pnpm （推荐）pnpm add vue-element-plus-x # yarnyarn add vue-element-plus-x

📥提供 Tree Shaking  优化

1. 「按需引入」

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line<script>import { BubbleList, Sender } from 'vue-element-plus-x'const list = [  {    content: 'Hello, Element Plus X',    role: 'user',  },]</script>
<template>  <divstyle="display: flex; flex-direction: column; height: 230px; justify-content: space-between;">    <BubbleList:list="list" />    <Sender />  </div></template>

1. 「全局引入」

ounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(lineounter(line// main.tsimport { createApp } from 'vue'import ElementPlusX from 'vue-element-plus-x'import App from './App.vue'
const app = createApp(App)// 使用 app.use() 全局引入app.use(ElementPlusX)app.mount('#app')

🤝 参与贡献

1. 「Fork 仓库」 → 2. 「创建 Feature 分支」 → 3. 「提交 Pull Request」
2. 目前项目还在快速迭代中，我们非常欢迎 💡 「功能建议」 和 🐛 「bug 反馈」

• 🐛 Bug 修复
• 💡 新功能提案
• 📝 文档完善
• 🎨 样式优化

如果你觉得项目不错，可以留下您宝贵的 star，您的 star 将是我们 这辈子的荣耀 🤩