用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
           },...]

萬事俱備只欠東風，下一篇接入接口數據後，就可以完成本項目了！