克隆/下载
贡献代码
同步代码
取消
提示: 由于 Git 不支持空文件夾,创建文件夹后会生成空的 .keep 文件
Loading...
README
MIT

Emoji Popover

English | 中文

Emoji Popover 是原生 JavaScript 构建的表情选择弹窗. 示例

特性

  • 📦 brotli 压缩 <1kb
  • 💻 原生 JS, 没有任何依赖, 可用于任何框架
  • 🙅‍ 没有集成任何表情
  • ⚙️ 添加你的自定义表情,可以是系统表情、图片链接、或任何文本
  • 🎨 使用 CSS 变量定制任何样式
  • 🧩 使用插件扩展功能

浏览器支持

所有支持最新 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.jsstyle.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)
})

选项

button

  • 类型: string
  • 默认值: '.e-btn'
  • 是否必需: 不是, 如果你已经给 HTML 添加了 class e-btn
  • 描述:按钮选择器,单击此按钮弹出面板。

container

  • 类型: string
  • 默认值: 'body'
  • 是否必需: 不是
  • 描述:容器选择器,放置 Emoji Popover 的容器。

targetElement

  • 类型: string
  • 默认值: '.e-input'
  • 是否必需: 不是, 如果你已经给 HTML 添加了 class e-input
  • 描述:输入框,表情符号弹出框将出现在它下面。

emojiList

  • 类型: Array<object>
  • 默认值: []
  • 是否必需: 是的
  • 描述:表情列表。系统表情、图像链接或任何文本。

wrapClassName

  • 类型: string
  • 默认值: ''
  • 是否必需: 不是
  • 描述: Emoji Popover 自定义 class 名称。

wrapAnimationClassName

  • 类型: string
  • 默认值: 'anim-scale-in'
  • 是否必需: 不是
  • 描述: Emoji Popover 显示或收起时的动画 class 名称。

方法

onSelect

选择表情符号时触发传入的回调函数。

toggle

关闭或打开 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 */
}

使用你的 CSS

Emoji Popover 生成非常简单的 DOM 结构,你也可以使用自己的样式而不是导入 style.css

MIT License Copyright (c) 2021 GZ Permission is hereby granted, free of charge, to any person obtaining a copy of this software and associated documentation files (the "Software"), to deal in the Software without restriction, including without limitation the rights to use, copy, modify, merge, publish, distribute, sublicense, and/or sell copies of the Software, and to permit persons to whom the Software is furnished to do so, subject to the following conditions: The above copyright notice and this permission notice shall be included in all copies or substantial portions of the Software. THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

简介

🥳 使用 TypeScript 构建的表情选择弹窗插件 展开 收起
TypeScript 等 4 种语言
MIT
取消

发行版 (1)

全部

贡献者

全部

近期动态

不能加载更多了
马建仓 AI 助手
尝试更多
代码解读
代码找茬
代码优化