LimeUI+1.2.1

主题

LimeTyping 输入中组件 ​

一个用于展示"正在输入"状态的组件，通常用于聊天界面服务端消息响应速度比较慢时，展示处理中的状态，缓解用户焦虑。组件支持自定义文字和动画颜色，提供了简洁的动画效果，增强用户体验。

插件依赖：lime-shared、lime-style

文档链接 ​

📚 组件详细文档请访问以下站点：

安装方法 ​

  1. 在uni-app插件市场入口 中搜索并导入lime-typing
  2. 导入后可能需要重新编译项目
  3. 在页面中使用l-typing组件

代码演示 ​

基础用法 ​

最简单的输入中组件用法，使用默认配置。

html
<l-typing></l-typing>

自定义文字 ​

可以通过text属性自定义显示的文字内容。

html
<l-typing text="输入中"></l-typing>

自定义颜色 ​

可以通过idleDotColor和activeDotColor属性自定义动画圆点的颜色。

html
<l-typing 
  text="思考中" 
  idleDotColor="#cccccc" 
  activeDotColor="#ff6700">
</l-typing>

在聊天界面中使用 ​

在聊天界面中展示对方正在输入的状态。

html
<view class="chat-container">
  <view class="message-item message-received">
    <text>你好，有什么可以帮助你的？</text>
  </view>
  <view class="message-item message-received">
    <l-typing></l-typing>
  </view>
  <view class="message-item message-sent">
    <text>我想咨询一下产品的使用方法</text>
  </view>
</view>

快速预览 ​

导入插件后，可以直接使用以下标签查看演示效果：

html
<!-- 代码位于 uni_modules/lime-typing/components/lime-typing -->
<lime-typing />

插件标签说明 ​

标签名说明
l-typing组件标签
lime-typing演示标签

Vue2使用说明 ​

main.js中添加以下代码：

js
// vue2项目中使用
import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
Vue.use(VueCompositionAPI)

详细配置请参考官方文档：Vue Composition API

API文档 ​

Props 属性说明 ​

属性名说明类型默认值
text自定义文字string正在输入...
idleDotColor非激活状态圆点颜色string-
activeDotColor激活状态圆点颜色string-

主题定制 ​

组件提供了以下CSS变量，可用于自定义样式：

变量名称默认值描述
--l-typing-text-color$text-color-1文字颜色
--l-typing-bg-color$bg-color-container背景颜色
--l-typing-padding-x$spacer-sm水平内边距
--l-typing-padding-y$spacer-sm垂直内边距
--l-typing-radius$border-radius-md圆角大小
--l-typing-dot-idle-color$gray-5非激活状态圆点颜色
--l-typing-dot-active-colorlinear-gradient(162deg, $primary-color-3 0%, $primary-color 100%)激活状态圆点颜色

使用场景 ​

  1. 聊天应用：在用户等待对方回复时显示"正在输入"状态
  2. 客服系统：表示客服正在处理用户的问题
  3. AI助手：表示AI正在生成回答
  4. 表单提交：在表单提交处理过程中显示处理状态
  5. 数据加载：在数据加载过程中提供视觉反馈

支持与赞赏 ​

如果你觉得本插件解决了你的问题，可以考虑支持作者：

支付宝赞助微信赞助

源代码 ​

组件源码