參考鏈接

JS操作文本域獲取光標(biāo)/指定位置插入
vue.js支持表情輸入
ttkwsd博客

效果圖

歡迎來到我的個(gè)人博客留言評(píng)論：www.pscool.fun

代碼

• 不能換行的bug已處理…

emoji.json

• 表情圖片放在public的emoji文件夾下面

• emoji.json放在src/components/EmojiText文件夾下，文件內(nèi)容如下：

  {
    "[酸了]" : "/emoji/suanle.png",
    "[捂臉]" : "/emoji/wulian.png",
    "[支持]" : "/emoji/zhichi.png",
    "[生氣]" : "/emoji/shengqi.png",
    "[捂眼]" : "/emoji/wuyan.png",
    "[難過]" : "/emoji/nanguo.png",
    "[無語]" : "/emoji/wuyu.png",
    "[偷笑]" : "/emoji/touxiao.png",
    "[tv_微笑]" : "/emoji/tvwx.png",
    "[嗑瓜子]" : "/emoji/kgz.png",
    "[原神_喝茶]" : "/emoji/hecha.png",
    "[笑]" : "/emoji/xiao.png",
    "[撇嘴]" : "/emoji/piezui.png",
    "[點(diǎn)贊]" : "/emoji/dianzan.png",
    "[干杯]" : "/emoji/ganbei.png",
    "[tv_斜眼笑]" : "/emoji/tvxyx.png",
    "[大笑]" : "/emoji/daxiao.png",
    "[擁抱]" : "/emoji/yongbao.png",
    "[歪嘴]" : "/emoji/waizui.png",
    "[星星眼]" : "/emoji/xxy.png",
    "[脫單doge]" : "/emoji/doge.png",
    "[再見]" : "/emoji/zaijian.png",
    "[熱]" : "/emoji/re.png",
    "[翻白眼]" : "/emoji/fanby.png",
    "[尷尬]" : "/emoji/ganga.png",
    "[笑哭]" : "/emoji/xiaoku.png",
    "[doge]" : "/emoji/doge.png",
    "[抱拳]" : "/emoji/baoquan.png",
    "[冷]" : "/emoji/leng.png",
    "[喜歡]" : "/emoji/xihuan.png",
    "[委屈]" : "/emoji/weiqu.png",
    "[疑惑]" : "/emoji/yihuo.png",
    "[原神_嗯]" : "/emoji/en.png",
    "[呲牙]" : "/emoji/ciya.png",
    "[調(diào)皮]" : "/emoji/tiaopi.png",
    "[疼]" : "/emoji/teng.png",
    "[生病]" : "/emoji/shengbing.png",
    "[嘟嘟]" : "/emoji/dudu.png",
    "[靈魂出竅]" : "/emoji/lhcq.png",
    "[噓聲]" : "/emoji/xusheng.png",
    "[哈欠]" : "/emoji/hqian.png",
    "[大哭]" : "/emoji/daku.png",
    "[原神_生氣]" : "/emoji/kqsq.png",
    "[微笑]" : "/emoji/simle.png",
    "[給心心]" : "/emoji/geixx.png",
    "[喜極而泣]" : "/emoji/xjeq.png",
    "[嫌棄]" : "/emoji/xianqi.png",
    "[原神_欸嘿]" : "/emoji/aihei.png",
    "[原神_哇]" : "/emoji/wa.png",
    "[加油]" : "/emoji/jiayou.png",
    "[摳鼻]" : "/emoji/koubi.png",
    "[滑稽]" : "/emoji/guaji.png",
    "[傲嬌]" : "/emoji/aojiao.png",
    "[嚇]" : "/emoji/xia.png",
    "[驚喜]" : "/emoji/jingxi.png",
    "[保佑]" : "/emoji/baoyou.png",
    "[愛心]" : "/emoji/aixin.png",
    "[驚訝]" : "/emoji/jingya.png",
    "[原神_哼]" : "/emoji/heng.png",
    "[抓狂]" : "/emoji/zhuakuang.png",
    "[打call]" : "/emoji/dacall.png",
    "[陰險(xiǎn)]" : "/emoji/yinxian.png",
    "[勝利]" : "/emoji/shengli.png",
    "[吐]" : "/emoji/tu.png",
    "[鼓掌]" : "/emoji/guzhang.png",
    "[臉紅]" : "/emoji/lianhong.png",
    "[墨鏡]" : "/emoji/mojing.png",
    "[OK]" : "/emoji/ok.png",
    "[辣眼睛]" : "/emoji/lyj.png",
    "[奮斗]" : "/emoji/fendou.png",
    "[妙啊]" : "/emoji/miaoa.png",
    "[呆]" : "/emoji/dai.png",
    "[囧]" : "/emoji/jiong.png",
    "[吃瓜]" : "/emoji/chigua.png",
    "[思考]" : "/emoji/sikao.png",
    "[哦呼]" : "/emoji/ohu.png"
  }
  

EmojiText.vue

里面默認(rèn)用了iconfont的字體，需要自行引入。文章來源地址http://www.zghlxwxcb.cn/news/detail-413714.html

<style lang="scss" scoped>
textarea {
    outline: none;
    border: none;
    background: #f1f2f3;
    resize: none;
    border-radius: 8px;
    padding: 10px 10px;
    font-size: 16px;
    color: #333333;
    border: 1px solid transparent;
}
img {
    -webkit-user-drag: none;
}

.avatar {
    width: 40px;
    height: 40px;
    object-fit: cover;
}

.height80 {
    height: 80px !important;
}

.height80 textarea {
    border: 1px solid #49b1f5;
}

@keyframes scaleUp {
    0% {
        opacity: 0;
        transform: scale(0)
    }
    100% {
        opacity: 1;
        transform: scale(1)
    }
}

.scaleUp {
    animation: scaleUp 0.3s;
    transform-origin: 0 0;
}

.comment-area {
    display: flex;
    align-items: flex-start;

    color: #90949e;

    .comment-avatar {
        width: 48px;
        height: 48px;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 8px;

        i {
            font-size: 40px;
            border: 1px solid #c4c4c4;
            border-radius: 50%;

        }
    }

    .comment-right {
        flex: 1;
        display: flex;
        height: 60px;
        transition: height 0.5s;

        position: relative;

        .edit-area {
            flex: 1;
        }

        .comment-btn {
            background-color: #49b1f5;
            cursor: pointer;
            width: 64px;
            border-radius: 8px;
            margin-left: 8px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fff;
        }

        .comment-tips {
            position: absolute;
            bottom: -28px;
            height: 24px;
            width: calc(100% - 72px);
            margin-right: 72px;
            display: flex;
            align-items: center;

            &>span:first-child {
                width: 20px;
                height: 20px;
                cursor: pointer;
                display: flex;
                align-items: center;
                justify-content: center;

                &.active {
                    color: #49b1f5;
                }

            }


            .emoji-wrapper {
                user-select: none;
                position: absolute;
                bottom: 0;
                top: 28px;
                left: 0;
                display: flex;
                flex-wrap: wrap;
                width: 294px;
                height: 146px;
                overflow-y: auto;
                background-color: #fff;
                padding: 5px;
                border-radius: 6px;
                border-radius: 6px;
                box-shadow: 0 3px 6px 0 rgb(0 0 0 / 12%);
                border: 1px solid rgba(0, 0, 0, .06);

                &::before {
                    content: '';
                    position: absolute;
                }

                span.emoji {
                    width: 30px;
                    height: 30px;
                    display: block;
                    margin: 2px;
                    cursor: pointer;
                    padding: 3px;
                    border-radius: 6px;

                    img {
                        width: 100%;
                        height: 100%;
                    }

                    transition: all 0.28s;

                    &:hover {
                        background-color: #dddddd;
                    }
                }
            }

            .triangle {
                content: '';
                position: absolute;
                width: 8px;
                height: 8px;
                top: 25px;
                left: 8px;
                background-color: white;
                border: 1px solid #f0f0f0;
                transform: rotate(45deg);
                border-right-color: transparent;
                border-bottom-color: transparent;
            }
        }
    }

}
</style>

<template>
    <div class="comment-area">

        <!-- 左側(cè)的頭像 -->
        <div class="comment-avatar">
            <img v-if="avatarUrl" :src="avatarUrl" alt="">
            <i v-else class="iconfont icon-touxiang"></i>
        </div>

        <!-- 文本框 和 評(píng)論按鈕 -->
        <div :class="['comment-right', { height80: height80 }]">

            <!-- 文本框 -->
            <textarea ref="textarea" v-model="textareaContent" @focus="height80 = true" @blur="doBlur"
                :placeholder="placeholder" class="edit-area">
            </textarea>

            <!-- 評(píng)論按鈕 -->
            <div class="comment-btn" @click="postComment">評(píng)論</div>

            <!-- 表情面板 -->
            <div class="comment-tips">

                <!-- 觸發(fā)表情icon -->
                <span @click="activeEmojiPanel($event, true)"
                    :class="['iconfont icon-biaoqing', { active: emojiPanelActive }]">
                </span>

                <!-- 待選擇的表情列表 -->
                <div v-show="emojiPanelActive">
                    <div class="emoji-wrapper scaleUp" @click="activeEmojiPanel">
                        <span @click="addEmoji(emoji)" class="emoji" v-for="emoji, idx in emojiList" :key="idx">
                            <img :src="emoji.link" alt="">
                        </span>
                    </div>
                    
                </div>

                <!-- 三角形 -->
                <div v-show="emojiPanelActive" class="triangle"></div>
            </div>
        </div>
    </div>
</template>

<script>

/* 表情配置數(shù)據(jù) 轉(zhuǎn)為 數(shù)組 */
import emojiConfig from './emoji.json'
let emojiList = []
for (let key in emojiConfig) {
    emojiList.push({
        title: key,
        link: emojiConfig[key]
    })
}

export default {
    name: 'EmojiText',
    props: {
        imgPrefix: { /* 圖片路徑前綴 */
            type:String,
            default:''
        },
        placeholder: { /* 默認(rèn)占位符 */
            type:String,
            default: '快快來發(fā)表你的觀點(diǎn)吧~~'
        },
        avatarUrl: { /* 頭像 */
            type:String
        },
        emojiSize:{
            type:Number,
            default: null
        },
        afterComment: {  /* 發(fā)表評(píng)論之后，需要執(zhí)行的函數(shù) */
            type: Function
        }
    },
    data() {
        return {

            /* 文本框中有文字 或 無文字但是處于焦點(diǎn)狀態(tài)時(shí) 為true */
            height80: false,

            /* 表情配置數(shù)據(jù) */
            emojiList,

            /* 是否打開表情面板 */
            emojiPanelActive: false,

            /* 文本框的內(nèi)容 */
            textareaContent: '',
        }
    },
    mounted() {
        let _this = this
        document.addEventListener('click', function (e) { /* 點(diǎn)擊其它地方, 關(guān)閉表情面板;點(diǎn)擊表情面板時(shí),需要阻止事件冒泡 */
            _this.emojiPanelActive = false
        })
    },
    methods: {

        /* 添加表情 */
        addEmoji(emoji) {
            let textarea = this.$refs['textarea'];

            console.log(textarea.selectionStart, textarea.selectionEnd, 'start,end');

            // 最開始的位置要記錄下，后面要根據(jù)它來設(shè)置插入文本后，設(shè)置光標(biāo)的位置
            let selectionStart1 = textarea.selectionStart

            let txtArr = this.textareaContent.split('')
            txtArr.splice(textarea.selectionStart, textarea.selectionEnd - textarea.selectionStart, emoji.title)
            this.textareaContent = txtArr.join('')

            /* 一定要放在$nextTick去執(zhí)行, 上面修改完值后, 還要等vue把修改的數(shù)據(jù)渲染出來之后, 再去定位光標(biāo) */
            this.$nextTick(() => {
                // 替換文本后, 需要把光標(biāo)，再次定位到替換后的那個(gè)位置，否則，它會(huì)回到最前面
                textarea.focus()
                textarea.setSelectionRange(selectionStart1 + emoji.title.length, selectionStart1 + emoji.title.length)
            })
        },

        /* 激活表情面板, 第二個(gè)參數(shù): 是否切換 */
        activeEmojiPanel(e, isToggle) {
            if (isToggle) {
                this.emojiPanelActive = !this.emojiPanelActive
            } else {
                this.emojiPanelActive = true
            }
            e.stopPropagation() /* 阻止事件冒泡 */
        },

        /* 文本域失去焦點(diǎn)時(shí) */
        doBlur() {
            if (this.textareaContent.length > 0) {
                this.height80 = true
            } else {
                this.height80 = false
            }
        },

        /* 發(fā)表評(píng)論 */
        postComment() {

            if(!this.textareaContent) {
                return
            }

            let _this = this

			/* 處理換行, 雖然解決了, 但是不知道為什么在文本域里面按enter和手動(dòng)輸入\n有啥區(qū)別?
               哦懂了, \n在正則里面就是表示的換行這一個(gè)字符, 手動(dòng)輸入的\n其實(shí)是2個(gè)字符, 按enter輸入的其實(shí)是一個(gè)字符（雖然它看上去是2個(gè)字符）,
               我們程序員習(xí)慣了\n表示換行這個(gè)字符(但這只是在開發(fā)工具里面支持的寫法),
               如果把下面改成 /\\n/ 去替換那就可以匹配到手動(dòng)輸入的\n這2個(gè)字符
            */
            // console.log(this.textareaContent,'textareaContent');
            let result = this.textareaContent.replace(/\n/g, function (str) {
                console.log('檢測到str:' + str);
                return "<br/>"
            })
            // console.log(result,'result');

            /* 處理表情 */
            /* 這個(gè)replace函數(shù), 第一個(gè)參數(shù)是正則表達(dá)式, 他回去匹配文本；第二個(gè)參數(shù)是將匹配的文本傳入進(jìn)行處理的函數(shù)，函數(shù)的返回值將會(huì)替換匹配的文本 */
            result = result.replace(/\[.*?]/g, function (str) {
                if(_this.emojiSize) {
                    return `<img src="${_this.imgPrefix}${emojiConfig[str]}"  style="width:${_this.emojiSize}px;height:${_this.emojiSize}"/>`;
                } else {
                    return `<img src="${_this.imgPrefix}${emojiConfig[str]}" />`;
                }
            })

            this.$emit('comment',result)

            this.textareaContent = ''
            this.doBlur()
            this.afterComment && this.afterComment
        }
    },
}
</script>

使用

<!-- 1. 監(jiān)聽comment事件
	 2. 表情圖的大小，單位：像素 -->
<emoji-text @comment="comment" :emojiSize="20"></emoji-text>

到了這里，關(guān)于vue.js表情文本輸入框組件的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！