chat_ui

<<<<<<< HEAD

new

A Vue.js project =======

ChatUI

b865f5d2100b0656102935ede754169b46be41b5

Build Setup

# install dependencies
npm install

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

<<<<<<< HEAD
# build for production with minification
npm run build

# build for production and view the bundle analyzer report
npm run build --report

For a detailed explanation on how things work, check out the guide and docs for vue-loader.

# 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 |
>>>>>>> b865f5d2100b0656102935ede754169b46be41b5