fonlineconsultation v1.1.5

FChat使用手册：

目录

Table of Contents generated with DocToc

• FChat使用手册：
  • 目录
  • 简介
  • 安装
  • 使用方法
  • 数据结构
  • 可配置参数
  • 插槽
  • 音频开启方法
  • FChart类
  • Demo
  • 注意

简介

简易版的仿微信版移动端h5聊天插件，使用简单，兼容音频，高度定制化，ios/android兼容。

安装

npm i fonlineconsultation

使用方法

main.js

import '../node_modules/fonlineconsultation/packages/styles/index.less';
import fonlineconsultation from 'fonlineconsultation';
Vue.use(fonlineconsultation);
//音频开启，参照下面音频章节
import '../node_modules/fonlineconsultation/packages/recorder.js';

x.vue

<FonlineConsultation></FonlineConsultation>

数据结构

  {
         type:消息类型(message / image / video / audio),
         content:消息内容,
         pos:消息位置(left/right),
         ? topText: //头像上方的文字显示(可选)
         ? duration:"" //音频时间 仅音频存在
  }

可配置参数

必要方法

如何使用？

<FonlineConsultation
    @send="sendMsg"
    @sendImg="sendImg"
    @sendVoice="senVoice"
></FonlineConsultation>

方法的定义

/*
*@ send
*/
sendMsg(sendObject){
    //sendObject 为消息对象
}
/*
*@ sendImg
*
*/
sendImg(pro){
   pro.then((sendObject)=>{
       //sendObject为图片消息对象
   })
}
/*
*@ sendVoice
*
*/
sendVoice(sendObject){
    //sendObject为消息对象
}

使用样例

/*
* sendMessage为服务器api
*/  
methods: {
    // 模拟一个复读机
    sendImg(cb) {
      cb.then((sendObj) => {
        this.$FChat.loading();
        sendMessage(sendObj).then((res) => {
          if (res.data) { 
            this.$FChat.cancelLoading();
            // 我方发送
            this.$FChat.sendMessage(sendObj);
            // 对方发送
            let { content, pos, type } = res.data;
            this.$FChat.sendMessage({
              content: content,
              type: type,
              pos: "left",
            });
          }
        });
      }).catch((err) => {
        alert(err);
      });
    },
    // 普通文本消息
    sendMsg(msgObject) {
      this.$FChat.loading();
      sendMessage(msgObject).then((res) => {
        if (res.data) { 
          this.$FChat.cancelLoading();
          // 己方发送
          this.$FChat.sendMessage(msgObject);
          // 服务器返回 - 格式拼接
          let { content, pos, type } = res.data;
          this.$FChat.sendMessage({
            content: content,
            type: type,
            pos: "left"
          });
        }
      });
    },
    //音频
    senVoice(msgObject) {
      sendMessage(msgObject).then((res) => {
        if (res.data) { 
          this.$FChat.cancelLoading();
          // 己方发送
          this.$FChat.sendMessage(msgObject);
          // 服务器返回 - 格式拼接
          let { content, pos, type, duration } = res.data;
          this.$FChat.sendMessage({
            content: content,
            type: type,
            pos: "left",
            duration: duration
          });
        }
      });
    },
  }

属性参数

插槽

(如需自定义请重写方法)

单独气泡重写插槽

该条消息的数据均可通过

//message
<template v-slot:message="message">
	{{message}}
</template>
//image
<template v-slot:image="image">
	{{image}}
</template>
//audio
<template v-slot:audio="audio">
	{{audio}}
</template>
//video
<template v-slot:voice="voice">
	{{voice}}
</template>
<template v-slot:topText ="item">
    {{item}}
</template>

来获取当前信息所对应的对象。

注：如果文本消息出现类似网址，则会渲染成a标签：

content:"我是一个网址<a>http://www.baidu.com</a>"

整体聊天气泡重写插槽

插槽名为：popList

你可以通过如下方式获取到消息列表：

this.$FChat.getMessage()
//或者使用插槽的返回值,也可以拿到消息列表
<FonlineConsultation  @send="sendMsg" @sendImg="sendImg" @sendVoice="senVoice">
    <template v-slot:popList ="List">
        {{List}}
    </template>
</FonlineConsultation>    

音频开启方法

为了多端兼容使用Recorder.js插件，关于Vue使用Recorder.js的demo可参照样例

直接引入到main.js，可通过this.$Recorder调用相关api

import './node_modules/fonlineconsultation/packages/recorder.js';

在需要的.vue中调用此方法并键入微信授权/下载素材的url

mounted(){
   this.$FChat.openVoice("https://fepic.natapp4.cc/api/getSign", true);
}

FChart类

可修改属性 - 通过setConfig修改

• maxSize - 图片最大大小(默认为2M)
• onlyImg - 是否只允许发图片(默认为图片+视频都可以发送)
• ToastTop - 如果该插件在你的项目中并非全屏显示，则需要传入该插件距顶部所差高度，用于响应式计算，请务必将插件置于页面最底，防止出现输入法弹出后的高度计算问题

//比如项目上有个header,高度为100，则这样做即可
this.$FChat.setConfig('ToastTop',100);

方法一览(*为常用)

Demo

Vue样例

注意

由于h5本身自带的长按复制功能，按钮长按后会出现选中文本导致失效，所以在长按事件中加入了禁止长按复制功能(松开后自动取消)，但仅仅限制了该插件的范围，可通过传入preventId属性来增大限制范围防止误选中，主要使用user-select等属性进行控制。