chat_ui
v0.1.0
Published
A Vue.js project
Downloads
3
Readme
<<<<<<< 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