# chat

**Repository Path**: wq002/chat

## Basic Information

- **Project Name**: chat
- **Description**: No description available
- **Primary Language**: Unknown
- **License**: MIT
- **Default Branch**: master
- **Homepage**: None
- **GVP Project**: No

## Statistics

- **Stars**: 0
- **Forks**: 0
- **Created**: 2020-11-06
- **Last Updated**: 2021-12-04

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

# Chat02

#### 介绍
**在组件jwchat的基础上做数据格式调整**

本项目是一款极简的数据驱动为主的聊天框组件。
新增表情包可自动匹配微信表情。
新增聊天窗口配置组件，可以自由配置 顶部状态栏 和 右侧信息栏



#### 安装

* 使用 `npm` 安装

  ``` bash
  npm i chat02
  ```

```

#### 使用

1. 因为本组件是基于 `element-ui` 开发。首先需要引入  `element-ui`。

   ```bash
   npm install element-ui
   ```

2. 在 `main.js` 中引入组件

   ``` js
   import ElementUI from 'element-ui';
   import 'element-ui/lib/theme-chalk/index.css';
   Vue.use(ElementUI);
   
   import Chat from 'chat02';

   Vue.use(Chat)
   ```
3.使用
```
<template>
    <div id="app" class="wrapper">
        <JwChat-index
                v-if="config"
                :config="config"
                :taleList="list"
                @enter="bindEnter"
                :Akey="Akey"
                v-model="inputMsg"
                :toolConfig="tool"
                :message_url="message_url"
                :s="s"
                @clickTalk="talkEvent"
                @Hmsg="Hmsg"
        >
            <JwChat-rightbox class="rightSlot" :active_key="active_key" :config="rightConfig" @click="onReplaceNotice"/>
        </JwChat-index>
    </div>
</template>

<script>
    import emojiParser from 'wechat-emoji-parser'

    export default {
        data() {
            return {
                num: 5000,
                inputMsg: '',
                flag: false,
                list: [
                    {
                        date: "2020-07-23 13:10:30",
                        id: 577,
                        msg_status: 1,
                        payload: {
                            content: "qwq",
                            receiver_fd: 16,
                            receiver_key: "S::3",
                        },

                        receiver_fd: 16,
                        receiver_key: "S::3",
                        sender_fd: 13,
                        sender_key: "U::3",
                        type: "chat02"

                    }
                ],
                tool: {
                    show: ['file', 'history', 'img', ['文件1', '', '美图']],
                    callback: this.toolEvent
                },
                rightConfig: {
                    listTip: '成员',
                    notice: '【公告】这是一款高度自由的聊天组件，基于AVue、Vue、Element-ui开发。点个赞再走吧 ',
                    userList: [
                        {
                            at: "15点01分 2020-07-24",
                            avatar: "http://127.0.0.1:8202/storage/avatar/IMZvBQKOsa5h6fPjTRkSmQIAHxqdfMtCwm234KNY.jpeg",
                            fd: 34,
                            history: [
                                {
                                    date:"2020-07-24 15:03:20",
                                    id:582,
                                    msg_status:1,
                                    payload:{
                                        content:"321312z",
                                        receiver_fd:34,
                                        receiver_key:"S::1"
                                    },
                                    receiver_fd:34,
                                    receiver_key:"S::1",
                                    sender_fd:38,
                                    sender_key:"U::1",
                                    type:"chat02"

                                },
                                {
                                    date:"2020-07-24 15:03:11",
                                    id:581,
                                    msg_status:1,
                                    payload:{
                                        content:"11",
                                        receiver_fd:38,
                                        receiver_key:"U::1"
                                    },
                                    receiver_fd:38,
                                    receiver_key:"U::1",
                                    sender_fd:34,
                                    sender_key:"S::1",
                                    type:"chat02"

                                },
                                {
                                    date:"2020-07-24 15:03:11",
                                    id:581,
                                    msg_status:1,
                                    payload:{
                                        content:"11",
                                        receiver_fd:38,
                                        receiver_key:"U::1"
                                    },
                                    receiver_fd:38,
                                    receiver_key:"U::1",
                                    sender_fd:34,
                                    sender_key:"S::1",
                                    type:"chat02"

                                },
                                {
                                    date:"2020-07-24 15:03:11",
                                    id:581,
                                    msg_status:1,
                                    payload:{
                                        content:"http://192.168.0.109:5200//storage/frffZ9TedjJtjLzhL9ztYcQsfK2izjtzk5DCEmdW.xlsx",
                                        name:"下班打卡.xlsx",
                                        type:"FILE"

                                    },
                                    receiver_fd:223,
                                    receiver_key:"U::1",
                                    sender_fd:227,
                                    sender_key:"S::1",
                                    type:"chat02"

                                },
                                {
                                    date:"2020-07-24 15:03:11",
                                    id:581,
                                    msg_status:1,
                                    payload:{
                                        content:"11",
                                        receiver_fd:38,
                                        receiver_key:"U::1"
                                    },
                                    receiver_fd:38,
                                    receiver_key:"U::1",
                                    sender_fd:34,
                                    sender_key:"S::1",
                                    type:"chat02"

                                },
                                {
                                    date:"2020-07-24 15:03:11",
                                    id:581,
                                    msg_status:1,
                                    payload:{
                                        content:"11",
                                        receiver_fd:38,
                                        receiver_key:"U::1"
                                    },
                                    receiver_fd:38,
                                    receiver_key:"U::1",
                                    sender_fd:34,
                                    sender_key:"S::1",
                                    type:"chat02"

                                },
                                {
                                    date:"2020-07-24 15:03:11",
                                    id:581,
                                    msg_status:1,
                                    payload:{
                                        content:"11",
                                        receiver_fd:38,
                                        receiver_key:"U::1"
                                    },
                                    receiver_fd:38,
                                    receiver_key:"U::1",
                                    sender_fd:34,
                                    sender_key:"S::1",
                                    type:"chat02"

                                },
                                {
                                    date:"2020-07-24 15:03:11",
                                    id:581,
                                    msg_status:1,
                                    payload:{
                                        content:"11",
                                        receiver_fd:38,
                                        receiver_key:"U::1"
                                    },
                                    receiver_fd:38,
                                    receiver_key:"U::1",
                                    sender_fd:34,
                                    sender_key:"S::1",
                                    type:"chat02"

                                },
                                {
                                    date:"2020-07-24 15:03:11",
                                    id:581,
                                    msg_status:1,
                                    payload:{
                                        content:"11",
                                        receiver_fd:38,
                                        receiver_key:"U::1"
                                    },
                                    receiver_fd:38,
                                    receiver_key:"U::1",
                                    sender_fd:34,
                                    sender_key:"S::1",
                                    type:"chat02"

                                },
                            ],
                            img: "http://127.0.0.1:8202/storage/avatar/IMZvBQKOsa5h6fPjTRkSmQIAHxqdfMtCwm234KNY.jpeg",
                            key: "S::1",
                            name: "公共测试",
                            state: "",
                            unread: 0
                        }

                    ]
                },
                config: '',
                active_key: '0',
                s: 'image/timg.jpg',
                Akey: '',
                message_url:'http://192.168.0.109:5200/api/client/message'
            }
        },
        methods: {
            change() {
                this.num++
            },
            talkEvent(play) {
                console.log(play)
            },
            bindEnter() {
                var msg = this.inputMsg;
                var emoji_ = emojiParser(msg).split('"')[1];
                if (!msg) return;
                var msgObj = {
                    date: "2020/05/20 23:19:07",
                    payload: {
                        content: emoji_ ? emoji_ : msg,
                        type: emoji_ ? 'EMJIO' : '',
                    },
                    receiver_fd: 18,
                    receiver_key: "S::6",
                    sender_fd: 17,
                    sender_key: "s::1",
                    name: 'Me',
                    img: this.avatar,
                };
                this.list.push(msgObj);
            },
            Hmsg(msg){
                console.log(msg)
            },

            toolEvent(type) {
                console.log(type.val.get('file'))
            },
            bindCover(type) {
                console.log('header', type)
            },
            onReplaceNotice(text) {

                this.list = text.history;
                this.config = text;
                this.active_key = text.key;
                this.config.callback = this.bindCover;
                this.s = ''
                console.log('right', text)
            },
            bindTalk(play) {
                console.log('talk', play)
            },

        },
        mounted() {
            this.config = this.rightConfig.userList[0];
            this.config.callback = this.bindCover;
        },
    }
</script>
<style scoped>
    .rightSlot {
        width: 100%;
        height: 100%;
        overflow: hidden;
        flex-direction: column;
    }
</style>
<style>
    .active {
        color: red;
    }

    * {
        padding: 0;
        margin: 0;
    }

    body {
        width: 100vw;
        height: 100vh;
        overflow: hidden;
        background-image: linear-gradient(to bottom right, #7a88ff, #7affaf);
    }

    #app {
        height: 100vh;
        font-family: Avenir, Helvetica, Arial, sans-serif;
        -webkit-font-smoothing: antialiased;
        -moz-osx-font-smoothing: grayscale;
        text-align: center;
        color: #2c3e50;
        margin-top: 60px;
    }

    .rightBox {
        border-left: 1px solid rgba(151, 147, 147, 0.08);
    }
</style>
```
      

   
#### 文档
* [**jwchat官方文档**](https://codegi.gitee.io/jwchatdoc/)