⭐️ vue项目使用微信表情；vue引入微信表情emoji；vue中使用微信表情包emoji；

以下的表情是通过引入emoji-vue插件做的；如果只是简单的显示个别表情，其实还可以用html的emoji的标签来完成

♍️❗️

微信表情包github地址

1.下载微信表情包emoji-vue

npm i emoji-vue --save

2.解决原有项目的连续输入表情，表情自动在开头的bug：

只需要将下载的包下的 emoji-vue/src/VueEmoji.vue文件下，这个监听赋值给注释掉就可以了：

至于为什么修改这个bug，看下面两张图（第一张没修改前，连续输入表情，会发现表情总是在内容首位；图二是修改后的。）

3.引入使用（代码可直接复制）

<template>
  <div class="far_box">
    <p>
      <a href="https://github.com/shershen08/emoji-vue">引入github的表情项目包</a>
    </p>
    <div>显示内容：{{ myText }}</div>
    
    <VueEmoji ref="emoji" :value="myText" @input="onInput" />
    <button @click="clearTextarea">clear</button>
    
  </div>
</template>

<script>
import VueEmoji from 'emoji-vue'
export default {
  components: {
    VueEmoji
  },
  data () {
    return {
      myText: '微信表情'
    }
  },
  methods: {
    onInput (event) {
      console.log(event)
      this.myText = event.data
      // event.data contains the value of the textarea
    },
    clearTextarea () {
      this.$refs.emoji.clear()
      this.myText = ''
    }
  }
}
</script>

<style lang="less" scope>
.far_box {
  height: 100vh; //扩大盒子高度--这样在点击表情外的地方时候 触发失焦 关闭表情盒子
  text-align: left;
}
</style>

有用点个 ⭐️