🚀 emoji 控必备:编写一个 emoji 选择器组件
说在前面
📺在数字时代,表情符号已成为我们沟通的延伸。大部分同学在平时沟通聊天中都少不了使用 emoji 表情,所以今天我们一起来编写一个 emoji 选择器组件,可以一键引入为你的输入框添加 emoji 表情选择功能。
效果展示
![](https://static001.geekbang.org/infoq/f9/f92c2e3a365eb237606c1a84636a63f6.gif)
体验地址
体验地址:http://jyeontu.xyz/jvuewheel/#/JEmojiPickerView
功能实现
获取 emoji 表情文件
这里推荐一个网站,可以快速查找需要的 emoji,还支持自制 emoji 表情,平时我也会到这里查找自己需要的 emoji 表情。
https://www.emojiall.com/zh-hans/all-emojis
![](https://static001.geekbang.org/infoq/d0/d0cfa076259a184f34024f6cf5d724ee.png)
![](https://static001.geekbang.org/infoq/30/30ba8e0c652e6f41947c71e908f54a86.png)
emoji 表情数据我们便可以从这个网站中获取,简单写个脚本获取页面上的 emoji 表情包
![](https://static001.geekbang.org/infoq/6b/6b24657bfa726a5370520e74c3306e58.png)
组件配置 (props)
showFrequentlyUsedList:是否显示常用表情列表,默认为 true。
**emojiList:**自定义的表情列表,默认为空数组。
**mode:**自定义列表的添加模式("unshift"、"append" 或 "replace"),默认为"append"。
**hideList:**需要隐藏的表情列表,默认为空数组。
**inputId:**关联的输入框 ID,用于将选中的表情填入该输入框。
添加常用表情列表
将常用表情列表添加到表情选择器组件中。
检查显示条件:
方法首先检查
showFrequentlyUsedList
属性是否为true
。如果不是,方法将直接返回一个空数组,即不添加任何常用表情列表。初始化列表:
它初始化一个空数组
list
,用来存储常用的表情对象。从本地存储中检索数据:
尝试使用
localStorage.getItem("JEmojiPickerFrequentlyUsedList")
从本地存储中检索常用表情的列表。如果未找到相应的存储项,则默认返回一个空数组[]
。解析本地存储数据:
从本地存储中检索到的数据应该是一个 JSON 字符串,因此使用
JSON.parse()
将其转换回表情对象数组。创建常用分类:
创建一个对象来表示常用表情的分类,其中包含
title
和emojiTitle
。title
是分类的显示名称,emojiTitle
是该分类的简短标题或图标。该对象的
list
属性被设置为解析后的表情列表。添加到主列表:
将创建的分类对象添加到
list
数组中。返回结果:
最后,方法返回
list
数组,其中现在包含了常用表情的分类。
以下是该方法的代码示例,包含一些额外的注释以提高清晰度:
这个方法确保了表情选择器组件能够根据用户之前的使用情况动态显示常用表情列表,通过提供快速访问常用表情来增强用户体验。
初始化 emoji 列表
初始化 emoji 表情数据列表。
开始初始化过程:
方法开始时,首先通过调用
addFrequentlyUsedList()
方法并展开其返回值来初始化一个新列表list
,这个列表将包含常用表情(如果showFrequentlyUsedList
为true
)。遍历表情数据:
使用
emojiJson.forEach
遍历引入的表情数据配置。过滤和添加表情:
对于
emojiJson
中的每个表情项,首先检查它是否在hideList
中被列出为需要隐藏的项。如果没有被隐藏,使用
list.push()
方法将该表情添加到list
中。在添加之前,创建一个新的对象,其中
emojiTitle
属性是原title
的前两个字符的简化版本(去除中文字符)。处理自定义表情列表:
如果
emojiList
属性有值(即有传入的自定义表情列表),根据mode
属性的值来决定如何处理这个列表:"unshift"
:将自定义表情列表中的元素添加到list
的开头。"replace"
:用emojiList
替换整个list
。默认(
"append"
):将自定义表情列表中的元素添加到list
的末尾。更新组件数据:
将最终的
list
赋值给组件的emojiJson
数据属性,这样组件就有了完整的、经过处理的表情数据。设置激活的标签页:
将
list
的第一个元素设置为激活的标签页activatedTab
。
init
方法确保了组件在创建时能够根据配置和用户自定义的选项来加载和展示正确的表情数据。
处理标签点击事件
处理标签点击事件,更新激活的标签页,并重置滚动位置。
处理表情点击事件
处理用户点击表情时的逻辑。
获取常用表情列表:
使用
find
方法在emojiJson
中查找标题为 "⏳️最近常用" 的项,这通常表示常用表情的分类。如果没有找到,就使用空对象{}
。初始化表情列表:
从找到的常用表情分类中获取
list
属性,如果没有list
属性或没有找到常用分类,则默认为一个空数组[]
。添加新点击的表情到列表:
创建一个新数组
newList
,首先将被点击的表情emoji
添加到数组的开头。更新常用表情列表:
遍历原始的
list
数组,对于数组中的每个表情项,如果它的名字 (name
) 与被点击的表情的名字不同,则将其添加到newList
中。这样保证了被点击的表情会显示在常用列表的顶部。存储更新后的列表:
将更新后的
newList
赋值回frequentlyUsedList.list
,然后使用localStorage.setItem
方法将新列表存储到本地存储中,使用 JSON 字符串化后保存。将表情填入选定的输入框:
调用
fillBackInput
方法,传入被点击的表情,将表情插入到与inputId
属性关联的 HTML 输入框中。触发选择事件:
使用
$emit
方法发出一个名为 "select" 的事件,传递被点击的表情作为事件的参数。这允许父组件监听这个事件并根据需要进行处理。
emojiClick
方法确保了当用户选择一个表情时,它会成为常用表情,并更新本地存储和输入框中的内容,同时通知父组件用户已选择特定的表情。
将选中的表情填入关联的输入框
将选中的表情插入到关联的输入框中。
获取输入框元素:
使用
document.getElementById(this.inputId)
根据组件的inputId
属性获取对应的输入框元素。如果输入框不存在(input
为null
或undefined
),则直接返回。记录光标位置:
在进行任何编辑之前,记录输入框当前的
selectionStart
和selectionEnd
,这两个属性分别表示光标开始和结束的位置。构造新的输入值:
构造一个新的字符串
resultText
,将输入框中光标前的内容、选中的表情的font
属性值(即表情符号本身),以及光标后的内容连接起来。更新输入框的值:
将构造好的新字符串赋值给输入框的
value
属性,这样输入框中的内容就更新为插入了表情符号的状态。设置输入焦点:
调用
input.focus()
将输入焦点设置回输入框,以便用户继续输入。更新光标位置:
更新
selectionStart
和selectionEnd
属性,将光标移动到新插入的表情符号的末尾,以便用户可以继续在表情后输入。
fillBackInput
方法确保了用户在表情选择器中选中一个表情后,该表情能够被插入到指定输入框的当前光标位置,并保持用户能够继续在表情后进行输入。这是一个提升用户体验的重要环节。
处理鼠标、触屏交互事件
这段代码是表情选择器组件中用于处理滚动逻辑的事件处理函数集合。它包括鼠标和触摸事件的处理,以实现组件内容的滚动功能。以下是每个函数的中文解释和逐行分析:
handleMouseDown
当鼠标按下时触发此函数。
初始化
scrollDistance
为 0,用于记录滚动距离。记录鼠标按下时的 Y 坐标(
clientY
)和当前滚动容器的滚动位置(scrollTop
)。将
isScrolling
设置为true
,表示开始滚动。监听
mousemove
和mouseup
事件,用于后续的滚动和滚动结束处理。
handleMouseMove
当鼠标移动且已经按下时触发此函数。
如果没有在滚动状态(
isScrolling
为false
),则返回。计算鼠标移动的距离(
deltaY
),并根据此距离更新滚动容器的滚动位置(newScrollTop
)。更新
scrollDistance
为新滚动位置的绝对值。设置滚动容器的
scrollTop
为newScrollTop
,实现滚动效果。
handleMouseUp
当鼠标释放时触发此函数。
如果没有在滚动状态(
isScrolling
为false
),则返回。将
isScrolling
设置为false
,表示滚动结束。阻止默认事件行为(如页面滚动)。
移除之前添加的
mousemove
和mouseup
事件监听器。
handleTouchStart
当触摸开始时触发此函数。
初始化
scrollDistance
为 0。记录触摸点的 Y 坐标(
clientY
)和当前滚动容器的滚动位置。将
scrolling
设置为true
,表示开始触摸滚动。
handleTouchMove
当触摸点移动时触发此函数。
如果没有在触摸滚动状态(
scrolling
为false
),则返回。获取当前触摸点的 Y 坐标,并计算与触摸开始时的 Y 坐标的差值(
deltaY
)。根据差值更新滚动容器的滚动位置(
newScrollTop
)。更新
scrollDistance
为新滚动位置的绝对值。设置滚动容器的
scrollTop
为newScrollTop
,实现滚动效果。阻止默认事件行为,如页面滚动。
handleTouchEnd
当触摸结束时触发此函数。
将
scrolling
设置为false
,表示滚动结束。阻止默认事件行为。
这些函数共同工作,确保当用户通过鼠标或触摸与表情选择器组件交互时,组件内容可以相应地滚动。同时,它们还处理了滚动的开始和结束,以及滚动过程中的动态更新。通过这种方式,组件提供了流畅的滚动体验,使用户可以轻松地在不同的表情类别之间切换。
组件使用
![](https://static001.geekbang.org/infoq/73/73e32a22c2a11af8ff7199635739320f.png)
组件库
组件文档
目前该组件也已经收录到我的组件库,组件文档地址如下:http://jyeontu.xyz/jvuewheel/#/JMouseMenu
组件内容
组件库中还有许多好玩有趣的组件,如:
悬浮按钮
评论组件
词云
瀑布流照片容器
视频动态封面
3D 轮播图
web 桌宠
贡献度面板
拖拽上传
自动补全输入框
图片滑块验证
等等……
组件库源码
组件库已开源到 gitee,有兴趣的也可以到这里看看:https://gitee.com/zheng_yongtao/jyeontu-component-warehouse
觉得有帮助的可以点个 star~🌟
有什么问题或错误可以指出,欢迎 pr~🥰
有什么想要实现的组件或想法可以联系我~🛎
公众号
关注公众号『前端也能这么有趣
』,获取更多有趣内容。
发送『组件库
』获取源码
说在后面
🎉 这里是 JYeontu,现在是一名前端工程师,有空会刷刷算法题,平时喜欢打羽毛球 🏸 ,平时也喜欢写些东西,既为自己记录 📋,也希望可以对大家有那么一丢丢的帮助,写的不好望多多谅解 🙇,写错的地方望指出,定会认真改进 😊,偶尔也会在自己的公众号『
前端也能这么有趣
』发一些比较有趣的文章,有兴趣的也可以关注下。在此谢谢大家的支持,我们下文再见 🙌。
版权声明: 本文为 InfoQ 作者【JYeontu】的原创文章。
原文链接:【http://xie.infoq.cn/article/80d0acab133d3aea2619e8d35】。文章转载请联系作者。
评论