vue-chat-ui v0.1.0

ChatUI

Build Setup

# install dependencies
npm install

# serve with hot reload at localhost:8080
npm run dev

Code Organization

├── build                      
├── config           
├── preview                      // project preview image
├── src                          // the source files
│   ├── assets                   // static image resource
│   ├── components        
│   │   ├── chat_area.vue        // provide chatting view
│   │   ├── chat_cell.vue        // a cell include contact simple data
│   │   ├── chat_dialog.vue      // pop dialog
│   │   ├── chat_group.vue       // chat-cell group
│   │   ├── chat_header.vue      // top header
│   │   └── chat_pop_bubble.vue  // small bubble clickable
│   ├── pages 
│   │   ├── chat.vue             // chat-each-other view
│   │   ├── index.vue            // contact list
│   │   ├── overview.vue         // contact profile view
│   │   ├── page_transition.vue  // page transition animate
│   │   ├── pay.vue              // pay for VIP
│   │   └── theme.vue            // change theme
│   ├── router
│   │   └── index.js             // vue router setting
│   ├── scripts                  // scripts resource
│   ├── styles                   // css resource
│   ├── App.vue                  // page entry file
│   └── main.js                  // program entry file, load components
├── .babelrc
├── .gitigore
├── data.json                    // analog data of back end
├── index.html                   // entry html
├── LICENSE
├── package-lock.json
├── package.json
└── README.md

Components

ChatArea

Provide the conversation view and the message sender of each chatting.

Menu props

props	Introductions	type	default
height	Chatting area height.	Number	300
contactAvatar	URL of other avartar, display on the left.	String	-
ownerAvatar	URL of own avartar, display on the right.	String	-
oriData	Chat message, once at start time.	Array	[]

Menu events

events	Introductions	return
on-avatar-click	Triggered when a avatar is clicked.	Which avatar was clicked (0: own, 1: other).
load-more	Drag to top and get more data.	A function callback contains success status and data.
on-msg-send	Triggered when the message to be sent is ready and the sending button is clicked.	The message of sending.

When you received a new message, use this.$bus.emit('new-chat-data', message)with vue-bus on parent to provide the new message to this component.

ChatCell

A cell include contact avatar, nickname, last massage and time.

Menu props

props	Introductions	type	default
avatar	Avartar URL.	String	''
nickname	Nickname or display name.	String	''
msg	The last message.	String	''
time	The sent time of last message.	String	''
circle-avatar	Display the avatar in circle or not.	Boolean	false

ChatGroup

The contacts list container, each info including other's avatar, the last message of the chat, the last time. Consists of the chat-cell component.

Menu props

props	Introductions	type	default
data	Contacts list data.	Array	[]

Menu events

events	Introductions	return
on-cell-click	A item is clicked.	click index, content.

ChatDialog

Pop a dialog in custom.

Menu props

props	Introductions	type	default
type	Dialog type (text dialog or input dialog).	Number	0
show	Dialog display.	Boolean	false
title	Dialog title.	String	false
content	Dialog content.	String	''
positive-btn	Display text on positive button.	String	'Confirm'
negative-btn	Display text on negative button.	String	'Cancel'

Menu events

events	Introductions	return
positive-btn-click	When the positive button is pressed.	content
negative-btn-click	When the nagative button is pressed.	-

ChatHeader

The top header.

Menu props

props	Introductions	type	default
height	The height occupied by the header.	Number	50
back	Display the back option.	Boolean	true
title	The content of the header.	String	''
fixed	The position of the header use fixed or not.	Boolean	false