Vue表情包输入组件

地址

http://npm.taobao.org/package/emoji-mart-vue;

安装

npm install --save emoji-mart-vue

组件

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

<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>

以上就可以实现表情包功能拉 

 

喜欢上方小程序,需要源码的,添加博主微信私信小编.