Bootstrap

vue实现表情包

vue 引入 emoji 表情包

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

template 应用

import { Picker } from "emoji-mart-vue"; //引入组件
 
components: { //注册组件,不能全局挂载
    Picker
  }

直接丢在输入框上边就行

	<input type="text" v-model="content" />
    <picker
      :include="['people', 'Smileys']"
      :showSearch="false"
      :showPreview="false"
      :showCategories="false"
      @select="addEmoji"
    />

完整代码

<template>
  <div>
    <input type="text" v-model="content" />
    <picker
      :include="['people', 'Smileys']"
      :showSearch="false"
      :showPreview="false"
      :showCategories="false"
      @select="addEmoji"
    />
  </div>
</template>

<script>
import { Picker } from "emoji-mart-vue"; //引入组件
export default {
  name: "HelloWorld",
  components: {
    //注册组件,不能全局挂载
    Picker,
  },
  data() {
    return {
      content: "",
    };
  },
  methods: {
    addEmoji(e) {
      this.content += e.native;
    },
  },
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
/* 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;
}
</style>

效果图

在这里插入图片描述

;