直接上代码，懒得讲了

emoji表情图片大全需要什么自己可以复制过来使用
https://www.emojidaquan.com/
http://www.fhdq.net/emoji/emojifuhao.html

先看效果

 

 

 

 

 

 

 

 html代码

 

 

 

<template>
    <!-- 聊天 -->
    <view class="consult">
        <!-- 卡片 -->
        <!-- <post-card></post-card> -->
        <!-- 聊天记录 -->
        <!-- <chat-content></chat-content> -->
        <!-- 键盘 -->
        <view :class="['keyboard',useful_flag?'keyboard-active':'']">
            <view class="keyboard-tup">
                <input v-model="value" :focus="cursor" :cursor="resStart" @blur="cursorss" @confirm="startSearch"/>
                <image @click="openUseful(1)" class="plus-circle" src="../../../static/images/campus-plaza-img/face.png" mode=""></image>
                <view class="useful" @click="openUseful(2)">
                    常用语
                </view>
            </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>
    export default {
        data() {
            return{
                show: false,
                cursor: false, //是否聚焦
                value:'',
                resStart:0, //input光标位置
                useful_flag: false, //控制动画效果
                useful_expression: 2, //2默认表情,1常用语
                emojis:[
                    {emoji:'