1.0.5 • Published 7 years ago
vue-emoji-mart v1.0.5
Installation
npm install --save vue-emoji-mart
Components
Picker
<template>
<div>
<Picker
:emoji-size="emojiSize"
:per-line="perLine"
:skins="skin"
:native="native"
:set="set"
:auto-focus="autoFocus"
:include="include"
:exclude="exclude"
:onItemClick="insertSymbol"
/>
</div>
</template>
<script>
import 'vue-emoji-mart/css/emoji-mart.css'
import { Picker } from 'vue-emoji-mart'
export default {
data () {
return {
emojiSize: 24,
perLine: 9,
skin: 1,
native: true,
set: 'apple',
hidden: false,
currentEmoji: { id: '+1' },
autoFocus: false,
include: [],
exclude: [],
}
},
methods: {
insertSymbol (emoji) {
console.log(emoji)
}
}
}
</script>| Prop | Required | Default | Description |
|---|---|---|---|
| autoFocus | false | Auto focus the search input when mounted | |
| color | #ae65c5 | The top bar anchors select and hover color | |
| emoji | department_store | The emoji shown when no emojis are hovered, set to an empty string to show nothing | |
| include | [] | Only load included categories. Accepts I18n categories keys. Order will be respected, except for the recent category which will always be the first. | |
| exclude | [] | Don't load excluded categories. Accepts I18n categories keys. | |
| custom | [] | Custom emojis | |
| emojiSize | 24 | The emoji width and height | |
| onClick | Params: (emoji, event) => {} | ||
| perLine | 9 | Number of emojis per line. While there’s no minimum or maximum, this will affect the picker’s width. This will set Frequently Used length as well (perLine * 4) | |
| i18n | {…} | An object containing localized strings | |
| native | false | Renders the native unicode emoji | |
| set | apple | The emoji set: 'apple', 'google', 'twitter', 'emojione', 'messenger', 'facebook' | |
| sheetSize | 64 | The emoji sheet size: 16, 20, 32, 64 | |
| backgroundImageFn | ((set, sheetSize) => …) | A Fn that returns that image sheet to use for emojis. Useful for avoiding a request if you have the sheet locally. | |
| emojisToShowFilter | ((emoji) => true) | A Fn to choose whether an emoji should be displayed or not | |
| skin | 1 | Default skin color: 1, 2, 3, 4, 5, 6 | |
| style | Inline styles applied to the root element. Useful for positioning | ||
| title | Emoji Mart™ | The title shown when no emojis are hovered |
I18n
search: 'Search',
notfound: 'No Emoji Found',
categories: {
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',
}Development
$ yarn run build:data
$ yarn start
$ open example/index.html🎩 Hat tips!
Powered by iamcal/emoji-data and inspired by iamcal/js-emoji. 🙌🏼 Cal Henderson.