uni-app小程序聊天表情發送+獲取input光標位置

直接上代碼，懶得講了

emoji表情圖片大全需要什么自己可以復制過來使用
https://www.emojidaquan.com/
http://www.fhdq.net/emoji/emojifuhao.html

先看效果

 

 

 

 

 

 

 

 html代碼

 

<template>
    <!-- 聊天 -->
    <view class="consult">
        <!-- 聊天記錄 -->
        <chat-content></chat-content>
        <!-- 鍵盤 -->
        <view :class="['keyboard',useful_flag?'keyboard-active':'']">
            <view :class="['keyboard-tup',active_Up?'active-tup':'']">
                <input v-model="value" :focus="cursor" 
                :cursor="resStart" 
                @keyboardheightchange.stop="openinput"
                @blur="cursorss" 
                @confirm="startSearch"/>
                <image @click="openUseful(1)" class="plus-circle" src="../../../../static/images/workbench/face.png" mode=""></image>
                <image class="useful" src="../../../../static/images/workbench/8.png" mode="" @click="openUseful(2)"></image>
            </view>
            <!--常用語  -->
            <view class="useful-content" v-if="useful_expression === 2">
                <view class="useful-content-xiaoxi" v-for="item in 9">你好，可以幫我推薦幾個兼職任務嗎？</view>
            </view>
            <!-- 表情 -->
            <view class="expression" v-if="useful_expression === 1">
                <scroll-view class="emojis_scroll" :scroll-x="false" :scroll-y="true">
                  <view v-for="item in emojis" :key="item.emojis" class="emoji" @click="ChooseToLook(`${item.emoji}`)">
                    {{item.emoji}}
                  </view>
                </scroll-view>
            </view>
        </view>
        <!-- 蒙板 -->
        <view class="shade" v-show="show" @click="close"></view>
    </view>
</template>

 

js部分

<script>
    import chatContent from './chatcontent/index.vue'
    export default {
        components:{chatContent},
        data() {
            return{
                show: false,
                cursor: false, //是否聚焦
                value:'',
                active_Up: false,
                resStart:0, //input光標位置
                useful_flag: false, //控制動畫效果
                useful_expression: 2, //2默認表情,1常用語
                emojis:[
                    {emoji:'😃'},
                    {emoji:'🤣'}, //真機才能看見效果
                    {emoji:'😁'},
                    {emoji:'😆'},
                    {emoji:'😅'}
                ]
            }
        },
        watch:{
            useful_flag:{
                handler(newval,oldval){
                    this.show = newval
                }
            }
        },
        methods:{
            // 軟鍵盤彈起，獲取到焦點
            openinput(event){
                // 解決軟鍵盤遮擋input輸入框
                this.active_Up = true //初始化
                if(event.detail.height != 0){
                    this.active_Up = true
                }else{
                    this.active_Up = false
                }
                return false
            },
            // 失去焦點時獲取當前光標的位置
            cursorss(event){
                this.active_Up = false
                this.cursor = false; //取消聚焦
                this.resStart = event.target.cursor //保存光標位置
            },
            ChooseToLook(val){
                // 返回獲取從0到光標位置的字符串
                let str = this.value.substring(0,this.resStart)
                // 將表情插入指定位置
                this.value = this.value.replace(str,str + val)
                // 光標向后移動兩位
                this.resStart += 2; //光標加2(表情是占兩個位置)
                this.cursor = true //設置聚焦
            },
            close(){
                this.show = false;
                this.useful_flag = false
            },
            // 打開常用語
            openUseful(e){
                if(this.useful_flag){
                    if(this.useful_expression === e){
                        // 如果已經打開過常用語
                        this.useful_expression = e
                        this.useful_flag = false //關閉
                    }else{
                        this.useful_expression = e
                    }
                }else{
                    this.useful_expression = e
                    this.useful_flag = true //開啟動畫
                }
            },
            // 軟鍵盤按下確定的事件監聽
            startSearch(){
                console.log(1111)
            }
        }
    }
</script>

 

css部分

<style lang="scss" scoped>
    .consult{
        background-color: #EFEFEF;
        height: 100vh;
        padding-top: 30rpx;
        padding-bottom: 60rpx;
        .shade{
            width: 100%;
            height: 100%;
            background: rgba(0,0,0,.4);
            position: absolute;
            top: 0;
            left: 0;
        }
        .keyboard-active{
            bottom: 0 !important;
        }
        .keyboard{
            position: fixed;
            bottom: -488rpx;
            transition: bottom .3s;
            z-index: 999;
            width: 100%;
            .expression{
                height: 488rpx;
                background-color: #FAFAFA;
                .emojis_scroll{
                  display: block;
                  float: left;
                  width: 100%;
                  height: 400rpx;
                  padding-left: 25rpx;
                }
                
                .emoji{
                  display: block;
                  float: left;
                  width: 100rpx;
                  height: 100rpx;
                  font-size: 70rpx;
                  text-align: center;
                }
            }
            .useful-content{
                height: 488rpx;
                background-color: #FAFAFA;
                overflow-y: auto;
                .useful-content-xiaoxi{
                    height: 104rpx;
                    text-align: center;
                    line-height: 104rpx;
                    border-bottom: 1rpx solid #F3F3F3;
                }
            }
            /deep/.keyboard-tup{
                display: flex;
                align-items: center;
                padding: 0 50rpx;
                .uni-input-input{
                    background: #FFFFFF;
                    padding: 0 20rpx;
                }
                .plus-circle{
                    width: 56rpx;
                    height: 56rpx;
                    margin: 0 20rpx;
                }
                .useful{
                    width: 64rpx;
                    height: 64rpx;
                    color: #333333;
                }
                input{
                    width: 490rpx;
                    height: 80rpx;
                    box-sizing: border-box;
                    border-radius: 8px;
                }
                height: 115rpx;
                background-color: #F5F5F5;
            }
            .active-tup{
                height: 130rpx;
                padding: 50rpx 50rpx 70rpx !important;
            }
        }
    }
</style>

 

chatContent 組件

 

<template>
    <view class="word">
        <scroll-view :scroll-y="true" :show-scrollbar="true">
            <view class="" v-for="item in megList" :key="item.id">
                <!-- 收到的消息 -->
                <view class="other-people" v-if="!item.myMeg">
                    <image src="../../../../../static/images/workbench/1.png" mode=""></image>
                    <view class="meg">
                        {{item.message}}
                    </view>
                </view>
                <!-- 自己發出去的消息 -->
                <view class="my-message" v-else>
                    <view class="matter">
                        {{item.message}}
                    </view>
                    <image src="../../../../../static/images/workbench/head-portrait.png" mode=""></image>
                </view>
            </view>
        </scroll-view>
    </view>
</template>

<script>
    export default{
        data(){
            return{
                megList:[
                    {
                        myMeg: true, //是否是自己發的消息
                        message: '這是一條消息呀呀呀呀呀呀~',
                    },
                    {
                        myMeg: false, //是否是自己發的消息
                        message: '最近喜來登在招兼職生是嗎？我想了解下~',
                    },{
                        myMeg: true, //是否是自己發的消息
                        message: '這是一條消息呀呀呀呀呀呀~',
                    }
                ]
            }
        }
    }
</script>

<style lang="scss" scoped>
    .word{
        padding: 0 20rpx 160rpx;
        background: #efefef;
        .my-message{
            display: flex;
            justify-content: flex-end;
            margin-top: 30rpx;
            image{
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }
            .matter{
                background: #05BABF;
                padding: 25rpx;
                font-size: 32rpx;
                margin-right: 25rpx;
                color: #FFFFFF;
                border-top-left-radius: 20rpx;
                border-bottom-left-radius: 20rpx;
                border-bottom-right-radius: 20rpx;
            }
        }
        .other-people{
            display: flex;
            margin-top: 30rpx;
            image{
                width: 80rpx;
                height: 80rpx;
                border-radius: 50%;
            }
            .meg{
                width: 70%;
                font-size: 32rpx;
                color: #393939;
                margin-left: 25rpx;
                background: #FFFFFF;
                padding: 25rpx;
                border-top-right-radius: 20rpx;
                border-bottom-left-radius: 20rpx;
                border-bottom-right-radius: 20rpx;
            }
        }
    }
</style>