Emoji picker for Vue 3
Table of contents
Demo
The live demos are available here:
Installation
With npm
npm i vue-emoticon-picker --saveImport
With an ES6 bundler (via npm)
Use per component
import Emoticon from 'vue-emoticon-picker'
export default {
// ..
emits: ['clickEmoticon'],
components: {
Emoticon,
},
// ...
}Use via <script setup>
import { ref, defineEmits } from 'vue'
const emit = defineEmits(['clickEmoticon'])
// ...
const input = ref('')
const emoticonRef = ref(null);
const handleClickEmoji = (emoji) => {
input.value += emoji;
}Very simple usage, without any CSS defined
You will need two things. A textarea (or an input), where emojis will be injected, and a component declaration. A simple example is provided below.
<template>
<textarea v-model="input"></textarea>
<button type="button" @click="emoticonRef.toggleShow()">:)</button>
<!-- // .... // -->
<Emoticon ref="emoticonRef" @click-emoticon="handleClickEmoji" />
<!-- // .... // -->
</template>{
setup() {
const emoticonRef = ref(null)
return {
emoticonRef
}
},
data() {
return {
input: '',
}
},
methods: {
handleClickEmoji(emoji) {
this.input += emoji
},
},
}License
This work is an open-sourced software licensed under the MIT license.