Back to packageRELEASE DETAILS

1.0.9

npm

5g-fe-components

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

Published18 Jun 2025

Direct dependencies33

Transitive dependenciesNot calculated

README

Current package documentation

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

属性名	类型	必填	说明
data	Object	是	消息数据对象
floatMenuShow	Boolean	否	是否显示浮动菜单
copyBtnShow	Boolean	否	是否显示复制按钮
useCustomImagePreview	Boolean	否	是否使用自定义的图片预览
dataPath	String	否	数据路径，指向data中的卡片内容路径

消息数据格式

{
  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'
    }
  }
}

事件

事件名	说明	参数
play-audio	播放音频时触发	-
copy-text	复制文本时触发	text: String
redirect-url	点击链接时触发	url: String
showSwiper	显示图片轮播时触发	{ isphotoOpen, photoItem, data }
showPhotoLargeView	显示大图时触发	{ isphotoOpen, src }
open-location	打开地理位置时触发	locationData: Object
post-back	点击卡片回复时触发	data: Object, idx: Number
open-url	打开URL时触发	item: Object
tel-click	点击电话号码时触发	item: Object

依赖

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

注意事项

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

Downloads & popularity

Awaiting observations

No metric observations yet

Download counts and popularity will appear here as the collector receives them.

Declared dependencies 33

Native requirements

33 direct targetsNot calculated transitive count

Package / target	Requirement	Relationship
vue Environment { "local_name": "vue", "alias": false, "peer_metadata": null }	`^2.6.10`	runtime
axios Environment { "local_name": "axios", "alias": false, "peer_metadata": null }	`^0.19.0`	runtime
muse-ui Environment { "local_name": "muse-ui", "alias": false, "peer_metadata": null }	`^3.0.2`	runtime
showdown Environment { "local_name": "showdown", "alias": false, "peer_metadata": null }	`^1.9.1`	runtime
vue-touch Environment { "local_name": "vue-touch", "alias": false, "peer_metadata": null }	`^2.0.0-beta.4`	runtime
vue-aplayer Environment { "local_name": "vue-aplayer", "alias": false, "peer_metadata": null }	`^1.6.1`	runtime
highlight.js Environment { "local_name": "highlight.js", "alias": false, "peer_metadata": null }	`^11.11.1`	runtime
showdown-katex Environment { "local_name": "showdown-katex", "alias": false, "peer_metadata": null }	`^0.8.0`	runtime
js-md5 Environment { "local_name": "js-md5", "alias": false, "peer_metadata": null }	`^0.7.3`	development
rollup Environment { "local_name": "rollup", "alias": false, "peer_metadata": null }	`^2.79.2`	development
postcss Environment { "local_name": "postcss", "alias": false, "peer_metadata": null }	`8.5.3`	development
js-base64 Environment { "local_name": "js-base64", "alias": false, "peer_metadata": null }	`^2.5.2`	development
jsencrypt Environment { "local_name": "jsencrypt", "alias": false, "peer_metadata": null }	`^3.3.2`	development
protobufjs Environment { "local_name": "protobufjs", "alias": false, "peer_metadata": null }	`5.0.2`	development
@babel/core Environment { "local_name": "@babel/core", "alias": false, "peer_metadata": null }	`^7.27.4`	development
autoprefixer Environment { "local_name": "autoprefixer", "alias": false, "peer_metadata": null }	`^10.4.21`	development
recorder-core Environment { "local_name": "recorder-core", "alias": false, "peer_metadata": null }	`^1.1.20112600`	development
preview-pictrue Environment { "local_name": "preview-pictrue", "alias": false, "peer_metadata": null }	`^1.0.4`	development
@babel/preset-env Environment { "local_name": "@babel/preset-env", "alias": false, "peer_metadata": null }	`^7.27.2`	development
rollup-plugin-vue Environment { "local_name": "rollup-plugin-vue", "alias": false, "peer_metadata": null }	`^5.1.9`	development
@rollup/plugin-url Environment { "local_name": "@rollup/plugin-url", "alias": false, "peer_metadata": null }	`^8.0.2`	development
rollup-plugin-scss Environment { "local_name": "rollup-plugin-scss", "alias": false, "peer_metadata": null }	`^4.0.1`	development
@rollup/plugin-json Environment { "local_name": "@rollup/plugin-json", "alias": false, "peer_metadata": null }	`^6.1.0`	development
@rollup/plugin-babel Environment { "local_name": "@rollup/plugin-babel", "alias": false, "peer_metadata": null }	`^6.0.4`	development
rollup-plugin-terser Environment { "local_name": "rollup-plugin-terser", "alias": false, "peer_metadata": null }	`^7.0.2`	development
rollup-plugin-postcss Environment { "local_name": "rollup-plugin-postcss", "alias": false, "peer_metadata": null }	`^4.0.2`	development
vue-template-compiler Environment { "local_name": "vue-template-compiler", "alias": false, "peer_metadata": null }	`^2.7.16`	development
postcss-px-to-viewport Environment { "local_name": "postcss-px-to-viewport", "alias": false, "peer_metadata": null }	`^1.1.1`	development
@rollup/plugin-commonjs Environment { "local_name": "@rollup/plugin-commonjs", "alias": false, "peer_metadata": null }	`^28.0.3`	development
rollup-plugin-visualizer Environment { "local_name": "rollup-plugin-visualizer", "alias": false, "peer_metadata": null }	`^6.0.3`	development
@rollup/plugin-node-resolve Environment { "local_name": "@rollup/plugin-node-resolve", "alias": false, "peer_metadata": null }	`^16.0.1`	development
@babel/plugin-transform-runtime Environment { "local_name": "@babel/plugin-transform-runtime", "alias": false, "peer_metadata": null }	`^7.26.10`	development
postcss-px-to-viewport-8-plugin Environment { "local_name": "postcss-px-to-viewport-8-plugin", "alias": false, "peer_metadata": null }	`^1.2.5`	development

Distribution files

1 collected

Distribution 1

Source distribution

Source file

Checksums from source

{
  "shasum": "448d4a0881cd088428d2cdabde45593547fe82fe",
  "tarball": "https://registry.npmjs.org/5g-fe-components/-/5g-fe-components-1.0.9.tgz",
  "fileCount": 5,
  "integrity": "sha512-ar1jlgMGVIoJCrZT9/o6sz7NI//9Ru/tXjYRwvGDrmQni5w1jIHXU6MztuTuBhEr7pDmjP69ZtQV5Ijr1Ekkkw==",
  "signatures": [
    {
      "sig": "MEUCIQCwj7Lmay1jysQuc/RKTXA8gIluwy/kCcKvexLV4ttpwgIgdc+vCLcLY83dknYdNIUq4ZX881gLjGKTH17UIbCQZiI=",
      "keyid": "SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"
    }
  ],
  "unpackedSize": 263161
}

Metadata history

Meaningful changes

Current collected state Current

Observed since 20 Oct, 20:34 UTC

No superseded metadata states collected. Unchanged observations do not create new revisions.

Record identity

package_version:2ea6946ab4fcffe8df7e9ccd95758bd9933b0dddae4439fb0ee9e52ef137a9c5

Other collected versions

1.1.023 Jun 1.0.818 Jun 1.0.718 Jun 1.0.618 Jun 1.0.517 Jun 1.0.416 Jun View all collected versions →