Vue 3 Emoji
一款简单的 ，还算好看的，基于Vue3编写的表情选择组件。
功能/feature
- 集成文本框 你可以利用双向绑定来获取数据
- 支持自定义配置 可以自定义表情框的大小
- 支持了emoji全量数据以及部分数据的选择
- 支持两种不同的主题
- 支持最近使用表情选项卡
- 支持keep模式 可以不重复渲染
- 支持自定义选项卡 你可以挑选自己喜欢的emoji并放入选项卡
- 支持自定义size 你可以不使用我定义的尺寸，按照自己所需进行尺寸的调整
- 支持自定义主题 你可以通过传入自定义的样式来设置相应的颜色和风格
启动本项目/start this project
git 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
<script setup>
import V3Emoji from 'vue3-emoji'
import 'vue3-emoji/dist/style.css'
</script>
<template>
<div>
<V3Emoji />
</div>
</template>
当然 你可以自定义按钮
<template>
<div>
<V3Emoji >
<div class="my-btn">
btn
</div>
</V3Emoji>
</div>
</template>本组件支持了三种不同的大小
<template>
<div>
<V3Emoji size="big" />
<V3Emoji size="small" />
<V3Emoji size="mid" />
</div>
</template>支持了暗黑主题
<template>
<div>
<V3Emoji theme="dark" />
</div>
</template>支持了最近常用表情(基于localstorage)
<template>
<div>
<V3Emoji :recent="true" />
</div>
</template>通过default-select你可以指定默认的选项卡
<template>
<div>
<V3Emoji default-select="Animals & Nature" />
<!--你可以指定最近使用表情的tab作为默认tab-->
<V3Emoji default-select="recenet" :recent="true" />
</div>
</template><script setup lang="ts">
import V3Emoji from './components/V3Emoji.vue';
const inputText = ref('');
const appendText = (val: string) => {
inputText.value += val;
};
const optionsName = {
'Smileys & Emotion': '笑脸&表情',
'Food & Drink': '食物&饮料'
};
const disableGroup = ['食物&饮料'];
//禁用了食物&饮料的选项卡
</script>
<template>
<V3Emoji :disable-group="disableGroup" :options-name="optionsName" />
</template>keep
如果你需要在使用完表情框后保持原本打开的状态，可以指定keep来开启保持状态
<V3Emoji
:keep="true"
/>fixPos
通过fixpos 可以固定表情弹出框的位置，默认情况下表情弹出框会随着滚动条和屏幕上下移动而变化
<V3Emoji
fix-pos="upright" // or 'upcenter'| 'upleft' |'downright' |'downcenter'|'downleft'
/>customSize
利用customSize 你可以自定义表情框的大小
<script setup lang="ts">
const customSize= {
'V3Emoji-width': '300px',
'V3Emoji-height': '20rem',
'V3Emoji-fontSize': '1rem',
'V3Emoji-itemSize': '50px'
};
</script>
<template>
<div class="test">
<V3Emoji size="big" :custom-size="customSize" />
<p>customSize</p>
</div>
</template>customTab
如果你需要自己自定义一些emoji并且将其放到新的板块中，你可以这么做
<script setup lang="ts">
const customTab= {
我的自定义板块: [
{
emoji: '🍔',
name: '汉堡包'
},
{
emoji: '🍟',
name: '薯条'
}
]
};
</script>
<template>
<div class="test">
<V3Emoji :customTab="customTab" default-select="我的自定义板块" />
<p>customTab</p>
</div>
</template>customIcon
本组件会默认读取数据中的第一个emoji作为默认的icon 你可以通过customIcon来定义下方选择的Icon
<script setup lang="ts">
const customIcon = {
'Smileys & Emotion': '😚',
'Food & Drink': '🍔',
'Animals & Nature': '🐶',
Activities: '🎉',
'Travel & Places': '🚗',
Objects: '💰'
};
</script>
<template>
<div class="test">
<V3Emoji :customIcon="customIcon" />
<p>customIcon</p>
</div>
</template>customTheme
本组件提供了自定义的主题功能，你可以自定义主题色
<script setup lang="ts">
const customTheme= {
'V3Emoji-hoverColor': '#ff5500',
'V3Emoji-activeColor': '#99ff77',
'V3Emoji-shadowColor': 'rgba(255,255,0,0.5)',
'V3Emoji-backgroundColor': '#000000',
'V3Emoji-fontColor': '#ffffff'
};
</script>
<template>
<div class="test">
<V3Emoji size="mid" :custom-theme="customTheme" />
<p>customTheme</p>
</div>
</template>文本框集成使用
本组件集成了一个简单的文本框，你可以通过textArea选项来进行开启他。
textArea的大小随着父容器的变化而变化，所以推荐你最好使用一个div容器对组件进行包裹
<V3Emoji
:textArea="true"
size="big"
/>textarea支持了双向数据绑定，你可以直接使用v-model来进行绑定
<script setup lang="ts">
import V3Emoji from './components/V3Emoji.vue';
const clickEmoji = (val: any) => {
clickEvent.value = val;
console.log(val);
};
const disableGroup = ['食物&饮料'];
const abc = ref('这里是双向绑定的值');
</script>
<template>
<div class="text-area">
<V3Emoji
:disable-group="disableGroup"
@click-emoji="clickEmoji"
v-model="abc"
/>
</div>
</template>配置/Options
| 配置名 | 配置类型 | 默认值 | 说明/备注 |
|---|---|---|---|
| v-model | string | ‘’ | 可以进行数据的双向绑定（需要开启textArea） |
| size | ‘mid’|'small'|'big' | mid | 用于调整整体大小 |
| theme | 'dark'|'default' | default | 主题切换 支持亮色和暗黑主题 |
| manualClose | boolean | false | 设置为true可以手动控制弹出框的关闭 |
| optionsName | - | {} | 翻译原有板块名字 |
| disableGroup | string[] | [] | 禁用某些板块 |
| defaultSelect | string | 'Smileys & Emotion' | 默认选中板块，注意：如果指定了新名字，需要传入新名字 |
| recent | boolean | false | 开启最近使用emoji功能 |
| fulldata | boolean | false | 如果指定为true 那么clickEmoji事件将会传出一个EmojiItem类型的对象 |
| keep | boolean | false | 如果指定为true 那么表情框关闭将不会销毁组件 |
| textArea | boolean | false | 开启文本框功能选项 |
| textAreaOption | Emoji.TextAreaOptions | 见类型定义 | 你可以定义textarea的一些选项 |
| fixPos | 六个值 | FixType | 可以传入一个值来固定表情框的位置 |
| customSize | Emoji.CustomSize | 见类型定义 | 如果指定了相应的自定义大小，那么会将pollup表情选择框的大小重置，没有指定的将使用相应size的默认值 |
| customTheme | Emoji.CustomTheme | 见类型定义 | 自定义主题颜色，支持五个选项的配置，没有指定的依旧会使用指定的theme的默认值 |
| customIcon | Emoji.CustomIcon | 见类型定义 | 自定义tab切换栏的显示 |
| customTab | Emoji.ObjectItem | 见类型定义 | 你可以传入一个对象来指定一个新的选项卡，这个选项卡内可以放置你需要的emoji |
| unicodeVersion | number | 11 | 在某些设备上可能不能兼容高版本的emojiunicode |
| skin | - | none | 暂时无法很好的支持 |
type FixType = 'upleft' | 'upright' | 'upcenter' | 'downleft' | 'downright' | 'downcenter'; //控制表情弹出框的位置方法/Function
| 方法名 | 类型 | 说明 |
|---|---|---|
| closePop | ()=>void | 关闭表情弹出框 |
事件/Events
| 事件名 | 事件类型 | 说明 |
|---|---|---|
| clickEmoji | (val:string|EmojiItem)=>void | 点击emoji触发的事件，可以通过@clickEmoji来接收选择的emoji |
| close | void | 表情框关闭时触发的事件 |
| changeText | (val:string)=>void | 用于接受文本框改变时触发的事件 |
类型定义以及默认值/@types
declare 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
-
通过以下设置将所有选项卡变成中文
<script> const optionsName = { 'Smileys & Emotion': '笑脸&表情', 'Food & Drink': '食物&饮料', 'Animals & Nature': '动物&自然', 'Travel & Places': '旅行&地点', 'People & Body': '人物&身体', Objects: '物品', Symbols: '符号', Flags: '旗帜', Activities: '活动' }; </script> <template> <V3Emoji :options-name="optionsName"/> </template>
Link for npm
https://github.com/ADKcodeXD/Vue3-Emoji.git https://github.com/ADKcodeXD/Vue3-Emoji
许可/Licence
本项目使用MIT Licence，遵循MIT协议进行开源。