3.0.8 • Published 5 years ago
italent-emoji v3.0.8
italent 表情组件
示例 1-使用默认表情
内置表情使用了动态 import(), 所以在项目构建的时候请保证构建工具支持通过 import('xxx')导入模块
npm install italent-emoji --save
import React from "react";
import { render } from "react-dom";
import styled from "styled-components";
import Emoji from "../../src/italent-emoji";
const abs = `position:absolute`;
const EmojiLeftTop = styled.div`
${abs};
left: 20px;
top: 20px;
`;
const EmojiRightTop = styled.div`
${abs};
right: 20px;
top: 20px;
`;
const EmojiLeftBottom = styled.div`
${abs};
left: 20px;
bottom: 20px;
`;
const EmojiRightBottom = styled.div`
${abs};
right: 20px;
bottom: 20px;
`;
class Example extends React.Component {
getData() {
return import("./data/italent.json");
}
render() {
return (
<div>
<EmojiLeftTop>
{/**使用自定义数据 */}
<Emoji getData={this.getData}>Left Top</Emoji>
</EmojiLeftTop>
<EmojiRightTop>
{/**当点击的时候获取当前点击的表情数据 */}
<Emoji onSelect={console.log} getData={this.getData}>
right Top
</Emoji>
</EmojiRightTop>
<EmojiLeftBottom>
<Emoji
getData={this.getData}
config={{
meep: {
rowSize: 7,
imgSize: 46,
cellSize: 61
}
}}
>
Left bottom
</Emoji>
</EmojiLeftBottom>
<EmojiRightBottom>
<Emoji getData={this.getData}>Right bottom</Emoji>
</EmojiRightBottom>
</div>
);
}
}
export default Example;
参数
className 给 emoji 添加一个自定义的 className
getData 自定义的表情数据,需要返回一个promise
onSelect 当点击一个表情的执行的回调,返回数据为 emojiItem {url, title}
config 配置一个tabs下的图标尺寸,详见示例
emoji 弹层的位置使用了 getBoundingClientRect 计算到 Emoji 的根元素的位置得出的,Emoji 的根元素是按钮的一部分,如果做定位的话,需要把 Emoji 的根元素考虑进去。
3.0.8
5 years ago
3.0.7
5 years ago
3.0.6
5 years ago
3.0.5
5 years ago
3.0.4
5 years ago
3.0.3
5 years ago
3.0.2
5 years ago
3.0.1
5 years ago
1.0.9
5 years ago
1.0.8
5 years ago
2.0.2
5 years ago
2.0.1
5 years ago
1.0.7
5 years ago
1.0.6
5 years ago
1.0.5
5 years ago
1.0.4
5 years ago
1.0.3
5 years ago
1.0.2
5 years ago
1.0.1
5 years ago
1.0.0
5 years ago