Vue3

2024-07-16 02:45| 来源: 网络整理| 查看: 265

Vue 3 Emoji

一款简单的，还算好看的，基于Vue3编写的表情选择组件。

功能/feature集成文本框你可以利用双向绑定来获取数据支持自定义配置可以自定义表情框的大小支持了emoji全量数据以及部分数据的选择支持两种不同的主题支持最近使用表情选项卡支持keep模式可以不重复渲染支持自定义选项卡你可以挑选自己喜欢的emoji并放入选项卡支持自定义size 你可以不使用我定义的尺寸，按照自己所需进行尺寸的调整支持自定义主题你可以通过传入自定义的样式来设置相应的颜色和风格启动本项目/start this projectgit clone https://github.com/ADKcodeXD/Vue3-Emoji cd Vue3-Emoji yarn install yarn dev使用/Usage

使用npm

npm install vue3-emoji

使用yarn

yarn add vue3-emoji基本使用 /basic usage//example.vue import V3Emoji from 'vue3-emoji' import 'vue3-emoji/dist/style.css'

当然你可以自定义按钮

btn

本组件支持了三种不同的大小

支持了暗黑主题

支持了最近常用表情(基于localstorage)

通过default-select你可以指定默认的选项卡

支持皮肤的选择

@click-emoji

点击emoji会触发相应的事件

fulldata

你可以通过指定fulldata来接受完整的emojiItem

//会接受到该参数 { "emoji": "🧨", "skin_tone_support": false, "name": "firecracker", "slug": "firecracker", "unicode_version": "11.0", "emoji_version": "11.0" }optionsName

你可以通过传入optionsName来自定义各个板块的名字

const optionsName = { 'Smileys & Emotion': '笑脸&表情', 'Food & Drink': '食物&饮料', 'Animals & Nature': '动物&自然', 'Travel & Places': '旅行&地点', 'People & Body': '人物&身体', Objects: '物品', Symbols: '符号', Flags: '旗帜', Activities: '活动' }; disableGroup

同时，你也可以传入disableGroup来禁用相应的板块

import V3Emoji from './components/V3Emoji.vue'; const inputText = ref(''); const appendText = (val: string) => { inputText.value += val; }; const optionsName = { 'Smileys & Emotion': '笑脸&表情', 'Food & Drink': '食物&饮料' }; const disableGroup = ['食物&饮料']; //禁用了食物&饮料的选项卡 keep

如果你需要在使用完表情框后保持原本打开的状态，可以指定keep来开启保持状态

fixPos

通过fixpos 可以固定表情弹出框的位置，默认情况下表情弹出框会随着滚动条和屏幕上下移动而变化

customSize

利用customSize 你可以自定义表情框的大小

const customSize= { 'V3Emoji-width': '300px', 'V3Emoji-height': '20rem', 'V3Emoji-fontSize': '1rem', 'V3Emoji-itemSize': '50px' };

customSize

customTab

如果你需要自己自定义一些emoji并且将其放到新的板块中，你可以这么做

const customTab= { 我的自定义板块: [ { emoji: '🍔', name: '汉堡包' }, { emoji: '🍟', name: '薯条' } ] };

customTab

customIcon

本组件会默认读取数据中的第一个emoji作为默认的icon 你可以通过customIcon来定义下方选择的Icon

const customIcon = { 'Smileys & Emotion': '😚', 'Food & Drink': '🍔', 'Animals & Nature': '🐶', Activities: '🎉', 'Travel & Places': '🚗', Objects: '💰' };

customIcon

customTheme

本组件提供了自定义的主题功能，你可以自定义主题色

const customTheme= { 'V3Emoji-hoverColor': '#ff5500', 'V3Emoji-activeColor': '#99ff77', 'V3Emoji-shadowColor': 'rgba(255,255,0,0.5)', 'V3Emoji-backgroundColor': '#000000', 'V3Emoji-fontColor': '#ffffff' };

customTheme

文本框集成使用

本组件集成了一个简单的文本框，你可以通过textArea选项来进行开启他。

textArea的大小随着父容器的变化而变化，所以推荐你最好使用一个div容器对组件进行包裹

textarea支持了双向数据绑定，你可以直接使用v-model来进行绑定

import V3Emoji from './components/V3Emoji.vue'; const clickEmoji = (val: any) => { clickEvent.value = val; console.log(val); }; const disableGroup = ['食物&饮料']; const abc = ref('这里是双向绑定的值'); 配置/Options配置名配置类型默认值说明/备注v-modelstring‘’可以进行数据的双向绑定（需要开启textArea）size‘mid’|'small'|'big'mid用于调整整体大小theme'dark'|'default'default主题切换支持亮色和暗黑主题manualClosebooleanfalse设置为true可以手动控制弹出框的关闭optionsName-{}翻译原有板块名字disableGroupstring[][]禁用某些板块defaultSelectstring'Smileys & Emotion'默认选中板块，注意：如果指定了新名字，需要传入新名字recentbooleanfalse开启最近使用emoji功能fulldatabooleanfalse如果指定为true 那么clickEmoji事件将会传出一个EmojiItem类型的对象keepbooleanfalse如果指定为true 那么表情框关闭将不会销毁组件textAreabooleanfalse开启文本框功能选项textAreaOptionEmoji.TextAreaOptions见类型定义你可以定义textarea的一些选项fixPos六个值FixType可以传入一个值来固定表情框的位置customSizeEmoji.CustomSize见类型定义如果指定了相应的自定义大小，那么会将pollup表情选择框的大小重置，没有指定的将使用相应size的默认值customThemeEmoji.CustomTheme见类型定义自定义主题颜色，支持五个选项的配置，没有指定的依旧会使用指定的theme的默认值customIconEmoji.CustomIcon见类型定义自定义tab切换栏的显示customTabEmoji.ObjectItem见类型定义你可以传入一个对象来指定一个新的选项卡，这个选项卡内可以放置你需要的emojiunicodeVersionnumber11在某些设备上可能不能兼容高版本的emojiunicodeskin-none暂时无法很好的支持type FixType = 'upleft' | 'upright' | 'upcenter' | 'downleft' | 'downright' | 'downcenter'; //控制表情弹出框的位置方法/Function方法名类型说明closePop()=>void关闭表情弹出框事件/Events事件名事件类型说明clickEmoji(val:string|EmojiItem)=>void点击emoji触发的事件，可以通过@clickEmoji来接收选择的emojiclosevoid表情框关闭时触发的事件changeText(val:string)=>void用于接受文本框改变时触发的事件类型定义以及默认值/@typesdeclare namespace Emoji { interface EmojiItem { emoji: string; name: string; skin_tone_support?: boolean; unicode_version?: string; emoji_version?: string; skin_tone_support_unicode_version?: string; } interface ObjectItem { [key: string]: EmojiItem[]; } interface CustomItem { src: string; name: string; } interface JsonData { [key: string]: any; } interface TextAreaOptions { placeholder?: string; rows?: number; cols?: number; resize?: StyleValue; } interface CustomSize { [key: string]: string; 'V3Emoji-width': string; // emoji的宽度 'V3Emoji-height': string; // height is optional 'V3Emoji-fontSize': string; //emoji的大小 'V3Emoji-itemSize': string; //每一项的大小 } interface CustomIcon { [key: string]: string; } type FixType = 'upleft' | 'upright' | 'upcenter' | 'downleft' | 'downright' | 'downcenter'; interface CustomTheme { [key: string]: string; 'V3Emoji-backgroundColor': string; 'V3Emoji-hoverColor': string; 'V3Emoji-activeColor': string; 'V3Emoji-shadowColor': string; } }//SizeData.json { "small": { "V3Emoji-width": "300px", "V3Emoji-height": "200px", "V3Emoji-fontSize": "14px", "V3Emoji-itemSize": "20px" }, "mid": { "V3Emoji-width": "500px", "V3Emoji-height": "300px", "V3Emoji-fontSize": "16px", "V3Emoji-itemSize": "30px" }, "big": { "V3Emoji-width": "800px", "V3Emoji-height": "400px", "V3Emoji-fontSize": "20px", "V3Emoji-itemSize": "36px" } } //ThemeData.json { "dark":{ "V3Emoji-backgroundColor":"#000", "V3Emoji-fontColor":"#fff", "V3Emoji-hoverColor":"#909090", "V3Emoji-activeColor":"#909090", "V3Emoji-shadowColor":"rgba(255,255,255,.2)" }, "default":{ "V3Emoji-backgroundColor":"#fff", "V3Emoji-fontColor":"#000", "V3Emoji-hoverColor":"#e7e7e7", "V3Emoji-activeColor":"#b6b6b6", "V3Emoji-shadowColor":"rgba(0,0,0,.4)" } }参考设置/example options

通过以下设置将所有选项卡变成中文

https://github.com/ADKcodeXD/Vue3-Emoji.git https://github.com/ADKcodeXD/Vue3-Emoji

许可/Licence

本项目使用MIT Licence，遵循MIT协议进行开源。

【本文地址】

Vue3

Vue3

今日新闻

推荐新闻