聊天消息 | Quasar Framework

为什么捐赠

如何贡献

选项与辅助工具

样式与标识

布局与栅格

Vue 组件

Ajax Bar Ajax 进度条

Breadcrumbs 面包屑

Buttons 按钮

Button Group 按钮组

Button Dropdown 下拉按钮

Carousel 轮播

Chat Message 聊天消息

Circular Progress 环形进度条

Color Picker 颜色选择器

Dialog 对话框

Editor WYSIWYG 编辑器

Expansion Item 展开项

Floating Action Button 浮动操作按钮

Form Components 表单组件

Input 输入框

Select 选择器

File Picker 文件选择器

Radio 单选框

Checkbox 复选框

Button Toggle 按钮开关

Option Group 选项组

Range 范围选择

Time Picker 时间选择器

Date Picker 日期选择器

Infinite Scroll 无限滚动

Inner Loading 内部加载

Intersection 交叉观察

Linear Progress 线性进度条

List & List Items 列表与列表项

Markup Table 标记表格

Observers 观察者

Resize Observer 尺寸观察者

Scroll Observer 滚动观察者

Pagination 分页

Parallax 视差

Popup Edit 弹出编辑

Popup Proxy 弹出代理

Pull to Refresh 下拉刷新

Responsive 响应式

Scroll Area 滚动区域

Separator 分隔线

Skeleton 骨架屏

Slide Item 滑动项

Slide Transition 滑动过渡

Spinners 加载动画

Splitter 分割面板

Stepper 步骤条

Tab Panels 标签面板

Timeline 时间线

Toolbar 工具栏

Tooltip 提示框

Tree 树形控件

Uploader 上传器

Virtual Scroll 虚拟滚动

Vue 指令

Quasar 插件

Vue 组合式函数

安全

Quasar CLI（Vite 版）

Quasar CLI（Webpack 版）

Icon Genie CLI

应用扩展

Quasar 工具函数

聊天消息

Quasar 提供了一个名为 QChatMessage 的聊天组件，它实际上是一个聊天条目，根据传入的 props 来渲染数据。

TIP

如果需要在同一个聊天线程中混合显示有头像和无头像的消息，可以使用一个占位头像图片。

用法

基础用法

TIP

使用 sent 属性表示这是发送方的消息。不设置该属性则表示接收方的消息。

自定义

插槽

安全过滤

WARNING

如果数据来源不可信（例如来自用户输入），请务必对内容进行安全过滤。

发现错误？在浏览器中编辑此页

1. Introduction

2. QChatMessage API

3. 用法

3.1. 基础用法

3.2. 自定义

3.3. 插槽

3.4. 安全过滤