5g-fe-components

5g-fe-components

fe-5g-component 消息接收组件

fe-5g-component 是一个功能丰富的消息接收组件，支持多种消息类型的展示和交互。

功能特性

• 支持多种消息类型：

  • 文本消息
  • 撤回消息
  • 地理位置
  • 音频消息
  • 视频消息
  • 图片消息
  • 单卡片消息
  • 多卡片消息

• 文本消息支持：

  • Markdown 格式
  • LaTeX 数学公式
  • 代码高亮
  • 链接自动识别
  • 手机号码自动识别和脱敏
  • 文本复制功能

• 多媒体消息支持：

  • 图片预览
  • 视频播放
  • 音频播放
  • 地理位置查看

使用方法

基础用法

<template>
  <fe-5g-component
    :data="messageData"
    :floatMenuShow="true"
    :copyBtnShow="true"
    @play-audio="handlePlayAudio"
    @copy-text="handleCopyText"
    @redirect-url="handleRedirectUrl"
    @showSwiper="handleShowSwiper"
    @showPhotoLargeView="handleShowPhotoLargeView"
    @open-location="handleOpenLocation"
    @post-back="handlePostBack"
    @open-url="handleOpenUrl"
    @tel-click="handleTelClick"
  />
</template>

// main.js
import Fe5gCompoents from '5g-fe-components'
import '5g-fe-components/dist/index.css'
Vue.use(Fe5gCompoents)

Props

消息数据格式

{
  contentType: String, // 消息类型：'text'|'Revoke'|'location'|'audio'|'video'|'image'|'singleCard'|'multiCard'
  message: String, // 文本消息内容
  messageId: String, // 消息ID
  data: {
    thumbUrl: String, // 缩略图URL
    audioUrl: String, // 音频URL
    videoUrl: String, // 视频URL
    imageUrl: String, // 图片URL
  },
  generalPurposeCard: { // 卡片消息数据
    content: Object,
    layout: {
      cardOrientation: String // 'vertical'|'horizontal'
    }
  }
}

事件

依赖

• Muse-UI
• Showdown (Markdown 转换)
• Showdown-Katex (LaTeX 支持)
• Highlight.js (代码高亮)

注意事项

1. 文本消息支持 Markdown 格式，包括表格、删除线、下划线等语法
2. 支持 LaTeX 数学公式，使用 $ 或 $$ 包裹
3. 代码块会自动进行语法高亮
4. 图片加载失败时会显示错误提示
5. 视频下载功能在 iOS 设备上不可用
6. 在微信环境中，视频下载需要通过复制链接到浏览器实现