vue输入框添加表情

最新推荐文章于 2024-07-15 18:08:10 发布

weixin_48746165

最新推荐文章于 2024-07-15 18:08:10 发布

阅读量2.1k

点赞数 5

文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/weixin_48746165/article/details/126287585

版权

1、下载组件

npm install --save emoji-mart-vue

2、引用组件

import { Picker } from "emoji-mart-vue"; //引入组件

components: { //注册组件，不能全局挂载

    Picker

  }

3、使用

<el-input  id="emojiInput" 
          v-model="content"
          type="textarea"
          :autosize="{ minRows: 8, maxRows: 20 }"
          style="width: 550px"
          size="mini"
          placeholder="请输入内容"
        ></el-input>
//丢在输入框边

<picker :include="['people','Smileys']" :showSearch="false" :showPreview="false" :showCategories="false" @select="addEmoji" />

4、输入变量+表情包

js
 addEmoji(e) {
      var elInput = document.getElementById('emojiInput'); //根据id选择器选中对象
      var startPos = elInput.selectionStart;// input 第0个字符到选中的字符
      var endPos = elInput.selectionEnd;// 选中的字符到最后的字符
      if (startPos === undefined || endPos === undefined) return
      var txt = elInput.value;
      // 将表情添加到选中的光标位置
      var result = txt.substring(0, startPos) + e.native + txt.substring(endPos)
      elInput.value = result;// 赋值给input的value
       // 重新定义光标位置
      elInput.focus();
      elInput.selectionStart = startPos + e.native.length;
      elInput.selectionEnd = startPos + e.native.length;
      this.content  = result// 赋值给表单中的的字段
    },

5、最后是 css 消除文字

.emoji-mart[data-v-7bc71df8] {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 420px;
  color: #ffffff !important;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;
}

效果