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 |
頂部間距。若頂部有其他功能塊，可以設(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標簽）;isimg: 是否為圖片信息 true/false，默認false. |
funcList |
true |
|
功能列表莲绰。數(shù)組形式 可傳["gallery","camera", "quick"]捧毛，傳幾個顯示幾個 |
bigBtn |
false |
string |
底部顯示大按鈕观堂。應(yīng)用場景比如前往評價之類的，必須傳string類型呀忧，傳入文字既按鈕顯示文字 |
showInput |
false |
true |
是否顯示聊天輸入框师痕。默認true，傳入false則輸入框不顯示 |
selfFace |
false |
url |
發(fā)送方的頭像而账，默認顯示默認圖 |
otherFace |
false |
url |
接收方的頭像胰坟，默認顯示默認圖 |
usePulldown |
false |
false |
配置是否開啟下拉刷新功能 |
pulldownConfig |
false |
{default: html,up: html,down: html,loading: html} |
下拉刷新配置∨⒎可配置4個參數(shù)：default/up/down/loading笔横，支持傳入html |
showEmoticon |
true |
false |
配置是否使用表情包 |
fromTop |
false |
false |
配置初始置頂 |
Events
| Event |
Required |
Default Value |
Description |
pulldownCall |
false |
function |
下拉刷新后調(diào)用的方法，發(fā)起請求更新數(shù)據(jù)咐吼，更新數(shù)據(jù)完畢調(diào)用resetpulldown方法 |
sendOut |
false |
|
點擊發(fā)送時調(diào)用方法 |
galleryCall |
false |
|
點擊相冊時調(diào)用方法吹缔，funcList參數(shù)里有"gallery"時生效 |
cameraCall |
false |
|
點擊拍照時調(diào)用方法，同上 |
quickCall |
false |
|
點擊快捷回復(fù)時調(diào)用方法锯茄，同上 |
bigBtnCall |
false |
|
點擊底部大按鈕時調(diào)用方法厢塘，傳bigBtn參數(shù)時生效，綁定按鈕點擊方法 |
faceClick |
false |
|
點擊頭像時觸發(fā)事件 |
msgClick |
false |
|
點擊信息時觸發(fā)事件 |
Methods
| Method |
Required |
Description |
resetpulldown |
false |
下拉刷新完成后重置狀態(tài) |
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">
自定義內(nèi)容
</th-doctortitlebar>
API
Props
| Prop |
Required |
Default Value |
Description |
canopen |
false |
false |
是否顯示展開收起按鈕 |
openConfig |
false |
{open: "展開",close: "收起"} |
展開功能參數(shù)配置肌幽⊥砟耄可配置2個參數(shù)：open/close |
name |
true |
|
姓名字段 |
position |
true |
|
職稱字段 |
star |
false |
number |
星級字段（1~5） |
btn |
false |
false |
是否顯示右側(cè)按鈕，默認不顯示喂急，傳布爾值 |
btnType |
false |
string |
按鈕類型格嘁，可選值為 default,primary,warn |
btnCanClick |
false |
true |
按鈕是否能點擊，默認可以點擊 |
headImg |
false |
url |
頭像圖片廊移，默認顯示默認圖 |
clock |
false |
|
時鐘字段讥蔽，內(nèi)容自定義 |
isopen |
false |
|
控制展開收起面板默認打開或關(guān)閉 |
Events
| Event |
Required |
Default Value |
Description |
btnCall |
false |
function |
點擊按鈕時調(diào)用方法 |
headClick |
false |
|
點擊頭像調(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 |
控制點擊背景黑色是否關(guān)閉 |
Events
| Event |
Required |
Default Value |
Description |
onHide |
false |
function |
關(guān)閉時調(diào)用的方法 |
文本滾動 th-marquee
<div style="width: 100px;">
<th-marquee
content="333333333"
speed="middle">
</th-marquee>
</div>
API
Props
| Prop |
Required |
Default Value |
Description |
content |
false |
暫無內(nèi)容 |
顯示內(nèi)容 |
speed |
false |
middle |
控制滾動速度:quick/middle/slow
|
說明：需要一個外部容器限制寬度，才能實現(xiàn)滾動效果画机。當寬度大于實際內(nèi)容冶伞，不滾動。
最后編輯于 ：
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
