Vue表情包输入组件

1 安装

1	npm i emoji-mart-vue -s

2 使用

示例一

需要注意的细节：

获取光标位置
插入完成后的光标位置，vue的v-model渲染会有一个过程，需要加一个延时再去计算移动光标位置

<template>
  <div>
    <textarea id="textarea" v-model="content" />
    <div class="face">
      <Picker  @select="showEmoji" :i18n="I18N" />
    </div>
  </div>
</template>

<script>
import { Picker } from "emoji-mart-vue";

const I18N = {
  search: '搜索',
  notfound: 'No Emoji Found',
  categories: {
    search: '搜索结果',
    recent: '经常使用',
    smileys: '表情与情感',
    people: '人物与身体',
    nature: '动物与自然',
    foods: '食物与饮料',
    activity: '活动',
    places: '旅行与地理',
    objects: '物品',
    symbols: '符号标志',
    flags: '旗帜',
    custom: 'Custom',
  },
}

export default {
  name: 'App',
  components: {
    Picker
  },
  data() {
    return {
      content: '',
      I18N: I18N

    }
  },
  methods: {
    // 选择表情
    showEmoji(emoji) {
      const str = emoji.native
      var oText = document.getElementById('textarea')
      var index = this.getCursortPosition(oText)
      this.$nextTick( () => {
        this.insert(oText,str,index)
      })
    },

    // 插入表情
    insert (oText,varstr,index) {
      var text = this.content
      let startStr = text.substring(0, index)
      let endStr = text.substring(index, text.length)
      this.content = startStr + varstr + endStr
      setTimeout(() => {
        this.setCaretPosition(oText, index+2)
      }, 10);
    },

    // 获取光标位置
    getCursortPosition (obj) {
      var cursorIndex = 0
      if (document.selection) {
        obj.focus()
        var range = document.selection.createRange()
        range.moveStart('character', -obj.value.length)
        cursorIndex = range.text.length
      } else if (obj.selectionStart || obj.selectionStart == 0) {
        cursorIndex = obj.selectionStart
      }
      return cursorIndex
    },

    // 设置光标位置
    setCaretPosition(ctrl, pos){
      if(ctrl.setSelectionRange)
      {
        ctrl.focus();
        ctrl.setSelectionRange(pos,pos);
      }
      else if (ctrl.createTextRange) {
        var range = ctrl.createTextRange();
        range.collapse(true);
        range.moveEnd('character', pos);
        range.moveStart('character', pos);
        range.select();
      }
    },
  }
}
</script>

<style>
textarea{
  width: 100%;
  height: 200px;
  padding: 10px;
  line-height: 24px;
}
</style>

示例二

<template>
  <div class="container">
    <!-- 
    search: 'Search Results',
    recent: 'Frequently Used',
    people: 'Smileys & People',
    nature: 'Animals & Nature',
    foods: 'Food & Drink',
    activity: 'Activity',
    places: 'Travel & Places',
    objects: 'Objects',
    symbols: 'Symbols',
    flags: 'Flags',
    custom: 'Custom',-->
    <textarea name="emoji" v-model="content" cols="30" rows="10"></textarea>
    <picker
      :include="['people']"  //添加自己需要的表情类型
      :showSearch="false"    //搜索框显示
      :showPreview="false" 
      :showCategories="false"
      @select="addEmoji"
    />
  </div>
</template>
<script>
import { Picker } from "emoji-mart-vue";
export default {
  data() {
    return {
      content: ""
    };
  },
  methods: {
    addEmoji(e) {
      this.content += e.native;
    }
  },
  created() {},
  mounted() {},
  components: {
    Picker
  }
};
</script>
<style scoped>
.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;
}
.text {
  display: block;
  margin: 0 auto;
  margin-bottom: 10px;
  width: 400px;
  resize: none;
  box-sizing: border-box;
  padding: 5px 10px;
  border-radius: 8px;
}
.text-place {
  height: 80px;
  box-sizing: border-box;
  padding: 5px 10px;
  border-radius: 8px;
  background: #ddd5d5;
}
.text-place p {
  display: flex;
  align-items: center;
  margin: 0;
}
</style>