chat-chen 改自 THOR 雷神 UI

i am Mr.chen!

Mr.chen

使用

1.安装组件库

npm i chat-chen --save

2.配置 main.js

import mychat from "chat-chen";
import "chat-chen/dist/index.css";
Vue.use(mychat);

注：也可以不在 main.js 里引入，在具体页面按需引入相关组件

聊天组件 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 | 配置初始置顶 | | textTitle | false | false | text 模式时标题显示字段 |

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 |

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