网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
这是一款纯JS Emoji表情选择器,用户可以从Emoji分类选择器弹出窗口中快速搜索选择Emoji表情。提供了一个最近使用的选项卡,显示最近选择的表情符号。支持原生表情符号和Tweemoji库。
使用方法:
1.安装并下载。
# Yarn
$ yarn add @joeattardi/emoji-button
# NPM
$ npm i @joeattardi/emoji-button –save
2.将Emoji Button导入文档。
// ES6 module
import { EmojiButton } from '@joeattardi/emoji-button';
3.在输入字段旁边创建一个Emoji Button。
<input type="text">
<button id="emoji-button">?</button>
4.将Emoji Button选择器附加到输入字段。
window.addEventListener('DOMContentLoaded', () => {
const button = document.querySelector('#emoji-button');
const picker = new EmojiButton();
picker.on('emoji', emoji => {
document.querySelector('input').value += emoji;
});
button.addEventListener('click', () => {
picker.pickerVisible ? picker.hidePicker() : picker.showPicker(button);
});
});
5.使用以下选项自定义emoji选择器。
const picker = new EmojiButton({
// position of the emoji picker. Available positions:
// auto-start, auto-end, top, top-start, top-end, right, right-start, right-end, bottom, bottom-start, bottom-end, left, left-start, left-end
position: auto,
// 1.0, 2.0, 3,0, 4.0, 5.0, 11.0, 12.0, 12.1
emojiVersion: '12.1',
// root element
rootElement: document.body,
// enable animation
showAnimation: true,
// auto close the emoji picker after selection
autoHide: true,
// auto move focus to search field or not
autoFocusSearch: true,
// show the emoji preview
showPreview: true,
// show the emoji search input
showSearch: true,
// show recent emoji
showRecents: true,
// number of recent emoji
recentsCount: 10
// show skin tone variants
showVariants: true,
// show category buttons
showCategoryButtons: true,
// or 'twemoji'
style: 'native',
twemojiOptions: {
ext: '.svg',
folder: 'svg'
},
// 'light', 'drak', or 'auto'
theme: 'light',
// number of emojis per row
emojisPerRow: 5,
// number of rows
rows: 5,
// emoji size
emojiSize: '64px',
// maximum number of recent emojis to save
recentsCount: 50,
// initial category
initialCategory: 'recents',
// z-index property
zIndex: 999,
// an array of the categories to show
categories: [
'smileys',
'people',
'animals',
'food',
'activities',
'travel',
'objects',
'symbols',
'flags'
],
// custom emoji
custom: [
{
name: 'Conga parrot',
emoji: './site/static/conga_parrot.gif'
},
{
name: 'O RLY?',
emoji: './site/static/orly.jpg'
}
],
// custom icons
icons: {
search: '/search.svg',
clearSearch: '/close.svg',
notFound: '/nofound.svg'
},
// i18n
i18n: {
search: 'Search',
categories: {
recents: 'Recently Used',
smileys: 'Smileys & People',
animals: 'Animals & Nature',
food: 'Food & Drink',
activities: 'Activities',
travel: 'Travel & Places',
objects: 'Objects',
symbols: 'Symbols',
flags: 'Flags'
},
notFound: 'No emojis found'
}
});
6.API方法
// shows the emoji picker
picker.showPicker(Element);
// hides the emoji picker
picker.hidePicker();
// checks if is visible
picker.isPickerVisible();
// toggles the emoji picker
togglePicker(Element);
7.选取表情符号时触发事件。
// shows the emoji picker
picker.on('emoji', function(){
// do something
})
8.当表情符号选取器隐藏时触发事件。
picker.on('hidden', function(){
// do something
})
转载请注明来源:原生JS Emoji表情选择器插件
本文永久链接地址:https://www.moyouyouw.cn/code/765.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
已有 位小伙伴发表了看法
欢迎 你 发表评论