2022-08-28 18:35:29 +08:00
|
|
|
# emoji
|
|
|
|
|
Emoji 表情组件
|
2022-08-29 15:51:05 +08:00
|
|
|
|
2022-08-29 16:40:49 +08:00
|
|
|
- [x] 流畅的动画效果
|
|
|
|
|
- [x] 精确插入光标位置
|
|
|
|
|
- [x] 使用 Esc 快捷键关闭弹出
|
|
|
|
|
- [x] 提供回调函数以便于拓展操作
|
|
|
|
|
- [x] 调用时才初始化以兼容服务端渲染项目
|
2022-08-31 13:37:33 +08:00
|
|
|
- [x] 动态插入调用支持
|
2022-08-29 15:51:05 +08:00
|
|
|
|
|
|
|
|
### DEMO
|
|
|
|
|
|
2023-10-06 06:26:59 +08:00
|
|
|
|
2022-08-29 16:31:10 +08:00
|
|
|
|
2022-08-29 16:40:49 +08:00
|
|
|
[Click to open demo](https://emoji.satori.love)
|
2022-08-29 15:51:05 +08:00
|
|
|
|
|
|
|
|
|
|
|
|
|
### Install
|
|
|
|
|
|
|
|
|
|
```bash
|
2022-08-29 16:14:58 +08:00
|
|
|
npm install satori-emoji --save
|
2022-08-29 15:51:05 +08:00
|
|
|
```
|
|
|
|
|
|
|
|
|
|
```javascript
|
2022-08-29 16:14:58 +08:00
|
|
|
import Emoji from 'satori-emoji'
|
2022-08-29 15:51:05 +08:00
|
|
|
|
|
|
|
|
const emoji = new Emoji({
|
|
|
|
|
input: document.querySelector('#input') , // 绑定的输入框元素(非必选)
|
|
|
|
|
button: document.querySelector('#button'), // 绑定的开关按钮(非必选)
|
|
|
|
|
callback: (data) => console.log('cilck:', data), // 选中 emoji 表情的回调函数(非必选)
|
|
|
|
|
})
|
|
|
|
|
|
|
|
|
|
// 打开 emoji 表情选择窗口
|
|
|
|
|
emoji.show()
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
// 关闭 emoji 表情选择窗口
|
|
|
|
|
emoji.hide()
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
### Dev
|
|
|
|
|
|
|
|
|
|
```bash
|
|
|
|
|
# clone
|
|
|
|
|
git clone git@github.com:InvisibleFuture/emoji.git
|
|
|
|
|
cd emoji
|
|
|
|
|
|
|
|
|
|
# install
|
|
|
|
|
npm install
|
|
|
|
|
npm run dev
|
|
|
|
|
|
|
|
|
|
# build
|
|
|
|
|
npm run build
|
|
|
|
|
npm preview
|
|
|
|
|
|
|
|
|
|
```
|
