vue 引入 emoji 表情包

//npm下载
npm install --save emoji-mart-vue

  

 // template 应用

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

components: { //注册组件,不能全局挂载
    Picker
  }

  // 直接丢在输入框上边就行

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

  

// 输入框的变量 + 表情包文字

addEmoji(e){
      this.content += e.native;
    },

  

//最后是 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;
}

  

//效果图

 

posted @ 2022-01-13 14:20  薛定谔_猫  阅读(5083)  评论(0)    收藏  举报