thor-xc v0.0.47

THOR雷神UI

We are SuperHero!

THOR-X

DEMO

http://ly.apcan.cn

使用

1.安装组件库

npm i thor-xc --save

2.配置main.js

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

注：也可以不在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

addQuickMessage(text) 进入输入框状态并插入text文字， 使用示例：this.$refs.messgebox.addQuickMessage('文字内容')

Props

Events

Methods

人物信息组件 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"
  @HealthClick="HealthClick"
  :showHealth="true">
  自定义内容
</th-doctortitlebar>

API

Props

Events

弹出层 th-dialog

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

API

Props

Events

文本滚动 th-marquee

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

API

Props

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