Fetch the repository succeeded.
English | 中文
Vanilla JavaScript Emoji Popover. DEMO
Emoji Popover is supported on all modern browsers supporting the latest JavaScript features. Internet Explorer 11 +.
If you are using a package manager like yarn or npm, you can install emoji-popover directly from the npm:
npm i emoji-popover
<input class="e-input" type="text" />
<button class="e-btn">Choose Emoji</button>
import EmojiPopover from 'emoji-popover'
import '/node_modules/emoji-popover/dist/style.css'
const e1 = new EmojiPopover({
button: '.e-btn',
container: 'body',
targetElement: '.e-input',
emojiList: [
{
value: '🤣',
label: 'laugh and cry',
},
{
value: 'https://xxx.png',
label: ''
},
{
value: '(°∀°)ﾉ',
label: '',
},
],
})
e1.onSelect(value => {
console.log(value)
})
If you don't use NPM or Yarn, click here
to download emoji-popover.iife.js and style.css.
<link rel="stylesheet" href="xxx/style.css" />
<script src="xxx/emoji-popover.iife.js"></script>
const e1 = new EmojiPopover({
button: '.e-btn',
container: 'body',
targetElement: '.e-input',
emojiList: [
{
value: '🤣',
label: 'laugh and cry'
},
{
value: 'https://xxx.png',
label: ''
},
{
value: '(°∀°)ﾉ',
label: ''
}
]
})
e1.onSelect(value => {
console.log(value)
})
e-btn in HTML.e-input in HTML.Trigger callback function when selecting an emoji.
Turn off or on Emoji Popover. It receives a parameter of type Boolean, if the parameter is true, Emoji Popover will be turned on, if false, Emoji Popover will be turned off.
You can override these CSS variables to customize the style.
:root {
--e-color-border: #e1e1e1; /* EmojiPopover border color */
--e-color-emoji-text: #666; /* text emoji font color */
--e-color-border-emoji-hover: #e1e1e1; /* emoji hover border color */
--e-color-bg: #fff; /* EmojiPopover background color */
--e-bg-emoji-hover: #f8f8f8; /* emoji hover background color */
--e-size-emoji-text: 16px; /* text emoji font size */
--e-width-emoji-img: 20px; /* image emoji width */
--e-height-emoji-img: 20px; /* image emoji height */
--e-max-width: 288px; /* EmojiPopover max width */
}
If there are multiple instances, you can apply them to the specified instance through the CSS variable scope.
.<custom-class-name> {
--e-color-border: #e1e1e1; /* EmojiPopover border color */
--e-color-emoji-text: #666; /* text emoji font color */
--e-color-border-emoji-hover: #e1e1e1; /* emoji hover border color */
--e-color-bg: #fff; /* EmojiPopover background color */
--e-bg-emoji-hover: #f8f8f8; /* emoji hover background color */
--e-size-emoji-text: 16px; /* text emoji font size */
--e-width-emoji-img: 20px; /* image emoji width */
--e-height-emoji-img: 20px; /* image emoji height */
--e-max-width: 288px; /* EmojiPopover max width */
}
Emoji Popover generates a very simple DOM structure. You can also use your own style instead of importing style.css.
此处可能存在不合适展示的内容，页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容，可点击提交进行申诉，我们将尽快为您处理。