|
|
@@ -1,204 +0,0 @@
|
|
|
-<!DOCTYPE html>
|
|
|
-<html lang="en">
|
|
|
-
|
|
|
-<head>
|
|
|
- <meta charset="UTF-8">
|
|
|
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
|
- <title>Document</title>
|
|
|
- <script src="./babel.min.js"></script>
|
|
|
- <script src="./react.development.js"></script>
|
|
|
- <script src="./react-dom.development.js"></script>
|
|
|
-</head>
|
|
|
-
|
|
|
-<body>
|
|
|
- <div id="root"></div>
|
|
|
- <script type="text/babel">
|
|
|
- const root = ReactDOM.createRoot(document.getElementById("root"));
|
|
|
- function App() {
|
|
|
- return (
|
|
|
- <div>
|
|
|
- <EmojiPicker />
|
|
|
- </div>
|
|
|
- )
|
|
|
- }
|
|
|
- class EmojiPicker extends React.Component {
|
|
|
- constructor(props) {
|
|
|
- super(props);
|
|
|
- this.state = {
|
|
|
- // 选中的表情索引，-1表示未选择
|
|
|
- selectedIndex: -1,
|
|
|
- // 悬停的表情索引，-1表示无悬停
|
|
|
- hoverIndex: -1
|
|
|
- };
|
|
|
-
|
|
|
- // 绑定事件处理函数
|
|
|
- this.handleSelect = this.handleSelect.bind(this);
|
|
|
- this.handleHover = this.handleHover.bind(this);
|
|
|
- this.handleLeave = this.handleLeave.bind(this);
|
|
|
- this.clearSelection = this.clearSelection.bind(this);
|
|
|
- }
|
|
|
-
|
|
|
- // 表情数据
|
|
|
- emojis = [
|
|
|
- { symbol: '😊', name: '开心' },
|
|
|
- { symbol: '😍', name: '爱慕' },
|
|
|
- { symbol: '😂', name: '大笑' },
|
|
|
- { symbol: '😢', name: '难过' },
|
|
|
- { symbol: '😠', name: '生气' },
|
|
|
- { symbol: '😲', name: '惊讶' },
|
|
|
- { symbol: '😴', name: '困倦' },
|
|
|
- { symbol: '🤔', name: '思考' }
|
|
|
- ];
|
|
|
-
|
|
|
- // 选择表情
|
|
|
- handleSelect(index) {
|
|
|
- this.setState({
|
|
|
- selectedIndex: index
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 鼠标悬停表情
|
|
|
- handleHover(index) {
|
|
|
- this.setState({
|
|
|
- hoverIndex: index
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 鼠标离开表情
|
|
|
- handleLeave() {
|
|
|
- this.setState({
|
|
|
- hoverIndex: -1
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- // 清除选择
|
|
|
- clearSelection() {
|
|
|
- this.setState({
|
|
|
- selectedIndex: -1
|
|
|
- });
|
|
|
- }
|
|
|
-
|
|
|
- render() {
|
|
|
- const { selectedIndex, hoverIndex } = this.state;
|
|
|
- const selectedEmoji = selectedIndex !== -1 ? this.emojis[selectedIndex] : null;
|
|
|
-
|
|
|
- return (
|
|
|
- <div style={containerStyle}>
|
|
|
- <h2 style={titleStyle}>表情选择器</h2>
|
|
|
-
|
|
|
- {/* 表情选择区域 */}
|
|
|
- <div style={emojiGridStyle}>
|
|
|
- {this.emojis.map((emoji, index) => (
|
|
|
- <div
|
|
|
- key={index}
|
|
|
- onClick={() => this.handleSelect(index)}
|
|
|
- onMouseEnter={() => this.handleHover(index)}
|
|
|
- onMouseLeave={this.handleLeave}
|
|
|
- style={{
|
|
|
- ...emojiItemStyle,
|
|
|
- // 选中或悬停时的样式
|
|
|
- transform: (selectedIndex === index || hoverIndex === index)
|
|
|
- ? 'scale(1.2)'
|
|
|
- : 'scale(1)',
|
|
|
- backgroundColor: selectedIndex === index ? '#e3f2fd' : 'transparent',
|
|
|
- borderColor: selectedIndex === index ? '#2196F3' : '#eee'
|
|
|
- }}
|
|
|
- >
|
|
|
- <span style={emojiSymbolStyle}>{emoji.symbol}</span>
|
|
|
- <span style={emojiNameStyle}>{emoji.name}</span>
|
|
|
- </div>
|
|
|
- ))}
|
|
|
- </div>
|
|
|
-
|
|
|
- {/* 选择结果 */}
|
|
|
- {selectedEmoji && (
|
|
|
- <div style={selectionResultStyle}>
|
|
|
- <p>你选择了：{selectedEmoji.symbol} {selectedEmoji.name}</p>
|
|
|
- <button
|
|
|
- onClick={this.clearSelection}
|
|
|
- style={clearButtonStyle}
|
|
|
- >
|
|
|
- 清除选择
|
|
|
- </button>
|
|
|
- </div>
|
|
|
- )}
|
|
|
-
|
|
|
- {!selectedEmoji && (
|
|
|
- <p style={instructionStyle}>请点击一个表情来表达你的心情</p>
|
|
|
- )}
|
|
|
- </div>
|
|
|
- );
|
|
|
- }
|
|
|
- }
|
|
|
-
|
|
|
- // 样式定义
|
|
|
- const containerStyle = {
|
|
|
- maxWidth: '600px',
|
|
|
- margin: '20px auto',
|
|
|
- padding: '20px',
|
|
|
- textAlign: 'center',
|
|
|
- fontFamily: 'Arial, sans-serif',
|
|
|
- border: '1px solid #e0e0e0',
|
|
|
- borderRadius: '10px',
|
|
|
- boxShadow: '0 2px 8px rgba(0,0,0,0.1)'
|
|
|
- };
|
|
|
-
|
|
|
- const titleStyle = {
|
|
|
- color: '#333',
|
|
|
- marginBottom: '25px'
|
|
|
- };
|
|
|
-
|
|
|
- const emojiGridStyle = {
|
|
|
- display: 'grid',
|
|
|
- gridTemplateColumns: 'repeat(4, 1fr)',
|
|
|
- gap: '15px',
|
|
|
- marginBottom: '25px'
|
|
|
- };
|
|
|
-
|
|
|
- const emojiItemStyle = {
|
|
|
- padding: '15px 10px',
|
|
|
- border: '1px solid #eee',
|
|
|
- borderRadius: '8px',
|
|
|
- cursor: 'pointer',
|
|
|
- transition: 'all 0.2s ease',
|
|
|
- };
|
|
|
-
|
|
|
- const emojiSymbolStyle = {
|
|
|
- fontSize: '32px',
|
|
|
- display: 'block',
|
|
|
- marginBottom: '5px'
|
|
|
- };
|
|
|
-
|
|
|
- const emojiNameStyle = {
|
|
|
- fontSize: '14px',
|
|
|
- color: '#666'
|
|
|
- };
|
|
|
-
|
|
|
- const selectionResultStyle = {
|
|
|
- padding: '15px',
|
|
|
- backgroundColor: '#f8f9fa',
|
|
|
- borderRadius: '8px',
|
|
|
- marginBottom: '10px'
|
|
|
- };
|
|
|
-
|
|
|
- const clearButtonStyle = {
|
|
|
- padding: '6px 12px',
|
|
|
- marginTop: '10px',
|
|
|
- backgroundColor: '#f44336',
|
|
|
- color: 'white',
|
|
|
- border: 'none',
|
|
|
- borderRadius: '4px',
|
|
|
- cursor: 'pointer',
|
|
|
- fontSize: '14px'
|
|
|
- };
|
|
|
-
|
|
|
- const instructionStyle = {
|
|
|
- color: '#666',
|
|
|
- fontStyle: 'italic'
|
|
|
- };
|
|
|
-
|
|
|
- root.render(<App />);
|
|
|
- </script>
|
|
|
-</body>
|
|
|
-
|
|
|
-</html>
|
郑柏铃