Reader

🥳Element Plus X 正式开源啦！🥳

| 掘金本周最热 | Default

🙊哈喽，同志萌，大家好。基于 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打字动画组件📄 文档
Bubble气泡消息组件📄 文档
BubbleList气泡消息列表📄 文档
Sender智能输入框（含语音交互）📄 文档

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

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

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

image.png

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

image.png

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

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

Typewriter 打字器组件 🆕

组件亮点：

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

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

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

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

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

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 气泡列表

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 image.png 优化

  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

我们欢迎：

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

📢 快速链接

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

👥 社区支持

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

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

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