vue表情包

引入emoji-mart-vue-fast表情包

表情包在我们的生活中必不可少，那我我们如何使用vue引入表情包

这里我使用的是emoji-mart-vue-fast
github地址

• npm下载emoji-mart-vue-fast

  npm install emoji-mart-vue-fast

  下载完成后直接引入，完整代码

  <template>
    <div>
      <Picker :data="emojiIndex" set="twitter" @select="showEmoji"  class="picker"/>
      <span class="span">hello</span>
      <textarea v-model="helloData.content" style="float:right;"></textarea>
    </div>
  </template>
  
  <script>
  import { reactive, ref } from 'vue';
  import data from "emoji-mart-vue-fast/data/all.json";
  // Import default CSS
  import "emoji-mart-vue-fast/css/emoji-mart.css";
  import { Picker, EmojiIndex } from "emoji-mart-vue-fast/src";
  
  export default {
    name: "test",
  
    setup() {
      const helloData = reactive({
        content:''
      })
      const emojiIndex = new EmojiIndex(data);
      const emojisOutput = ref('');
  
      const showEmoji = (emoji) => {
        helloData.content += emoji.native;
      }
  
      return {
        emojiIndex,
        emojisOutput,
        showEmoji,
        helloData
      };
    },
  
    components: {
      Picker
    }
  };
  </script>
  
  <style>
  .picker{
    position:relative;
    z-index: 999;
    margin-top:100px;
  }
  .span{
    position:relative;
    z-index: 1;
  }
  </style>

  这里我是用的是vue3，vue2引入方式有所不同

  {2,4}

  // Vue 2:
  import { Picker, EmojiIndex } from "emoji-mart-vue-fast";
  // Vue 3, import components from `/src`:
  import { Picker, EmojiIndex } from "emoji-mart-vue-fast/src";