移动端开发评论模块的时候添加一些emoji表情-CSDN博客

本文链接：https://blog.csdn.net/qian_li_hui/article/details/116089565

本文介绍了如何在Vue项目中使用v-emoji-picker组件库来实现在评论模块中添加emoji表情的功能。首先通过npm安装组件，然后在组件中利用v-show指令控制emoji picker的显示和隐藏。在textarea中插入emoji并处理选中后的逻辑，展示了具体的Vue代码实现。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在做一个评论模块的时候，首先做一个遮罩层，在点击评论是显示，想在评论的内容添加一些emoji表情，在网上搜了一堆之后，发现最适合的还是v-emoji-picker组件库。
在这里插入图片描述
首先是下载该库npm install v-emoji-picker(我这边前端的依赖管理用的是npm)下载完成后，你可以选择在全局使用该组件，也可以在某个页面使用。
因为这个组件没有设置是否显示和隐藏的属性，所以我们可以使用vue的指令v-show 来使这个组件是否显示出来

   <div class="overlay-inputCommentPart" v-show="show==true">
                <tm-overlay :show="show" @click="show = false">
                <div class="wrapper"  @click="show = false"> 
                    <div class="inputCommentPart"  @click.stop>
                    <div class="inputCommentPart-contant" style="border-radius: 4px;margin-left:5px;width:70%;float:left;margin-top: 2px;min-height:40px;max-height:40px;">
                        <textarea style="font-size:14px;width:100%;min-height:40px;max-height:40px;line-height:20px"
                            id="input"
                            v-model="text"
                            placeholder="回复此评论">
                        </textarea>
                    </div>
                     <tm-button type="text" style="float:left;margin-top:7px;margin-left:5px;font-size:25px;height:40px;background-color:white;border:0px" size="mini" @click="showDialog = !showDialog">😃</tm-button>
                    <tm-button style="margin-top:5px;margin-left:5px;height:40px;width:15%;background-color:rgb(31, 158, 148);color: white;float:left">发送</tm-button>
                    <VEmojiPicker v-show="showDialog" @select="selectEmoji"/>
                </div>
              </div>
                <tm-form>
                  <VEmojiPicker v-show="showDialog" @select="selectEmoji"/>
                </tm-form>
            </tm-overlay>
         </div>

利用v-show="showDialog"来控制emoji组件的显示

单个页面使用时，需要注册组件

<script>
  import {VEmojiPicker} from 'v-emoji-picker'

  export default {
    components: {
      VEmojiPicker
    },
    data() {
      return {
        text: '',
        showDialog: false
      }
    },
    methods: {
      selectEmoji(emoji) {// 选择emoji后调用的函数
        let input = document.getElementById("input")
        let startPos = input.selectionStart
        let endPos = input.selectionEnd
        let resultText = input.value.substring(0, startPos) + emoji.data + input.value.substring(endPos)
        input.value = resultText
        input.focus()
        input.selectionStart = startPos + emoji.data.length
        input.selectionEnd = startPos + emoji.data.length
        this.text = resultText
      }
    }
  }
</script>