[特殊字符]Element Plus X 正式开源啦！[特殊字符]

🙊哈喽，同志萌，大家好。基于 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 开源出来。

image.png

🚀 Element-Plus-X 简介

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

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

🌟 已实现组件

组件名	描述	文档链接
Typewriter	打字动画组件	📄 文档[1]
Bubble	气泡消息组件	📄 文档[2]
BubbleList	气泡消息列表	📄 文档[3]
Sender	智能输入框（含语音交互）	📄 文档[4]

ant-design-x 相关组件我们将在后续版本，陆续复刻推出

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

如果有感兴趣的小伙伴，也非常欢迎加入我们 💖💖💖

image.png

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

image.png

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

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

Typewriter 打字器组件 🆕

组件亮点：

1. 在使用的时候，不需要考虑内存泄漏，组件内部，会在组件的生命周期中，将组件销毁。

2. 组件支持，中断输出、继续打字和销毁等操纵，也支持对组件打字中的进度的监听。

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

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

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

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

Bubble 对话气泡 🔥

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

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

image.png

image.png

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

image.png

BubbleList 气泡列表 🍅

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

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

image.png

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

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

Sender 输入框 💭

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

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

1. 内置清除和提交

image.png

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

image.png

1. 支持提交类型切换

image.png

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

image.png

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

image.png

📦 安装与使用

# npm
npm install vue-element-plus-x --save
# pnpm （推荐）
pnpm add vue-element-plus-x 
# yarn
yarn add vue-element-plus-x

📥提供 Tree Shaking  优化

1. 按需引入

<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>

1. 全局引入

// main.ts
import { 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反馈

3. 如果想提PR，建议先通过 微信交流群 交流方案，避免浪费你的时间～

🎀我们非常欢迎你的加入，微信交流群 👉 请移步文档中查看^[7] (文档中图片会及时更新)

• 🐛 Bug 修复

• 💡 新功能提案

• 📝 文档完善

• 🎨 样式优化

📢 快速链接^[8]

资源类型	链接
文档	📖 开发文档[9]
在线演示	👁️ 在线预览[10]
代码仓库	🐙 GitHub[11] 🫵 欢迎 star 助力开源！👊
NPM 包	📦 npm[12]
问题反馈	🐛 提交 Bug[13]

👥 社区支持

图片容易过期，我会在说明文档中更新。

加入微信交流群，获取最新动态和技术支持

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

参考资料

[1] 

https://element-plus-x.com/components/typewriter/: https://element-plus-x.com/components/typewriter/

[2] 

https://element-plus-x.com/components/bubble/: https://element-plus-x.com/components/bubble/

[3] 

https://element-plus-x.com/components/bubbleList/: https://element-plus-x.com/components/bubbleList/

[4] 

https://element-plus-x.com/components/sender/: https://element-plus-x.com/components/sender/

[5] 

https://element-plus-x.com/components/typewriter/: https://element-plus-x.com/components/typewriter/

[6] 

https://element-plus-x.com/components/typewriter/: https://element-plus-x.com/components/typewriter/

[7] 

https://element-plus-x.com/introduce.html: https://element-plus-x.com/introduce.html

[8] 

https://element-plus-x.com/introduce.html#%F0%9F%93%A2-%E5%BF%AB%E9%80%9F%E9%93%BE%E6%8E%A5: https://element-plus-x.com/introduce.html#%F0%9F%93%A2-%E5%BF%AB%E9%80%9F%E9%93%BE%E6%8E%A5

[9] 

https://element-plus-x.com/: https://element-plus-x.com/

[10] 

https://v.element-plus-x.com/: https://v.element-plus-x.com/

[11] 

https://github.com/HeJiaYue520/Element-Plus-X: https://github.com/HeJiaYue520/Element-Plus-X

[12] 

https://www.npmjs.com/package/vue-element-plus-x: https://www.npmjs.com/package/vue-element-plus-x

[13] 

https://github.com/HeJiaYue520/Element-Plus-X/issues: https://github.com/HeJiaYue520/Element-Plus-X/issues

• 觉得本文对你有帮助？请分享给更多人
  关注「React中文社区」加星标，每天进步
  
  “在看和转发”就是最大的支持