vue-quick-chat
This vue component is a simple chat that can be easily imported and used in your project.
Features
- Custom style
- Handle on type event and on message submit
- Chat with multiple participants
Instalation
yarn add vue-quick-chat
or with npm
npm install vue-quick-chat --save
Usage
Component Props
name | type | required | default | description |
---|---|---|---|---|
participants | Array | true | An array of participants. Each participant should be an Object with name and id | |
myself | Object | true | Object of my participant. "myself" should be an Object with name and id | |
messages | Array | true | An array of messages. Each message should be an Object with content, myself, participantId and timestamp | |
onType | Function | false | () => false | Event called when the user is typing |
onMessageSubmit | Function | false | () => false | Event called when the user sends a new message |
chatTitle | String | false | Empty String | The title on chat header |
placeholder | String | false | 'type your message here' | The placeholder of message text input |
colors | Object | true | Object with the color's description of style properties | |
borderStyle | Object | false | { topLeft: "10px", topRight: "10px", bottomLeft: "10px", bottomRight: "10px"} | Object with the description of border style properties |
hideCloseButton | Boolean | false | false | If true, the Close button will be hidden |
submitIconSize | String | false | "15px" | The submit icon size in pixels. |
closeButtonIconSize | String | false | "15px" | The close button icon size in pixels. |
participant
name | type | description |
---|---|---|
id | int | The user id should be an unique value |
name | String | The user name that will be displayed |
Example
message
name | type | description |
---|---|---|
content | String | The message text content |
myself | boolean | Wether the message was sent by myself participant or by other participant |
participantId | int | The participant's id who sent the message |
timestamp | Object | Object describing the year, month, day, hour, minute, second and millisecond that the message was sent |
Example
color
name | type | description |
---|---|---|
header | Object | Object containing the header background and text color |
message | Object | Object containing the message background and text color. The Object should contains the style for 'myself' and 'others' |
submitIcon | String | The color applied to the send message button icon |
Example
Project setup
npm install
Compiles and hot-reloads for development
npm run serve
Compiles and minifies for production
npm run build
Run your tests
npm run test
Lints and fixes files
npm run lint