Fork me on GitHub

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.pngimage.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.pngimage.png

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

image.pngimage.png

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

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

Typewriter 打字器组件 🆕

组件亮点：

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

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

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

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

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

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

Bubble 对话气泡 🔥

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

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

image.pngimage.pngimage.pngimage.png

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

image.pngimage.png

BubbleList 气泡列表 🍅

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

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

image.pngimage.png

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

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

Sender 输入框 💭

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

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

  1. 内置清除和提交

image.pngimage.png

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

image.pngimage.png

  1. 支持提交类型切换

image.pngimage.png

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

image.pngimage.png

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

image.pngimage.png

📦 安装与使用

  1.  
    # npm
  2.  
    npm install vue-element-plus-x --save
  3.  
    # pnpm （推荐）
  4.  
    pnpm add vue-element-plus-x 
  5.  
    # yarn
  6.  
    yarn add vue-element-plus-x

📥提供 Tree Shaking  优化

  1. 按需引入

  1.  
    <script>
  2.  
    import { BubbleList, Sender } from 'vue-element-plus-x'
  3.  
    const list = [
  4.  
      {
  5.  
        content: 'Hello, Element Plus X',
  6.  
        role: 'user',
  7.  
      },
  8.  
    ]
  9.  
    </script>
  10.  
     
  11.  
    <template>
  12.  
      <div style="display: flex; flex-direction: column; height: 230px; justify-content: space-between;">
  13.  
        <BubbleList :list="list" />
  14.  
        <Sender />
  15.  
      </div>
  16.  
    </template>

  1. 全局引入

  1.  
    // main.ts
  2.  
    import { createApp } from'vue'
  3.  
    import ElementPlusX from'vue-element-plus-x'
  4.  
    import App from'./App.vue'
  5.  
     
  6.  
    const app = createApp(App)
  7.  
    // 使用 app.use() 全局引入
  8.  
    app.use(ElementPlusX)
  9.  
    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]

参考资料

[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
posted @ 2025-04-17 10:04  广东靓仔-啊锋  阅读(181)  评论(0)    收藏  举报