basic vue chat
1.0.0
Реализация чата на основе VUE.
Вы можете установить компонент с помощью менеджеров пакетов, таких как NPM или пряжа или установить компонент из репозитория.
npm i basic-vue-chatyarn add basic-vue-chatgit clone https://github.com/jmaczan/basic-vue-chat.git
cd basic-vue-chat
npm i Компоненты используют Vue ( vue Package), Fontawesome и Moment.js для Vue ( vue-moment ).
Чат-это единый компонент VUE, который вы можете найти в /src/components/basic-vue-chat/ . Для начала просто импортируйте компонент BasicVueChat и поместите следующую строку в свой код HTML:
< basic-vue-chat />Чтобы выдвинуть сообщение, чтобы поболтать, просто передайте newmessage prop в BasicvueChat . Пример:
< basic-vue-chat :new-message =" message " /> Объект message выше может быть частью data в вашем компоненте VUE, в котором вы будете использовать BasicVueChat.
Пример правильной структуры сообщения:
{
id : 0 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
image : '' ,
contents : 'hi there' ,
date : '16:30'
} Вы можете найти пример нажатия сообщения в файле App.vue .
Когда пользователь отправляет сообщение, сообщение распространяется на компонент BasicVueChat и событие NewownMessage . Чтобы справиться с этим событием, вы можете, например, сделать это:
< basic-vue-chat @newOwnMessage =" onNewOwnMessage " /> где onNewOwnMessage(message) - это метод в вашем компоненте VUE, в котором вы будете использовать BasicVueChat.
Пример правильной структуры полезной нагрузки событий:
{
id : 1 ,
imageUrl : 'http://path/to/image' ,
image : File ( ) ,
contents : 'hello' ,
date : '16:31'
} Вы можете загружать и получать изображения. Чтобы прикрепить изображение, используйте кнопку Paperclip. Изображение будет излучается в сообщении на image (как объект File ) и свойства imageUrl ( string ).
Чтобы начать разработку, вы можете использовать режим горячей перезагрузки:
npm run serve
Чтобы создать производственную версию:
npm run build
Чтобы запустить тесты:
npm test
Чтобы подключить фиктивные данные, просто передайте логику attachMock к BasicVueChat.
Стили импортируются в основном компоненте BasicVueChat , а переменные имеют значения !default , поэтому это означает, что вы можете переопределить значения по умолчанию, определяя свои собственные переменные перед импортом стилей.
< style lang="scss">
$primary : red ;
// above the following import you can override default values of variables like $primary
@import " ../../assets/scss/main.scss " ;
</ style > ПРОДОВЛЕНИЕ ПРОПРЕД title КОМПОНЕНТА BASICVUECHAT.
< basic-vue-chat :title =" 'My Best Team' " /> Пропустите PROP initialFeed к BasicVueChat Component.
< basic-vue-chat :initial-feed =" feed " />Пример правильной структуры данных:
const feed = [
{
id : 1 ,
author : 'Person' ,
imageUrl : 'http://path/to/image' ,
contents : 'hi there' ,
date : '16:30'
} ,
{
id : 0 ,
author : 'Me' ,
contents : 'hello' ,
date : '16:30'
}
] Пропустите PROP initialAuthorId в BasicVueChat Component, чтобы определить текущий идентификатор пользователя. Значение по умолчанию 0 .
Чат использует SCSS, поэтому вы можете легко переопределить переменные, используемые в проекте. Вы можете найти их в /src/assets/scss/modules/_variables.scss . Все переменные имеют значения по умолчанию.
| Описание | Переменная | Значение по умолчанию |
|---|---|---|
| Основной цвет | $ первичный | $ slate-slue (#6b63d8) |
| Вторичный цвет | $ второстепенный | $ lavender (#b284ed) |
| Цвет заголовка | $ заголовок | $ Ghost-White (#faf9ff) |
| Входной фон цвет | $ input-background-color | $ alice-blue (#f2efff) |
| Семья шрифтов | $ font-family | 'Source Sans Pro', Sans-Serif |
| Вес шрифта | $ Font-Weight | 400 |
| Размер шрифта | $ font-size | 14px |
| Темный цвет текста | $ Dark-Text-Color | $ Madison (#2C3E50) |
| Светлый текст цвета | $ Light-Text-Color | $ Ghost-White (#faf9ff) |
| Темный цвет фона | $ Dark-bg | $ Madison (#2C3E50) |
| Светлый фон цвет | $ light-bg | $ White (#ffffff) |
| Ширина окна чата | $ windows | 500px |
| Высота окна чата | $ | 400px |
| Сообщение максимально ширина | $ message-max-ширина | 200px |
partialsmodulesbasic-vue-chatРазработано и протестировано под MacOS High Sierra 10.13 и Google Chrome 69.
