用Vue实现小Q聊天机器人（三）

GitHub：https://github.com/baiyuliang/Qrobot_Vue

布局大致是这样的：

我们至少要定义三个组件：
1.主界面组件：Chat.vue
2.左侧对话框item组件：LeftItem.vue
3.右侧对话框item组件：RightITem.vue

可能有同学觉得，这个简单的小项目又不用路由，所以根本不需要去定义这么多组件，直接在App.vue里就可以全部搞定！这个确实是的，但这样做，会导致项目的可读性变差，而且给人一种非常粗鲁的感觉，一点也不优雅！

Chat.vue：

<template>
    <div class="container">
        <div class="list" id="list" ref="list" >
            <ul>
                <li v-for="(item,index) in msglist" :key="index">
                    <RightItem :id="item.id" :type="item.type" :content="item.content" v-if="item.me"></RightItem>
                    <LeftItem :id="item.id" :type="item.type" :content="item.content" v-else></LeftItem>
                </li>
            </ul>
        </div>
        <div class="bottom">
            <div class="line"></div>
            <div class="input-send">
                <van-field v-model="text" placeholder="请输入聊天内容..." class="input" @keyup.enter="send"/>
                <van-button plain type="info" class="send" @click="send">发送</van-button>
            </div>

        </div>

    </div>
</template>

<style scoped lang="scss">
    .container {
        ul {
            padding: 0;
            margin: 0;
        }

        li {
            list-style: none;

        }

        .list {
            width: 100%;
            height: 100%;
            margin-bottom: 45px;
        }

        .bottom {
            width: 100%;
            position: fixed;
            bottom: 0;

            .line {
                width: 100%;
                height: 1px;
                background-color: #ddd;
            }

            .input-send {
                display: flex;
                justify-content: space-between;
                background-color: #fff;

                .input {
                    padding-right: 10px;
                }

                .send {
                    width: 80px;
                    height: 30px;
                    margin-top: 7px;
                    margin-right: 10px;
                }
            }

        }
    }


</style>

很简单，上边li，底部输入框！

LeftItem.vue:

<template>
    <div class="container">
        <img class="head" src="https://pp.myapp.com/ma_icon/0/icon_42284557_1517984341/96"/>

        <div class="content">
            <div class="text" v-if="type===1">
                {{content}}
            </div>
            <img class="img" :src="content" v-else-if="type===2" @click="preview(content)"/>
        </div>

    </div>
</template>

<script>
    import ImagePreview from "vant/lib/image-preview";

    export default {
        name: "LeftItem",
        props: ['id', 'type', 'content'],
        methods: {
            preview(url){
                ImagePreview([url])
            }
        }
    }
</script>

<style scoped lang="scss">
    .container {
        display: flex;
        padding: 10px 15px;
        margin-right: 60px;


        .head {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid #eee;
        }

        .content {
            margin-left: 10px;
            margin-top: 10px;

            .text {
                background-color: deepskyblue;
                border-bottom-right-radius: 10px;
                padding: 5px 5px;
                font-size: 14px;
                color: #fff;
            }

            .img {
                width: 100px;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
            }
        }

    }
</style>

其中，当style语法选择scss时，是需要安装node-sass和sass-loader插件的：

npm i node-sass sass-loader -D

布局方法主要使用了flex，flex-direction默认row，水平左向为基准，有同学可能想到用float或者position来布局，这两种布局都会导致其父布局高度无法被撑开（塌陷），而引起整个界面内容显示错乱，解决起来也相当麻烦，因此，要避免使用这两种布局方式！

另外，该组件使用了自定义属性：

 props: ['id', 'type', 'content']

type为消息类型：1位文字，2为图片，content则为文字内容或图片链接，当v-if="type=1"时显示文字内容，当v-else-if="type=2"时显示图片内容！

在使用该组件时：

<LeftItem :id="item.id" :type="item.type" :content="item.content"></LeftItem>

":"必不可少！

RightItem.vue:

<template>
    <div class="container">
        <img class="head"
             src="https://dss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1068485212,3292662520&fm=111&gp=0.jpg"/>
        <div class="content">
            <div class="text" v-if="type===1" style="word-break: break-all;">
                {{content}}
            </div>
            <img class="img" :src="content" v-else-if="type===2"/>
        </div>
    </div>
</template>

<script>

    export default {
        name: "RightItem",
        props: ['id', 'type', 'content']
    }
</script>

<style scoped lang="scss">
    .container {
        display: flex;
        padding: 10px 15px;
        margin-left: 60px;
        flex-direction: row-reverse;

        .head {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            border: 1px solid #eee;
        }

        .content {
            margin-right: 10px;
            margin-top: 10px;

            .text {
                background-color: #eee;
                border-bottom-left-radius: 10px;
                padding: 5px 5px;
                font-size: 14px;
                color: #000;
            }

            .img {
                width: 100px;
                border-bottom-right-radius: 10px;
                border-top-right-radius: 10px;
                border-bottom-left-radius: 10px;
            }
        }

    }
</style>

跟LeftItem差别不大，只是flex-direction为row-reverse，意思就是水平轴为基准，右对齐！

组件编写完成，替换App中的HelloWorld.vue:

<template>
    <div id="app">
        <Chat></Chat>
    </div>
</template>

<script>
    import Chat from './components/Chat.vue'

    export default {
        name: 'App',
        components: {
            Chat
        }
    }
</script>

<style scoped>
  
</style>

然后，你就可以在data中伪造一些数据，查看效果：

 msglist: [{
            id: 1,
               type: 1,
               content: '欢迎你！',
               me: false
           },...]

万事俱备只欠东风，下一篇接入接口数据后，就可以完成本项目了！

下一篇