A simple chat emoji for vuejs
npm install vue-chat-emoji
using inside component
<template>
<div id="app">
<Emoji />
</div>
</template>
<script>
import { VueChatEmoji, emojis } from 'vue-chat-emoji'
require("vue-chat-emoji/dist/vue-chat-emoji.css");
export default {
components: {
Emoji: VueChatEmoji
}
}
</script>
using globally
import Vue from "vue";
import App from "./App.vue";
import { VueChatEmoji } from 'vue-chat-emoji';
Vue.component("Emoji", VueChatEmoji);
require("vue-chat-emoji/dist/vue-chat-emoji.css");
Vue.config.productionTip = false;
Vue.use(Emoji);
new Vue({
render: h => h(App)
}).$mount("#app");
Name | Description |
---|---|
click |
Emitted when emoji is clicked. |
<template>
<div id="app">
<Emoji @click="selectedEmoji"/>
</div>
</template>
<script>
import { VueChatEmoji, emojis } from 'vue-chat-emoji'
export default {
components: {
Emoji: VueChatEmoji
},
methods: {
selectedEmoji(args) {
console.log(args); /* return {...}*/
}
}
}
</script>
List of methods in emojis
Usage | Description |
---|---|
get() |
List all emojis. Return [{…}]. |
all() |
List all emojis. Return [{…}] |
encodeEmoji() |
Convert emoji character to string. e.g “:birthday_cake:” => “🎂” |
decodeEmoji() |
Convert valid emoji key to character. e.g “🎂” => “:birthday_cake:” |
getRandomEmoji() |
Return random emoji. Return {…} |
findEmojiByKey() |
Return {…} if found and undefined if not found. |
findEmojiByName() |
Return {…} if found and undefined if not found. |
searchEmojiByName() |
Return [{…}] if found and [] if search not found. |
findEmojiByGroup() |
Return [{…}] if found and [] if search not found. |
<template>
<div id="app">
<Emoji />
</div>
</template>
<script>
import { VueChatEmoji, emojis } from 'vue-chat-emoji'
export default {
components: {
Emoji: VueChatEmoji
},
methods: {
getAllEmojis() {
console.log(emojis.all()); // [{...}]
this.emojifyString("Here is your 🎂.") /* => Here is your :birthday_cake:.*/
this.unEmojifyString("Here is your :birthday_cake:.") /* Here is your 🎂.*/
},
unEmojifyString(str) {
console.log(emojis.decodeEmoji(str))
},
emojifyString(str) {
console.log(emojis.encodeEmoji(str));
}
},
mounted() {
this.getAllEmojis();
}
}
</script>
Name | Type | Description |
---|---|---|
backgroundColor |
String |
(Style property) set the emoji container background color. Default: #f5f5f5 or whitesmoke |
radius |
String or Number |
(Style property) Set the emoji container border radius. Default: 8 |
selectedCategory |
String |
Set default emoji category. Default: “Smileys & Emotion” |
color |
String |
Set emoji container color. Default: “#000” |
icon |
String |
Set emoji icon. Default: “f118” |
open |
Boolean |
Hide or show emoji container. Default: false |
v-on:close |
Event |
Emit $event true or false |
Author: vestus-ola
GitHub: https://github.com/vestus-ola/vue-chat-emoji
#vuejs #javascript #vue-js