VUE移動(dòng)端聊天組件 THOR

We are SuperHero!

THOR-X

DEMO

http://ly.apcan.cn

使用

1.安裝組件庫(kù)

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 控制是否開(kāi)啟textarea輸入提交模式
topPadding false 0 頂部間距。若頂部有其他功能塊，可以設(shè)置頂部間距，數(shù)值為該功能塊高度，只支持正整數(shù).
messageData true {type:type,text:text,isimg:isimg} 聊天記錄。type: 4種形式 type=1 右側(cè)泡泡 type=2 左側(cè)泡泡 type=3 消息提示 type=4 系統(tǒng)消息;text: html信息（支持html標(biāo)簽）;isimg: 是否為圖片信息 true/false，默認(rèn)false.
funcList true 功能列表。數(shù)組形式 可傳["gallery","camera", "quick"]，傳幾個(gè)顯示幾個(gè)
bigBtn false string 底部顯示大按鈕。應(yīng)用場(chǎng)景比如前往評(píng)價(jià)之類的，必須傳string類型，傳入文字既按鈕顯示文字
showInput false true 是否顯示聊天輸入框。默認(rèn)true，傳入false則輸入框不顯示
selfFace false url 發(fā)送方的頭像，默認(rèn)顯示默認(rèn)圖
otherFace false url 接收方的頭像，默認(rèn)顯示默認(rèn)圖
usePulldown false false 配置是否開(kāi)啟下拉刷新功能
pulldownConfig false {default: html,up: html,down: html,loading: html} 下拉刷新配置?？膳渲?個(gè)參數(shù)：default/up/down/loading，支持傳入html
showEmoticon true false 配置是否使用表情包
fromTop false false 配置初始置頂

Events

Event Required Default Value Description
pulldownCall false function 下拉刷新后調(diào)用的方法，發(fā)起請(qǐng)求更新數(shù)據(jù)，更新數(shù)據(jù)完畢調(diào)用resetpulldown方法
sendOut false 點(diǎn)擊發(fā)送時(shí)調(diào)用方法
galleryCall false 點(diǎn)擊相冊(cè)時(shí)調(diào)用方法，funcList參數(shù)里有"gallery"時(shí)生效
cameraCall false 點(diǎn)擊拍照時(shí)調(diào)用方法，同上
quickCall false 點(diǎn)擊快捷回復(fù)時(shí)調(diào)用方法，同上
bigBtnCall false 點(diǎn)擊底部大按鈕時(shí)調(diào)用方法，傳bigBtn參數(shù)時(shí)生效，綁定按鈕點(diǎn)擊方法
faceClick false 點(diǎn)擊頭像時(shí)觸發(fā)事件
msgClick false 點(diǎn)擊信息時(shí)觸發(fā)事件

Methods

Method Required Description
resetpulldown false 下拉刷新完成后重置狀態(tài)
messageReset false 手動(dòng)刷新聊天容器（傳輸圖片時(shí)使用）
scrollToTop false 手動(dòng)置頂

人物信息組件 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小時(shí)后截止`"
  :isopen="true"
  @btnCall="topbtncall"
  @headClick="headclick">
  自定義內(nèi)容
</th-doctortitlebar>

API

Props

Prop Required Default Value Description
canopen false false 是否顯示展開(kāi)收起按鈕
openConfig false {open: "展開(kāi)",close: "收起"} 展開(kāi)功能參數(shù)配置?？膳渲?個(gè)參數(shù)：open/close
name true 姓名字段
position true 職稱字段
star false number 星級(jí)字段（1~5）
btn false false 是否顯示右側(cè)按鈕，默認(rèn)不顯示，傳布爾值
btnType false string 按鈕類型，可選值為 default,primary,warn
btnCanClick false true 按鈕是否能點(diǎn)擊，默認(rèn)可以點(diǎn)擊
headImg false url 頭像圖片，默認(rèn)顯示默認(rèn)圖
clock false 時(shí)鐘字段，內(nèi)容自定義
isopen false 控制展開(kāi)收起面板默認(rèn)打開(kāi)或關(guān)閉

Events

Event Required Default Value Description
btnCall false function 點(diǎn)擊按鈕時(shí)調(diào)用方法
headClick false 點(diǎn)擊頭像調(diào)用方法

彈出層 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 控制出現(xiàn)方式:top/bottom
closeOnClickshadow false false 控制點(diǎn)擊背景黑色是否關(guān)閉

Events

Event Required Default Value Description
onHide false function 關(guān)閉時(shí)調(diào)用的方法

文本滾動(dòng) th-marquee

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

API

Props

Prop Required Default Value Description
content false 暫無(wú)內(nèi)容 顯示內(nèi)容
speed false middle 控制滾動(dòng)速度:quick/middle/slow

說(shuō)明：需要一個(gè)外部容器限制寬度，才能實(shí)現(xiàn)滾動(dòng)效果。當(dāng)寬度大于實(shí)際內(nèi)容，不滾動(dòng)。

最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡(jiǎn)書(shū)系信息發(fā)布平臺(tái)，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容