构建可定制的表情选择器组件

你好呀，我是小邹。

概述

在当今的交互式Web应用中，表情符号（Emoji）已成为一种流行的沟通方式。为了提升用户体验并简化开发流程，本教程将引导您如何构建一个可高度定制的表情选择器组件。此组件将允许用户在Web表单中快速插入表情符号，并且可以通过JavaScript进行高度配置和扩展。

效果图

技术栈

• HTML：用于构建页面结构。
• CSS：用于美化界面和实现响应式布局。
• JavaScript：用于处理用户交互和动态内容生成。

页面结构

首先，我们需要为表情选择器组件定义基本的HTML结构。这里包含了一个按钮触发器、一个表情选择器面板和一个文本输入区域。

<div>
    <button style="background:none">
        <svg data-v-88c34aa9="" t="1716283029251" class="icon" viewBox="0 0 1024 1024" version="1.1"
           xmlns="http://www.w3.org/2000/svg" p-id="2631" width="50px" height="45px" id="emoji-button">
           <path data-v-88c34aa9=""
               d="M872.802928 755.99406 872.864326 755.99406 872.864326 755.624646Z" fill="#272536"
               p-id="2632">
            </path>
            <path data-v-88c34aa9=""
                d="M807.273469 216.727043c-162.808016-162.836669-427.736874-162.836669-590.544891 0-162.836669 162.806993-162.836669 427.736874 0 590.543867 162.808016 162.837692 427.737898 162.837692 590.544891 0C970.110137 644.462894 970.110137 379.534036 807.273469 216.727043M764.893242 764.92036c-139.444912 139.443889-366.370225 139.414213-505.798764 0-139.459239-139.473565-139.459239-366.354875 0-505.827417 139.428539-139.429563 366.354875-139.460262 505.798764 0C904.336108 398.521482 904.336108 625.476471 764.893242 764.92036" fill="#231F20" p-id="2633">
            </path>
            <path data-v-88c34aa9=""
                d="M381.724423 468.02137c24.783453 0 44.953841-20.169365 44.953841-44.967144 0-24.828478-20.170388-45.027519-44.953841-45.027519-24.842805 0-45.013193 20.199041-45.013193 45.027519C336.71123 447.852004 356.881618 468.02137 381.724423 468.02137" fill="#231F20" p-id="2634">
            </path>
            <path data-v-88c34aa9=""
                d="M640.680243 468.095048c24.812105 0 45.010123-20.213367 45.010123-45.01217 0-24.827455-20.198018-44.99682-45.010123-44.99682-24.785499 0-44.953841 20.169365-44.953841 44.99682C595.726401 447.88168 615.894743 468.095048 640.680243 468.095048" fill="#231F20" p-id="2635">
            </path>
            <path data-v-88c34aa9=""
                d="M642.245901 619.058294l-2.453888 0.798179c-40.310078 18.248619-83.548858 27.5341-128.411625 27.5341-46.343491 0-90.173742-9.375531-130.305765-27.799136l-2.425236-0.741897c-1.508353-0.413416-3.548826-1.003863-6.092765-1.003863-14.757099 0-26.734898 11.977799-26.734898 26.675546 0 6.978948 3.282766 13.988596 8.695033 19.253506l-0.325411 1.62501 6.831592 3.076058c47.911196 21.679765 100.021018 33.095769 150.681838 33.095769 51.608402 0 102.180194-11.120268 150.978597-33.361829 8.575306-4.703115 13.928221-13.721513 13.928221-23.511483C676.611593 627.458615 661.027663 613.290941 642.245901 619.058294"
fill="#231F20" p-id="2636">
            </path>
         </svg>
     </button>
    <div id="emoji-selector" style="display: none;height: 20%;margin-top: 10px">
          <!-- 表情按钮将在这里生成 -->
    </div>
</div>

CSS 样式

接下来，使用CSS来美化我们的组件。我们将添加一些基本的样式，包括对按钮、表情选择器面板的样式。

#emoji-selector {
        position: relative;
        display: none;
        border-radius: 5px;
        padding: 10px;
        z-index: 1;
    }

    .emoji-button-item {
        font-size: 19px; /* 控制表情的大小 */
        padding: 5px; /* 内边距 */
        margin: 2px; /* 外边距 */
        cursor: pointer; /* 鼠标指针样式 */
        border-radius: 5px; /* 圆角 */
        background: none;
    }

JavaScript 逻辑

现在，让我们添加JavaScript来处理用户交互和动态生成表情按钮。

<script>
    document.addEventListener('DOMContentLoaded', function () {
        const emojiButton = document.getElementById('emoji-button');
        const emojiSelector = document.getElementById('emoji-selector');

        // 生成表情按钮
        function generateEmojiButtons() {
            // 参考 https://www.emojiall.com/zh-hans/all-emojis
            const emojis = [
                '😀', '😁', '😂', '😃', '😄', '😅', '😆', '😇', '😉', '😊',
                '🥳', '😋', '😎', '🤗', '🥺', '😃', '😌', '😴', '😵', '😐',
                '🙃', '🤣', '😍', '🥰', '😚', '😘', '😜', '🤔', '😏',
                '😪', '😵', '😦', '❤️', '✋', '✌️', '🤏', '🤙', '🤞', '👍','👏'
            ];
            const emojiContainer = document.getElementById('emoji-selector');
            emojis.forEach(emoji => {
                const button = document.createElement('button');
                button.className = 'emoji-button-item';
                button.textContent = emoji;
                button.addEventListener('click', function () {
                    const textarea = document.getElementById('aaa');
                    textarea.focus();
                    textarea.value += emoji;
                    // 阻止点击事件冒泡到父元素，避免关闭表情选择器
                    event.stopPropagation();
                });
                emojiContainer.appendChild(button);
            });
        }

        // 初始化表情选择器
        generateEmojiButtons();

        // 当点击表情按钮时显示或隐藏表情选择器
        emojiButton.addEventListener('click', function () {
            emojiSelector.style.display = emojiSelector.style.display === 'none' ? 'block' : 'none';
        });

        // 当点击文档其他地方时隐藏表情选择器
        window.addEventListener('click', function (event) {
            if (!emojiSelector.contains(event.target) && event.target !== emojiButton) {
                emojiSelector.style.display = 'none';
            }
        });
    });
</script>

结论

通过上述步骤，您可以构建一个功能齐全的表情选择器组件，它不仅美观而且实用。此外，该组件具有高度可定制性，可以根据您的具体需求进行扩展和调整。无论是用于聊天应用还是博客评论系统，这个组件都能提供优秀的用户体验。