v-emoji-picker

V-Emoji-Picker

This simple package use Emojis Natives

Table of contents

• Installation
• Usage
• Demo

Installation

yarn add v-emoji-picker

Usage

<template>
  <div id="app">
    <VEmojiPicker :pack="pack" @select="selectEmoji" />
  </div>
</template>

<script>
import VEmojiPicker from 'v-emoji-picker';
import packData from 'v-emoji-picker/data/emojis.json';

export default {
  name: 'Demo',
  components: {
    VEmojiPicker
  },
  data: () => ({
    pack: packData
  }),
  methods: {
    selectEmoji(emoji) {
      console.log(emoji)
    }
  }
}
</script>

or Global

import Vue from "vue";
import App from "./App.vue";
import { VEmojiPicker } from 'v-emoji-picker';

Vue.config.productionTip = false;
Vue.use(VEmojiPicker);

new Vue({
  render: h => h(App)
}).$mount("#app");

Props

{
  pack: { type: Array, required: true },
  labelSearch: { type: String, default: 'Pesquisar...' },
  showCategory: { type: Boolean, default: true },
  emojisByRow: { type: Number, default: 5 },
  showSearch: { type: Boolean, default: () => true },
  continuousList: { type: Boolean, default: false }
}

Events

{
  select: 'Emit event on Selected Emoji',
  changeCategory: 'Emit event on Change Category'
}

Structure Emoji

Demo

Click here to view in Browser: Vue Component | Emojis | Simples Example

License