Компонент чата Vue

Vue.js

We are SuperHero!

Библиотека компонентов бизнес-уровня THOR-X

DEMO

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)
скопировать код

Примечание. Вы также можете не вводить в main.js и вводить соответствующие компоненты на определенных страницах по мере необходимости.

Компонент чата th-message

<th-message 
  ref="messgebox"
  :usePulldown="true"
  :pulldownConfig="pulldownconfig"
  :topPadding="120"
  :messageData="messageData" 
  :funcList="funclist" 
  :bigBtn="bigbtn"
  :showInput="showinput"
  :selfFace="selfface" 
  :otherFace="otherface"
  @sendOut="senRequest"
  @galleryCall="gallery"
  @cameraCall="camera"
  @quickCall="quick"
  @bigBtnCall="btncall"
  @faceClick="faceclick"
  @msgClick="msgclick"
  @pulldownCall="pulldowncall">
</th-message>
скопировать код

Props

topPadding: верхнее заполнение

Если сверху есть другие функциональные блоки, вы можете установить верхний интервал, значением является высота функционального блока, поддерживаются только положительные целые числа.

messageData: история чата

  • тип: 4 формы тип=1 правый тип пузырька=2 левый тип пузырька=3 тип подсказки сообщения=4 системное сообщение
  • текст: информация в формате html (поддерживает теги html)
  • isimg: информация об изображении true/false, по умолчанию false

funcList: список функций

Форма массива Вы можете передать ["галерея", "камера", "быстро"], передать несколько, чтобы отобразить несколько

bigBtn: отображать большие кнопки внизу

Для сценариев приложения, таких как переход к оценке, должен быть передан тип строки, а входящий текст — это текст, отображаемый на кнопке.

showInput: показывать ли поле ввода чата

По умолчанию установлено значение true, если передано значение false, поле ввода не будет отображаться.

selfFace

Аватар отправителя, изображение по умолчанию отображается по умолчанию

otherFace

Аватар получателя, изображение по умолчанию отображается по умолчанию

usePulldown

Настройте, следует ли включить функцию обновления по запросу

pulldownConfig

Потяните вниз, чтобы обновить конфигурацию. Можно настроить четыре параметра: по умолчанию/вверх/вниз/загрузка, например:

{
    default: "下拉刷新",
    up: "<div style='color:red'>下拉刷新</div>",
    down: "<div style='color:blue'>下拉刷新</div>",
    loading: "<span style='color:green'>加载中</span>"
}
скопировать код

Events

pulldownCall

Метод, вызываемый после обновления с раскрывающимся списком, инициирует запрос на обновление данных и вызывает метод resetpulldown после обновления данных (описано ниже).

sendOut

Метод вызова при нажатии отправить

galleryCall

Метод вызывается при нажатии на альбом и вступает в силу, когда в параметре funcList есть «галерея».

cameraCall

Вызывайте метод, когда вы нажимаете, чтобы сделать снимок, как указано выше.

quickCall

Метод вызывается при нажатии быстрого ответа, как указано выше.

bigBtnCall

Метод вызывается при нажатии большой кнопки внизу, он вступает в силу при передаче параметра bigBtn, а метод нажатия кнопки привязан

faceClick

Инициировать событие при нажатии на аватар

msgClick

Инициировать событие при нажатии на информацию

Methods

resetpulldown

Сбросить состояние после завершения обновления по запросу

Компонент информации о персонаже 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"
  @btnCall="topbtncall"
  @headClick="headclick">
  自定义内容
</th-doctortitlebar>
скопировать код

Props

canopen: отображать ли кнопки развертывания и свертывания

Показывать ли кнопки развертывания и свертывания

openConfig

Разверните конфигурацию параметров функции. Можно настроить 2 параметра: открыть/закрыть, например:

{
    open: "打开",
    close: "关闭"
}
скопировать код

имя: поле имени

поле имени

должность: поле должности

Поле заголовка

звезда: звездное поле (1~5)

Звездное поле (1~5), пройти внутрь

btn: показывать ли правую кнопку

Отображать ли правую кнопку, не отображаемую по умолчанию, передать логическое значение

btnType: тип кнопки

Тип кнопки, необязательные значения — по умолчанию, основной, предупреждать, передавать строку

btnCanClick: можно ли нажать кнопку

Можно ли нажать кнопку, можно ли нажать кнопку по умолчанию и передать логическое значение

headImg

Изображение аватара, изображение по умолчанию отображается по умолчанию

Events

btnCall

Метод вызова при нажатии кнопки

headClick

Нажмите на аватарку, чтобы вызвать метод

всплывающее окно

<th-dialog 
  :isShow.sync="showdialog" 
  :showFrom="dialogfrom" 
  :closeOnClickshadow="true" 
  @onHide="hidedialog">
</th-dialog>
скопировать код

Props

isShow

Контролирует, показывать ли true/false

showFrom

Управляет отображением верха/низа

closeOnClickshadow

Определяет, отключен ли черный фон щелчка по умолчанию false

Events

onHide

Метод вызывается при закрытии

Категории