10 Vue3 实战解决方法

滚动条到底

<template>
    <div id="box">
        <div class="b-head">
            <img class="h-img" alt="" src="../assets/img/logo.png" width=80; height=60;/>
            <span class="h_span">知识图谱机器人</span>
        </div>
        <div class="b-body" ref="main">
            <template v-for="(item, index) in contentList" :key="index">
                <div :class="{rotWord: item.type==='bot', mWord: item.type==='user'}">
                    <span></span>
                    <p>{{item.content}}</p>
                </div>
            </template>
        </div>
        <div class="b-footer">
            <input type="text" name="text" id="f-left" @keyup.enter="ask" v-model="userSay"/>
            <div id="btn" @click="ask">发送</div>
        </div>
    </div>

</template>

<script>
    import {defineComponent, computed} from 'vue';

    export default defineComponent({
        name: "ChatBot",
        data() {
            return {
                userSay: "",
                contentList: [
                    {
                        "type": "bot",
                        "content": "机器人说话"
                    },
                    {
                        "type": "user",
                        "content": "用户所说的话"
                    },
                ]
            }
        },
        methods: {
            ask() {
                if (this.userSay === '') {
                    return
                }
                // 添加用户说的话
                let userContent = {
                    "type": "user",
                    "content": this.userSay
                };
                this.contentList.push(userContent);

                // 添加bot说的话
                let botSay = `bot:${this.userSay}`;
                let botContent = {
                    "type": "bot",
                    "content": botSay
                };
                this.contentList.push(botContent);

                // 最后的动作
                this.userSay = "";

                this.$nextTick(() => {
                    // 通过 $refs 获取 <div class="b-body" ref="main">...</div>其DOM
                    this.$refs.main.scrollTop = this.$refs.main.scrollHeight;
                });
            }
        },
    })
</script>

<style lang="scss" scoped>
    a:link {
        color: #fff;
        text-decoration: none;
    }

    a:visited {
        text-decoration: none;
        color: #fff;
    }

    a:hover {
        text-decoration: none;
        color: #fff;
    }

    a:active {
        text-decoration: none;
        color: #fff;
    }

    * {
        margin: 0;
        padding: 0;
    }


    #box {
        width: 800px;
        height: 600px;
        /*background: rgba(255, 255, 255, .5);*/
        margin: 50px auto 0;
        background: url(../assets/img/bg.jpg) no-repeat;
    }

    .b-head {
        width: 100%;
        height: 60px;
        background-color: #4CAF50;
    }

    .h-img {
        margin: 0 20px;
        float: left;
        user-select: none;
    }

    .h_span {
        color: #fff;
        font-size: 18px;
        line-height: 60px;
        float: left;
        user-select: none;
        cursor: default;
    }

    .b-body {
        width: 100%;
        height: 420px;
        overflow: auto;
        margin: 20px 0;
    }

    .rotWord, .mWord {
        width: 100%;
        margin-top: 10px;
        overflow: hidden;
    }

    .rotWord span {
        background: url(../assets/img/rot.png);
        height: 40px;
        width: 40px;
        margin-left: 20px;
        float: left;
    }

    .rotWord p {
        word-break: break-all;
        top: 4px;
        float: left;
        color: #fff;
        font-size: 14px;
        margin-left: 10px;
        padding: 10px;
        line-height: 24px;
        background: rgba(0, 0, 255, .5);
        border-radius: 6px;
        max-width: 220px;
    }

    .mWord span {
        background: url(../assets/img/my.png);
        height: 40px;
        width: 40px;
        float: right;
        margin-right: 20px;
    }

    .mWord p {
        word-break: break-all;
        top: 2px;
        float: right;
        color: #fff;
        font-size: 14px;
        margin-right: 10px;
        padding: 10px;
        line-height: 24px;
        background: #19b955;
        border-radius: 6px;
        max-width: 220px;
    }

    .b-footer {
        width: 760px;
        height: 60px;
        margin: 0 20px;
        font-size: 16px;
        color: #666;
    }

    #f-left {
        padding-left: 20px;
        outline: none;
        overflow: hidden;
        width: 620px;
        height: 60px;
        float: left;
        background: rgba(0, 0, 0, .1);
        font-size: 18px;
        border: none;
        border-radius: 5px;
    }

    #btn {
        width: 100px;
        height: 60px;
        background: #666666;
        float: right;
        cursor: pointer;
        text-align: center;
        line-height: 60px;
        font-size: 18px;
        color: #fff;
        user-select: none;
        border-radius: 10px;
    }

</style>