置底的输入框 -组件封装

1.效果

2.代码

<template>
<!-- 底部操作条 -->
        <view class="fixed-bottom flex align-center border-top bg-f5 justify-between p-20 mb-40" style="100rpx">
            <input type="text" class="bg-white flex-5 rounded" v-model="inputContent" @confirm="sendMsgEvent(1)" @focus="inputFocus" style="height: 50rpx;" />
            <view class="iconfont icon-icon_xiaolian-mian flex-1 flex justify-center" ></view>
            <view class="iconfont icon-zengjia1 flex-1 flex justify-center"></view>
        </view>
</template>

<script>
    export default {
        data() {
            return {
                inputContent:''
            }
        },
        methods: {
            //点击发送
            sendMsgEvent(msgType){
                //如果是文本消息，且输入为空，提前返回
                if(this.msgType==1&& this.inputContent.length<1){
                    return
                }
                
                this.$emit('sendMsgEvent',msgType,this.inputContent)
                this.inputContent=''
            },
            //聚焦输入框
            inputFocus(){
                this.$emit('inputFocus')
            }
        }
    }
</script>

<style>

</style>