{"id":16978187,"url":"https://github.com/adkcodexd/vue3-emoji","last_synced_at":"2025-04-07T06:09:56.482Z","repository":{"id":43263040,"uuid":"510747947","full_name":"ADKcodeXD/Vue3-Emoji","owner":"ADKcodeXD","description":"基于Vue3和emoji-data.json实现的表情选择组件","archived":false,"fork":false,"pushed_at":"2025-03-04T03:34:05.000Z","size":275,"stargazers_count":52,"open_issues_count":0,"forks_count":6,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-03-31T05:04:06.727Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ADKcodeXD.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2022-07-05T13:27:49.000Z","updated_at":"2025-03-04T03:31:42.000Z","dependencies_parsed_at":"2024-03-09T14:24:53.789Z","dependency_job_id":"60a3ea43-c819-4b00-be5c-f3c63db0f4d4","html_url":"https://github.com/ADKcodeXD/Vue3-Emoji","commit_stats":{"total_commits":47,"total_committers":1,"mean_commits":47.0,"dds":0.0,"last_synced_commit":"94d4dd41dd5db4a2081c7847ace5e95a7dae6372"},"previous_names":[],"tags_count":19,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ADKcodeXD%2FVue3-Emoji","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ADKcodeXD%2FVue3-Emoji/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ADKcodeXD%2FVue3-Emoji/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ADKcodeXD%2FVue3-Emoji/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ADKcodeXD","download_url":"https://codeload.github.com/ADKcodeXD/Vue3-Emoji/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":247601448,"owners_count":20964864,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-14T01:42:45.158Z","updated_at":"2025-04-07T06:09:56.449Z","avatar_url":"https://github.com/ADKcodeXD.png","language":"Vue","funding_links":[],"categories":[],"sub_categories":[],"readme":"# Vue 3 Emoji\n\n一款简单的 ，还算好看的，基于 Vue3 编写的表情选择组件。\n\n\u003cimg align=center  src=\"https://s1.ax1x.com/2022/07/06/jazn9H.png\"\u003e\n\n## 2024.10.13 更新\n\n首先感谢一直以来使用该项目的小伙伴们，这个项目是一个练习项目，所以可能会有很多不足之处，如果有什么建议或者问题欢迎提 issue。\n\n我非常抱歉这次更新来的十分晚，由于各种原因，这个仓库一直处于搁置状态，我个人也能力不足，一直没能解决一些问题，非常感谢各位小伙伴们的包容。\n\n本次更新版本号：v3.0.0\n\n- 修复了表情框点击弹出报错问题 #13 #10 #9\n- 修复了 fixpos 不起作用的问题 #11\n\n- 增加了 tippy 来控制弹出框的展示\n- 去除了集成的文本框和 input 框\n\n## 功能/feature\n\n- 支持自定义配置 可以自定义表情框的大小\n- 支持了 emoji 全量数据以及部分数据的选择\n- 支持两种不同的主题\n- 支持最近使用表情选项卡\n- 支持 keep 模式 可以不重复渲染\n- 支持自定义选项卡 你可以挑选自己喜欢的 emoji 并放入选项卡\n- 支持自定义 size 你可以不使用我定义的尺寸，按照自己所需进行尺寸的调整\n- 支持自定义主题 你可以通过传入自定义的样式来设置相应的颜色和风格\n- ~~集成文本框 你可以利用双向绑定来获取数据~~\n\n## 启动本项目/start this project\n\n```bash\ngit clone https://github.com/ADKcodeXD/Vue3-Emoji\ncd Vue3-Emoji\nyarn install\nyarn dev\n```\n\n## 使用/Usage\n\n使用 npm\n\n```bash\nnpm install vue3-emoji\n```\n\n使用 yarn\n\n```bash\nyarn add vue3-emoji\n```\n\n### CDN 引入\n\n```html\n\u003cscript src=\"https://cdn.jsdelivr.net/npm/vue3-emoji@latest/dist/Vue3Emoji.umd.js\"\u003e\u003c/script\u003e\n\u003clink rel=\"stylesheet\" href=\"https://cdn.jsdelivr.net/npm/vue3-emoji@latest/dist/style.css\" /\u003e\n```\n\n### 基本使用 /basic usage\n\n```vue\n//example.vue\n\u003cscript setup\u003e\nimport V3Emoji from 'vue3-emoji'\nimport 'vue3-emoji/dist/style.css'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003cV3Emoji /\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\n**当然 你可以自定义按钮**\n\n```html\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003cV3Emoji\u003e\n\t\t\t\u003cdiv class=\"my-btn\"\u003ebtn\u003c/div\u003e\n\t\t\u003c/V3Emoji\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\n**本组件支持了三种不同的大小**\n\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003cV3Emoji size=\"big\" /\u003e\n\t\t\u003cV3Emoji size=\"small\" /\u003e\n\t\t\u003cV3Emoji size=\"mid\" /\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\n**支持了暗黑主题**\n\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003cV3Emoji theme=\"dark\" /\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\n**支持了最近常用表情(基于 localstorage)**\n\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003cV3Emoji :recent=\"true\" /\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\n通过 default-select 你可以指定默认的选项卡\n\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003cV3Emoji default-select=\"Animals \u0026 Nature\" /\u003e\n\t\t\u003c!--你可以指定最近使用表情的tab作为默认tab--\u003e\n\t\t\u003cV3Emoji default-select=\"recenet\" :recent=\"true\" /\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\n\u003c!--*实验性功能*--\u003e\n\n支持皮肤的选择\n\n```vue\n\u003ctemplate\u003e\n\t\u003cdiv\u003e\n\t\t\u003cV3Emoji :skin=\"light\" /\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\n#### @click-emoji\n\n**点击 emoji 会触发相应的事件**\n\n```vue\n\u003cV3Emoji\n         :disable-group=\"disableGroup\"\n         @click-emoji=\"appendText\"\n         :options-name=\"optionsName\"\n         :recent=\"true\"\n         /\u003e\n\u003ctextarea v-model=\"inputText\" style=\"width: 300px\" /\u003e\n\u003c/div\u003e\n```\n\n#### fulldata\n\n**你可以通过指定 fulldata 来接受完整的 emojiItem**\n\n```vue\n\u003cV3Emoji :disable-group=\"disableGroup\" @click-emoji=\"appendText\" :options-name=\"optionsName\" :recent=\"true\" :fulldata=\"true\" /\u003e\n//会接受到该参数 { \"emoji\": \"🧨\", \"skin_tone_support\": false, \"name\": \"firecracker\", \"slug\": \"firecracker\", \"unicode_version\": \"11.0\",\n\"emoji_version\": \"11.0\" }\n```\n\n#### optionsName\n\n你可以通过传入**optionsName**来自定义各个板块的名字\n\n```vue\n\u003cscript setup\u003e\nconst optionsName = {\n\t'Smileys \u0026 Emotion': '笑脸\u0026表情',\n\t'Food \u0026 Drink': '食物\u0026饮料',\n\t'Animals \u0026 Nature': '动物\u0026自然',\n\t'Travel \u0026 Places': '旅行\u0026地点',\n\t'People \u0026 Body': '人物\u0026身体',\n\tObjects: '物品',\n\tSymbols: '符号',\n\tFlags: '旗帜',\n\tActivities: '活动'\n}\n\u003c/script\u003e\n\u003ctemplate\u003e\n\t\u003cV3Emoji :options-name=\"optionsName\" /\u003e\n\u003c/template\u003e\n```\n\n#### disableGroup\n\n同时，你也可以传入**disableGroup**来禁用相应的板块\n\n\u003c!--(注意：如果你先传入了optionsName ，那么就需要使用新的名字来进行禁用)--\u003e\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nimport V3Emoji from './components/V3Emoji.vue'\nconst inputText = ref('')\nconst appendText = (val: string) =\u003e {\n\tinputText.value += val\n}\nconst optionsName = {\n\t'Smileys \u0026 Emotion': '笑脸\u0026表情',\n\t'Food \u0026 Drink': '食物\u0026饮料'\n}\nconst disableGroup = ['食物\u0026饮料']\n//禁用了食物\u0026饮料的选项卡\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n\t\u003cV3Emoji :disable-group=\"disableGroup\" :options-name=\"optionsName\" /\u003e\n\u003c/template\u003e\n```\n\n#### keep\n\n**如果你需要在使用完表情框后保持原本打开的状态，可以指定 keep 来开启保持状态**\n\n\u003c!--bug:指定了keep后 无法在第一次打开时检测位置并调整位置--\u003e\n\n```vue\n\u003cV3Emoji :keep=\"true\" /\u003e\n```\n\n#### fixPos\n\n通过 fixpos 可以固定表情弹出框的位置，默认情况下表情弹出框会随着滚动条和屏幕上下移动而变化\n\n**注意:3.0 版本中引入了 tippy，所以 fixpos 的值需要和 tippy 的值对应，具体可以参考 tippy 的文档**\n\u003ca href=\"https://atomiks.github.io/tippyjs/v6/all-props/#placement\" target=\"_blank\"\u003etippy 文档配置\u003c/a\u003e\n\n```vue\n\u003cV3Emoji fix-pos=\"auto\" // or 'auto-start'| 'auto-end' |'bottom' |'bottom-start'| 'bottom-end' /\u003e\n```\n\n### customSize\n\n**利用 customSize 你可以自定义表情框的大小**\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nconst customSize = {\n\t'V3Emoji-width': '300px',\n\t'V3Emoji-height': '20rem',\n\t'V3Emoji-fontSize': '1rem',\n\t'V3Emoji-itemSize': '50px'\n}\n\u003c/script\u003e\n\u003ctemplate\u003e\n\t\u003cdiv class=\"test\"\u003e\n\t\t\u003cV3Emoji size=\"big\" :custom-size=\"customSize\" /\u003e\n\t\t\u003cp\u003ecustomSize\u003c/p\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\n### customTab\n\n如果你需要自己自定义一些 emoji 并且将其放到新的板块中，你可以这么做\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nconst customTab = {\n\t我的自定义板块: [\n\t\t{\n\t\t\temoji: '🍔',\n\t\t\tname: '汉堡包'\n\t\t},\n\t\t{\n\t\t\temoji: '🍟',\n\t\t\tname: '薯条'\n\t\t}\n\t]\n}\n\u003c/script\u003e\n\u003ctemplate\u003e\n\t\u003cdiv class=\"test\"\u003e\n\t\t\u003cV3Emoji :customTab=\"customTab\" default-select=\"我的自定义板块\" /\u003e\n\t\t\u003cp\u003ecustomTab\u003c/p\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\n### customIcon\n\n本组件会默认读取数据中的第一个 emoji 作为默认的 icon 你可以通过 customIcon 来定义下方选择的 Icon\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nconst customIcon = {\n\t'Smileys \u0026 Emotion': '😚',\n\t'Food \u0026 Drink': '🍔',\n\t'Animals \u0026 Nature': '🐶',\n\tActivities: '🎉',\n\t'Travel \u0026 Places': '🚗',\n\tObjects: '💰'\n}\n\u003c/script\u003e\n\u003ctemplate\u003e\n\t\u003cdiv class=\"test\"\u003e\n\t\t\u003cV3Emoji :customIcon=\"customIcon\" /\u003e\n\t\t\u003cp\u003ecustomIcon\u003c/p\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\n### customTheme\n\n本组件提供了自定义的主题功能，你可以自定义主题色\n\n```vue\n\u003cscript setup lang=\"ts\"\u003e\nconst customTheme = {\n\t'V3Emoji-hoverColor': '#ff5500',\n\t'V3Emoji-activeColor': '#99ff77',\n\t'V3Emoji-shadowColor': 'rgba(255,255,0,0.5)',\n\t'V3Emoji-backgroundColor': '#000000',\n\t'V3Emoji-fontColor': '#ffffff'\n}\n\u003c/script\u003e\n\u003ctemplate\u003e\n\t\u003cdiv class=\"test\"\u003e\n\t\t\u003cV3Emoji size=\"mid\" :custom-theme=\"customTheme\" /\u003e\n\t\t\u003cp\u003ecustomTheme\u003c/p\u003e\n\t\u003c/div\u003e\n\u003c/template\u003e\n```\n\n## 配置/Options\n\n|     配置名     |       配置类型        |       默认值        |                                              说明/备注                                               |\n| :------------: | :-------------------: | :-----------------: | :--------------------------------------------------------------------------------------------------: |\n|      size      | 'mid'\\|'small'\\|'big' |         mid         |                                           用于调整整体大小                                           |\n|     theme      |   'dark'\\|'default'   |       default       |                                     主题切换 支持亮色和暗黑主题                                      |\n|  manualClose   |        boolean        |        false        |                                 设置为 true 可以手动控制弹出框的关闭                                 |\n|  optionsName   |           -           |         {}          |                                           翻译原有板块名字                                           |\n|  disableGroup  |       string[]        |         []          |                                             禁用某些板块                                             |\n| defaultSelect  |        string         | 'Smileys \u0026 Emotion' |                         默认选中板块，注意：如果指定了新名字，需要传入新名字                         |\n|     recent     |        boolean        |        false        |                                       开启最近使用 emoji 功能                                        |\n|    fulldata    |        boolean        |        false        |                如果指定为 true 那么 clickEmoji 事件将会传出一个 EmojiItem 类型的对象                 |\n|     fixPos     |    查看 tippy 官网    |        tippy        |                                   可以传入一个值来固定表情框的位置                                   |\n|   customSize   |   Emoji.CustomSize    |     见类型定义      | 如果指定了相应的自定义大小，那么会将 pollup 表情选择框的大小重置，没有指定的将使用相应 size 的默认值 |\n|  customTheme   |   Emoji.CustomTheme   |     见类型定义      |            自定义主题颜色，支持五个选项的配置，没有指定的依旧会使用指定的 theme 的默认值             |\n|   customIcon   |   Emoji.CustomIcon    |     见类型定义      |                                       自定义 tab 切换栏的显示                                        |\n|   customTab    |   Emoji.ObjectItem    |     见类型定义      |              你可以传入一个对象来指定一个新的选项卡，这个选项卡内可以放置你需要的 emoji              |\n| unicodeVersion |        number         |         11          |                            在某些设备上可能不能兼容高版本的 emojiunicode                             |\n|     _skin_     |           -           |        none         |                                          暂时无法很好的支持                                          |\n|  tippyOptions  |  自定义 tippy 的配置  |                     |                         https://atomiks.github.io/tippyjs/v6/customization/                          |\n| immediateClose |        boolean        |        false        |                                   设置为 true 时点击表情后立即关闭                                   |\n\n```ts\ntype FixType = 'upleft' | 'upright' | 'upcenter' | 'downleft' | 'downright' | 'downcenter' //控制表情弹出框的位置\n```\n\n## 方法/Function\n\n| 方法名   | 类型     | 说明           |\n| -------- | -------- | -------------- |\n| closePop | ()=\u003evoid | 关闭表情弹出框 |\n| openPop  | ()=\u003evoid | 打开表情弹出框 |\n\n## 事件/Events\n\n|   事件名   |           事件类型            |                             说明                              |\n| :--------: | :---------------------------: | :-----------------------------------------------------------: |\n| clickEmoji | (val:string\\|EmojiItem)=\u003evoid | 点击 emoji 触发的事件，可以通过@clickEmoji 来接收选择的 emoji |\n|   close    |             void              |                    表情框关闭时触发的事件                     |\n\n## 类型定义以及默认值/@types\n\n```ts\ndeclare namespace Emoji {\n\tinterface EmojiItem {\n\t\temoji: string\n\t\tname: string\n\t\tskin_tone_support?: boolean\n\t\tunicode_version?: string\n\t\temoji_version?: string\n\t\tskin_tone_support_unicode_version?: string\n\t}\n\tinterface ObjectItem {\n\t\t[key: string]: EmojiItem[]\n\t}\n\tinterface CustomItem {\n\t\tsrc: string\n\t\tname: string\n\t}\n\tinterface JsonData {\n\t\t[key: string]: any\n\t}\n\tinterface CustomSize {\n\t\t[key: string]: string\n\t\t'V3Emoji-width': string // emoji的宽度\n\t\t'V3Emoji-height': string // height is optional\n\t\t'V3Emoji-fontSize': string //emoji的大小\n\t\t'V3Emoji-itemSize': string //每一项的大小\n\t}\n\tinterface CustomIcon {\n\t\t[key: string]: string\n\t}\n\tinterface CustomTheme {\n\t\t[key: string]: string\n\t\t'V3Emoji-backgroundColor': string\n\t\t'V3Emoji-hoverColor': string\n\t\t'V3Emoji-activeColor': string\n\t\t'V3Emoji-shadowColor': string\n\t}\n}\n```\n\n```\n//SizeData.json\n{\n    \"small\": {\n        \"V3Emoji-width\": \"300px\",\n        \"V3Emoji-height\": \"200px\",\n        \"V3Emoji-fontSize\": \"14px\",\n        \"V3Emoji-itemSize\": \"20px\"\n    },\n    \"mid\": {\n        \"V3Emoji-width\": \"500px\",\n        \"V3Emoji-height\": \"300px\",\n        \"V3Emoji-fontSize\": \"16px\",\n        \"V3Emoji-itemSize\": \"30px\"\n    },\n    \"big\": {\n        \"V3Emoji-width\": \"800px\",\n        \"V3Emoji-height\": \"400px\",\n        \"V3Emoji-fontSize\": \"20px\",\n        \"V3Emoji-itemSize\": \"36px\"\n    }\n}\n//ThemeData.json\n{\n    \"dark\":{\n        \"V3Emoji-backgroundColor\":\"#000\",\n        \"V3Emoji-fontColor\":\"#fff\",\n        \"V3Emoji-hoverColor\":\"#909090\",\n        \"V3Emoji-activeColor\":\"#909090\",\n        \"V3Emoji-shadowColor\":\"rgba(255,255,255,.2)\"\n    },\n    \"default\":{\n        \"V3Emoji-backgroundColor\":\"#fff\",\n        \"V3Emoji-fontColor\":\"#000\",\n        \"V3Emoji-hoverColor\":\"#e7e7e7\",\n        \"V3Emoji-activeColor\":\"#b6b6b6\",\n        \"V3Emoji-shadowColor\":\"rgba(0,0,0,.4)\"\n    }\n}\n```\n\n## 参考设置/example options\n\n- 通过以下设置将所有选项卡变成中文\n\n  ```vue\n  \u003cscript\u003e\n  const optionsName = {\n  \t'Smileys \u0026 Emotion': '笑脸\u0026表情',\n  \t'Food \u0026 Drink': '食物\u0026饮料',\n  \t'Animals \u0026 Nature': '动物\u0026自然',\n  \t'Travel \u0026 Places': '旅行\u0026地点',\n  \t'People \u0026 Body': '人物\u0026身体',\n  \tObjects: '物品',\n  \tSymbols: '符号',\n  \tFlags: '旗帜',\n  \tActivities: '活动'\n  }\n  \u003c/script\u003e\n\n  \u003ctemplate\u003e\n  \t\u003cV3Emoji :options-name=\"optionsName\" /\u003e\n  \u003c/template\u003e\n  ```\n\n## Link for npm\n\nhttps://github.com/ADKcodeXD/Vue3-Emoji.git\nhttps://github.com/ADKcodeXD/Vue3-Emoji\n\n## 许可/Licence\n\n本项目使用 MIT Licence，遵循 MIT 协议进行开源。\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadkcodexd%2Fvue3-emoji","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fadkcodexd%2Fvue3-emoji","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fadkcodexd%2Fvue3-emoji/lists"}