VUE移动端聊天组件 THOR

We are SuperHero!

THOR-X

DEMO

http://ly.apcan.cn

使用

1.安装组件库

npm i thor-x --save

2.配置main.js

import thor from 'thor-x'
import 'thor-x/dist/index.css'
Vue.use(thor)

聊天组件 th-message

<th-message 
  ref="messgebox"
  :useText="true"
  :usePulldown="true"
  :pulldownConfig="pulldownconfig"
  :topPadding="120"
  :messageData="messageData" 
  :funcList="funclist" 
  :bigBtn="bigbtn"
  :showInput="showinput"
  :selfFace="selfface" 
  :otherFace="otherface"
  :showEmoticon="true"
  @sendOut="senRequest"
  @galleryCall="gallery"
  @cameraCall="camera"
  @quickCall="quick"
  @bigBtnCall="btncall"
  @faceClick="faceclick"
  @msgClick="msgclick"
  @pulldownCall="pulldowncall">
</th-message>

API

Props

Prop	Required	Default Value	Description
useText	false	false	控制是否开启textarea输入提交模式
topPadding	false	0	顶部间距。若顶部有其他功能块，可以设置顶部间距，数值为该功能块高度，只支持正整数.
messageData	true	{type:type,text:text,isimg:isimg}	聊天记录。type: 4种形式 type=1 右侧泡泡 type=2 左侧泡泡 type=3 消息提示 type=4 系统消息;text: html信息（支持html标签）;isimg: 是否为图片信息 true/false，默认false.
funcList	true		功能列表。数组形式 可传["gallery","camera", "quick"]，传几个显示几个
bigBtn	false	string	底部显示大按钮。应用场景比如前往评价之类的，必须传string类型，传入文字既按钮显示文字
showInput	false	true	是否显示聊天输入框。默认true，传入false则输入框不显示
selfFace	false	url	发送方的头像，默认显示默认图
otherFace	false	url	接收方的头像，默认显示默认图
usePulldown	false	false	配置是否开启下拉刷新功能
pulldownConfig	false	{default: html,up: html,down: html,loading: html}	下拉刷新配置。可配置4个参数：default/up/down/loading，支持传入html
showEmoticon	true	false	配置是否使用表情包
fromTop	false	false	配置初始置顶

Events

Event	Required	Default Value	Description
pulldownCall	false	function	下拉刷新后调用的方法，发起请求更新数据，更新数据完毕调用resetpulldown方法
sendOut	false		点击发送时调用方法
galleryCall	false		点击相册时调用方法，funcList参数里有"gallery"时生效
cameraCall	false		点击拍照时调用方法，同上
quickCall	false		点击快捷回复时调用方法，同上
bigBtnCall	false		点击底部大按钮时调用方法，传bigBtn参数时生效，绑定按钮点击方法
faceClick	false		点击头像时触发事件
msgClick	false		点击信息时触发事件

Methods

Method	Required	Description
resetpulldown	false	下拉刷新完成后重置状态
messageReset	false	手动刷新聊天容器（传输图片时使用）
scrollToTop	false	手动置顶

人物信息组件 th-doctortitlebar

<th-doctortitlebar
  canopen
  :name="doctorbar.name"
  :position="doctorbar.position"
  :star="doctorbar.star"
  :btn="doctorbar.btn"
  :btnType="doctorbar.btntype"
  :btnCanClick="doctorbar.btncanlick"
  :headImg="otherface"
  :clock="`48小时后截止`"
  :isopen="true"
  @btnCall="topbtncall"
  @headClick="headclick">
  自定义内容
</th-doctortitlebar>

API

Props

Prop	Required	Default Value	Description
canopen	false	false	是否显示展开收起按钮
openConfig	false	{open: "展开",close: "收起"}	展开功能参数配置。可配置2个参数：open/close
name	true		姓名字段
position	true		职称字段
star	false	number	星级字段（1~5）
btn	false	false	是否显示右侧按钮，默认不显示，传布尔值
btnType	false	string	按钮类型，可选值为 default,primary,warn
btnCanClick	false	true	按钮是否能点击，默认可以点击
headImg	false	url	头像图片，默认显示默认图
clock	false		时钟字段，内容自定义
isopen	false		控制展开收起面板默认打开或关闭

Events

Event	Required	Default Value	Description
btnCall	false	function	点击按钮时调用方法
headClick	false		点击头像调用方法

弹出层 th-dialog

<th-dialog 
  :isShow.sync="showdialog" 
  :showFrom="dialogfrom" 
  :closeOnClickshadow="true" 
  @onHide="hidedialog">
</th-dialog>

API

Props

Prop	Required	Default Value	Description
isShow	true	true	控制是否显示
showFrom	false	bottom	控制出现方式:top/bottom
closeOnClickshadow	false	false	控制点击背景黑色是否关闭

Events

Event	Required	Default Value	Description
onHide	false	function	关闭时调用的方法

文本滚动 th-marquee

<div style="width: 100px;">
  <th-marquee 
    content="333333333"
    speed="middle">
  </th-marquee>
</div>

API

Props

Prop	Required	Default Value	Description
content	false	暂无内容	显示内容
speed	false	middle	控制滚动速度:quick/middle/slow

说明：需要一个外部容器限制宽度，才能实现滚动效果。当宽度大于实际内容，不滚动。