npm i vue3-emoji-picker
App.vue
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 |
<template> <div id="app"> <h1>Vue3 Emoji Picker</h1> <!-- Emoji Picker Component --> <EmojiPicker :native="true" @select="onSelectEmoji" /> <!-- Display selected emoji info --> <div v-if="selectedEmoji"> <h2>Selected Emoji</h2> <p>{{ selectedEmoji.i }} - {{ selectedEmoji.n[0] }}</p> </div> </div> </template> <script lang="ts"> import { defineComponent, ref } from 'vue'; import EmojiPicker from 'vue3-emoji-picker'; import 'vue3-emoji-picker/css'; // Importing CSS styles export default defineComponent({ components: { EmojiPicker }, setup() { // To store the selected emoji data const selectedEmoji = ref(null); // Handler for emoji selection const onSelectEmoji = (emoji: any) => { selectedEmoji.value = emoji; console.log(emoji); }; return { selectedEmoji, onSelectEmoji }; } }); </script> <style scoped> #app { text-align: center; padding: 20px; } h1 { font-size: 2em; } h2 { margin-top: 20px; } p { font-size: 1.2em; } </style> |
