代码拉取完成,页面将自动刷新
English | 中文
Emoji Popover 是原生 JavaScript 构建的表情选择弹窗. 示例
所有支持最新 JavaScript 功能的现代浏览器都支持 Emoji Popover。Internet Explorer 11 +。
如果你使用的是 yarn 或 npm 之类的包管理器,则可以直接从 npm 安装 emoji-popover:
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)
})
如果你没有使用 NPM 或者 Yarn, 点击 这里 下载 emoji-popover.iife.js
和 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
。e-input
。选择表情符号时触发传入的回调函数。
关闭或打开 Emoji Popover。它接收一个 Boolean 类型的参数,如果参数为 true,Emoji Popover 将被打开。反之,则关闭。
你可以重写这些 CSS 变量(CSS 自定义属性)来定制样式。
: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 */
}
如果有多个实例,你可以通过 css 变量作用域应用到指定实例。
.<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 生成非常简单的 DOM 结构,你也可以使用自己的样式而不是导入 style.css
。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。