🚀Element Plus X 上新啦！流式交互升级🔥🚀 Element-Plus-X 一周岁重磅更新！v1.0

🌟 Element-Plus-X 组件库 v1.0.81 小版本更新！迎来多位 Hooks 小伙伴 💩

🙉 嗨，同志萌好，我是嘉悦。 好久不见，甚是想念~ Element-Plus-X 自开源，已经 🌱 一周岁 了，受到了较多 开发者 关注和支持。💖 真的 倍感荣幸 ，感激涕零。

今天，我们带着 v1.0.81 小版本更新来啦！小小诚意，不成敬意 🙉

这次更新修复了已知 bug ，新增了流式交互的 Hooks —— 希望为大家带来更佳的开发体验。

前言

在上版本中，当开发者使用 Sender 输入框组件 的自定义 #action-list 插槽时，往往需要牺牲内置的语音识别功能和内置的发送、清除按钮功能。

这周，我们正好也对 ant-design-x 的 Hooks 进行了源码翻阅和理解。于是

我们决定：

推出 useRecord 解决浏览器内置语音识别API 单独使用问题。

推出流式请求套餐：

useXStream 这个钩子函数是对 antx- XStream 的 1:1 复刻 + 拓展中断请求。方便开发者统一控制 流式请求 、数据返回 和 发送按钮 状态。
useSend + XRequest(工具类)。前者控制样式状态，后者控制请求状态。是将上面的 useXStream，实现原理逻辑拆分为 前端样式层 和 后台请求层，方便开发者更好的自定义耗时请求，让用户可以更灵活的控制 页面状态、请求状态

@1x容器 1.webp

先来说 浏览器内置的语音识别 AIP。

💩💩💩 尽管可能他不怎么好用，在谷歌浏览器上，还需要魔法 🪄 但是

🤡🤡🤡 但是话又说回来...

上新-🍁`useRecord`

解决用户在自定义 Sender 输入框的 #action-list 插槽时候，又同时想保留组件内置的浏览器语音识别 API 方法。可以使用这个 hooks。

import { useRecord } from 'vue-element-plus-x'

const { start, value, loading, stop } = useRecord({ onEnd: handleEnd })

function handleEnd(res: string) {
    console.log('end:', res) 
}

短短几行代码，你已经可以轻松 调用浏览器内置语音识别 API 的方法了。并且可以更据返回的 loading 状态，设置 语音识别按钮 的加载样式。

返回	描述	类型
start	开始录音	`(event:MouseEvent) => void`
stop	结束录音	`(event:MouseEvent) => void`
value	实时的转换结果	`string`
loading	是否正在录音	`boolean`

配置方法

方法名	描述	类型
onEnd	结束方法	`(event:MouseEvent) => void`

🐵 就像这样

其实不只是 内置语音按钮的功能，我们发现，输入框组件 自定义 #action-list 插槽时，会直接覆盖组件的内置按钮。清除按钮 还好自定义处理，但是遇到了和 语音识别按钮 需要展示 加载状态的按钮 ，就不是很好的能够快速实现自己定义。包括 发送按钮，发送按钮还需要支持中断 流式请求

于是...

主播主播，这个 Hooks 确实好用，但是我想对发送按钮也做处理，有没有...

💩💩💩 有的兄弟，有的

上新-🍉`useXStream` ❤️‍🔥重磅推出

我们 1:1 复刻了 ant-design-x 的 XStream，并在XStream 基础上，新增 中断请求 功能。让开发者，很方便的集成 请求流式接口-处理流式数据-设置按钮状态-中断流式请求 四位一体的舒爽操作 🙉

大家感兴趣可以移步 👉 线上文档中 体验。

同时还支持 SIP 协议，同 ant-design-x 的 XStream 一样，其他协议有待测试。如果发现有使用问题，可以有好的想法，欢迎大家进交流群 👨‍👩‍👧‍👧 交流群，与我们取得联系，欢迎交流方案，提交 issue 和 pr。提交规范请阅读 👉 开发文档

🙌 在复刻功能的同时，我们融合了 Vue 的开发范式，对 hooks 进行了拓展。目前的写法，更方便大家理解和开发。可以更好的聚焦业务开发。

实际集成的控制代码，可能不会超过 10 行

<script>
import { useXStream } from 'vue-element-plus-x'

const { startStream, cancel, data, error, isLoading } = useXStream()

// 默认支持 SSE 协议 
async function startSSE() {
    const response = await fetch('https://node-test.element-plus-x.com/api/sse') 
    const readableStream = response.body! 
    
    // 将请求体传入 startStream 方法的第一个参数 readableStream 中
    await startStream({ readableStream }) // 👈关键步骤
}
</script>

<template> 
    <div class="btn-list"> 
        <el-button :disabled="isLoading" @click="startSSE"> 
            {{ isLoading ? '加载中...' : '获取 SSE流数据' }} 
        </el-button> 

        <el-button :disabled="!isLoading" @click="cancel"> 
            中断请求 
        </el-button> 
    </div> 
    
    <div v-if="error"> {{ error.message }} </div> 
    
    <!-- 实际这里的 data 还需要做处理，详情可移步线上文档 -->
    <div> {{ data }} </div>  
</template>

属性名	说明	类型
startStream	开始请求流模式接口	`({readableStream, transformStream}) => void`
cancel	中断流式请求	`() => void`
loading	是否正在请求流式数据	`boolean`
data	实时返回的流式数据	`string`
error	流式请求报错信息	`string`

这样一来，开发者 就可以，在 #action-list 插槽中自定义 发送按钮 ，中断请求的同时，设置对应的按钮样式。具体体验可移步 👉 线上文档中 体验。

上新-🌳 useSend + XRequest

💖我们针对像这种，耗时请求又支持终止请求的场景。封装了一对姐妹花组合。当然你可以将他们拆开使用，不过，合在一起使用，效果更好。

useSend 只针对前端的状态做处理

XRequest 是一个工具类，针对请求做处理，支持返回请求的数据。

💕 两者分工明确，可以单独拆开使用。组合使用的话，就可以实现像 useXStream 一样效果

使用详细说明，可以移步 👉 useSend 文档体验。

目前只测试了，SSE协议请求和 SIP协议请求。如果有遇到使用问题，欢迎提交 issue，同时欢迎大家进交流群 👨‍👩‍👧‍👧 交流群 交流沟通。

上新-🦖总结

useRecord，方便直接调用浏览器内置 API
useXStream 偏封装，相对 useSend + XRequest 更便捷使用。对 XStream 的复刻，并拓展终止请求
useSend + XRequest，实现更偏底层，相对 useXStream，使用会更加灵活。

其他更新内容

🐛 修复

修复 Sender 输入框组件在 loading 状态下，依然可以触发 @submit 方法的 bug 👉 issue #22
修复 Sender 输入框组件在 read-only 状态下，依然可以触发值的修改的 bug

🚅 改进

优化兼容性， Sender 输入框组件，由于使用 defineModel 语法，该语法仅在 Vue 3.4+ 版本中可用，导致较多用户，因 Vue 版本问题，在控制台有报错，现已将此写法改用低版本写法。 (无缝替换，不用更改原写法)

📚 文档更新

更新线上开发计划文档，会给大家展示我们陆续的开发计划。有想法提 pr 的伙伴，可以先看看我们的开发计划，有感兴趣的模块，可以进交流群，一起研究推进 开发计划
更新 指南文档 中的 开发文档 ，着重修改 开发命令、贡献代码、本地调试 流程介绍。规范 开发 和 pr 提交

📢 快速链接

资源类型	链接
文档	📖 开发文档
在线演示	👁️ 在线预览
代码仓库	🐙 GitHub 🫵 欢迎 star 助力开源！👊
NPM 包	📦 npm
问题反馈	🐛 提交 Bug
交流群	🍉 二维码地址加入微信交流群，获取最新动态和技术支持

除了已完成的浏览器内置API Hooks，我们还收到了很多的 issue 和不少的 pr。再次非常感谢大家的关注，如果您也觉得项目不错，可以在 github 上留下您宝贵的 star，您的 star 将是我们开源团队 这辈子的荣耀 🤩

🚀Element Plus X 上新啦！流式交互升级🔥

前言

上新-🍁useRecord

上新-🍉useXStream ❤️‍🔥重磅推出