开始

聊天页面底部的输入框和发送按钮。

不会实现发送图片的逻辑，只会够建出来样式。主要是因为课程量太大。后期有专门的即时通讯的课程来讲这块。包括群聊 个人聊天等。发送图片和表情等。

<!-- 输入框 -->
        <view class="user-chat-bottom">
                <input type="text" placeholder="文明发言" />
                <view class="icon iconfont icon-fabu"></view>
        </view>

flex布局

<!-- 输入框 -->
        <view class="user-chat-bottom u-f-ac">
                <input type="text" placeholder="文明发言" />
                <view class="icon iconfont icon-fabu"></view>
        </view>

css样式

固定定位

白色背景

加一个上边框

为了看的明显一点，给文本框加一个红色的边框

.user-chat-bottom input{
    border: 1upx solid red;
}

这里改成左右20upx

按钮给个固定的宽度

水平垂直方向居中。

占满剩余空间，然后距离右边20

.user-chat-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100upx;
    padding: 0 20upx;
    border-bottom: 1upx solid;
}

给input一点内边距+圆角

.user-chat-bottom>input{
    border: 1upx solid red;
    flex: 1;
    margin-right: 20upx;
    padding: 10upx;
    border-radius: 10upx;
}

按钮大一点。

.user-chat-bottom>view{
    width: 80upx;
    background: yellow;
    font-size: 35upx;
}

.user-chat-bottom{
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 120upx;
    padding: 0 20upx;
    border-bottom: 1upx solid;
}

图标给50

.user-chat-bottom>view{
    width: 80upx;
    background: yellow;
    font-size: 50upx;
}

左右20

.user-chat-bottom>input{
    border: 1upx solid red;
    flex: 1;
    margin-right: 20upx;
    padding: 10upx 20upx;
    border-radius: 10upx;
}

把边框都去掉

吸取背景色

加上背景色

.user-chat-bottom>input{
    /* border: 1upx solid red; */
    flex: 1;
    margin-right: 20upx;
    padding: 10upx 20upx;
    border-radius: 10upx;
    background: #F7F7F7;
}

发送按钮，改的小一点

上边线是灰色

border-bottom: 1upx solid #EEEEEE;

投屏有色差，真机上看着可以

文本框绑定数据

text:""

<input type="text" placeholder="文明发言" v-model="text" />

发送事件

@tap="submit"

methods: {
            submit(){
                console.log(this.text);
            }
        }

封装组件

剪切到组件内

<view class="user-chat-bottom u-f-ac">
        <input type="text" placeholder="文明发言" v-model="text" />
        <view class="icon iconfont icon-fabu u-f-ajc" @tap="submit"></view>
    </view>

样式也复制进来。

<style scoped>
    .user-chat-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120upx;
        padding: 0 20upx;
        border-bottom: 1upx solid #EEEEEE;
    }
    .user-chat-bottom>input {
        /* border: 1upx solid red; */
        flex: 1;
        margin-right: 20upx;
        padding: 10upx 20upx;
        border-radius: 10upx;
        background: #F7F7F7;
    }
    .user-chat-bottom>view {
        width: 80upx;
        /* background: yellow; */
        font-size: 45upx;
    }
</style>

<script>
    export default {
        data() {
            return {
                text:""
            }
        },
        methods: {
            submit(){
                this.$emit('submit',this.text);
            }
        }
    }
</script>

引入组件

import userChatBottom from '@/components/user-chat/user-chat-bottom.vue';
components:{
            userChatBottom
        },

<user-chat-bottom @submit="submit"></user-chat-bottom>

submit(data){
                console.log(data);
            }

发送完消息 清空聊天框

submit(){
                // 发送消息逻辑
                this.$emit('submit',this.text);
                this.text=""
            }

本节代码

user-chat-bottom组件

<template>
    <view class="user-chat-bottom u-f-ac">
        <input type="text" placeholder="文明发言" v-model="text" />
        <view class="icon iconfont icon-fabu u-f-ajc" @tap="submit"></view>
    </view>
</template>
<script>
    export default {
        data() {
            return {
                text:""
            }
        },
        methods: {
            submit(){
                // 发送消息逻辑
                this.$emit('submit',this.text);
                this.text=""
            }
        }
    }
</script>
<style scoped>
    .user-chat-bottom {
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 120upx;
        padding: 0 20upx;
        border-bottom: 1upx solid #EEEEEE;
    }
    .user-chat-bottom>input {
        /* border: 1upx solid red; */
        flex: 1;
        margin-right: 20upx;
        padding: 10upx 20upx;
        border-radius: 10upx;
        background: #F7F7F7;
    }
    .user-chat-bottom>view {
        width: 80upx;
        /* background: yellow; */
        font-size: 45upx;
    }
</style>

user-chat页面

<template>
    <view>
        <!-- 输入框 -->
        <user-chat-bottom @submit="submit"></user-chat-bottom>
    </view>
</template>
<script>
    import userChatBottom from '@/components/user-chat/user-chat-bottom.vue';
    export default {
        components:{
            userChatBottom
        },
        data() {
            return {
                text:""
            }
        },
        methods: {
            submit(data){
                console.log(data);
            }
        }
    }
</script>
<style>
</style>

结束