h5输入框新增表情

1.下载相关表情包放入本地

2.定义表情包对应数组

3.表情包左右轮播代码

<!-- 抽屉栏 -->
        <view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
            <swiper class="emoji-swiper" :class="{ hidden: hideEmoji }" indicator-dots="true" duration="150">
                <swiper-item v-for="(page, pid) in emojiList" :key="pid">
                    <view v-for="(em, eid) in page" :key="eid" @tap="addEmoji(em)"><image mode="widthFix" :src="'/static/images/emoji/' + em.url"></image></view>
                </swiper-item>
            </swiper>
            <view class="more-layer" :class="{ hidden: hideMore }">
                <view class="list">
                    <view class="box" @tap="chooseImage"><view class="icon tupian2"></view></view>
                    <view class="box" @tap="camera"><view class="icon paizhao"></view></view>
                    <view class="box" @tap="handRedEnvelopes"><view class="icon hongbao"></view></view>
                </view>
            </view>
        </view>

抽屉动画效果 translate3d(0, -42vw, 0);
4.替换表情包为图片 发送数据至后台 前后端使用富文本类型接收和展示

        replaceEmoji(str) {
            let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g, (item, index) => {
                console.log('item: ' + item);
                for (let i = 0; i < this.emojiList.length; i++) {
                    let row = this.emojiList[i];
                    for (let j = 0; j < row.length; j++) {
                        let EM = row[j];
                        if (EM.alt == item) {
                            //在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径
                            //比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
                            let onlinePath = 'http://hxng.yunmell.com/assets/img/emoji/';
                            // let imgstr = '<img src="'+onlinePath+EM.url+'">';
                            let imgstr = EM.url+ '/';
                            console.log('imgstr: ' + imgstr);
                            return imgstr;
                        }
                    }
                }
            });
            console.log(replacedStr)
            return '<div style="display: flex;align-items: center;word-wrap:break-word;">' + replacedStr + '</div>';

最终效果

完整代码：http://139.9.39.65:9898/yjl23332/luntan.git