Vue3 使用emoji表情包 emoji-mart-vue-fast

文檔:emoji-mart-vue-fast - npm (npmjs.com)

非常簡單 代碼直接照抄即可

1. 引入

pnpm install emoji-mart-vue-fast

2. 使用

<template><Picker:data="emojiIndex":emojiSize="18":showPreview="false":infiniteScroll="false":i18n="emojiI18n"set="apple"@select="handleEmoji"/>
<template><script setup>
// all emoji sets.
import data from 'emoji-mart-vue-fast/data/all.json'
// Import default CSS
import 'emoji-mart-vue-fast/css/emoji-mart.css'
import { Picker, EmojiIndex } from 'emoji-mart-vue-fast/src'// 定義i18n
const emojiI18n = {search: '搜索',notfound: 'No Emoji Found',categories: {search: '搜索結果',recent: '經常使用',smileys: '表情與情感',people: '人物與身體',nature: '動物與自然',foods: '食物與飲料',activity: '活動',places: '旅行與地理',objects: '物品',symbols: '符號標志',flags: '旗幟',custom: 'Custom',joy: '哭笑'}
}
const emojiIndex = new EmojiIndex(data)
// 選中emoji
const handleEmoji = (e) => {console.log(e)
}
</script>

本文來自互聯網用戶投稿,該文觀點僅代表作者本人,不代表本站立場。本站僅提供信息存儲空間服務,不擁有所有權,不承擔相關法律責任。
如若轉載,請注明出處:http://www.pswp.cn/web/45338.shtml
繁體地址,請注明出處:http://hk.pswp.cn/web/45338.shtml
英文地址,請注明出處:http://en.pswp.cn/web/45338.shtml

如若內容造成侵權/違法違規/事實不符,請聯系多彩編程網進行投訴反饋email:809451989@qq.com,一經查實,立即刪除!

相關文章

【07】分布式事務解決方案

1、事務簡介 事務(Transaction)是訪問并可能更新數據庫中各種數據項的一個程序執行單元(unit)。在關系數據庫中&#xff0c;一個事務由一組SQL語句組成。事務應該具有ACID四個特性&#xff1a;原子性、一致性、隔離性、持久性。任何事務機制在實現時&#xff0c;都應該考慮事務…

J025_斗地主游戲案例開發(簡版)

一、需求描述 完成斗地主游戲的案例開發。 業務&#xff1a;總共有54張牌&#xff1b; 點數&#xff1a;3、4、5、6、7、8、9、10、J、Q、K、A、2 花色&#xff1a;黑桃、紅桃、方片、梅花 大小王&#xff1a;大王、小王 點數分別要組合4種花色&#xff0c;大小王各一張。…

[激光原理與應用-114]:南京科耐激光-激光焊接-焊中檢測-智能制程監測系統IPM介紹 - 18 - 產品宣傳、介紹、產品價值、幫助客戶解決的問題

目錄 一、第一印象 1.1 我是誰&#xff1f;產品是什么&#xff1f;產品在產業鏈中的位置 1.2 公司在產業鏈中的位置&#xff1f;公司簡介&#xff1f; 二、IPM工作原理 2.1 IPM系統組成 2.2 基于激光熔池光學檢測原理 2.3 基于信號特征的檢測原理 三、IPM產品如何與客…

2-17,18,19 -- 關于指針

指針(pointer 聲明指針 int *p;定義指針 int a 4; int *p &a; //指針p是指向變量a的地址的指針指針數組 int *arr[5];數組指針 int (*arr)[5];函數指針 int (*fun)(int,int) // 聲明一個指向函數的指針,這個函數的返回值是int,有兩個int的參數指針的指針 int **p;…

ArkTS學習筆記_封裝復用之@Styles裝飾器

ArkTS學習筆記_封裝復用之Styles裝飾器 背景&#xff1a; 在開發中&#xff0c;如果每個組件的樣式都需要單獨設置&#xff0c;就會出現大量代碼在進行重復樣式設置&#xff0c;雖然可以復制粘貼&#xff0c;但為了代碼簡潔性和后續方便維護&#xff0c;給出的思路是&#xff…

jmeter分布式(四)

一、gui jmeter的gui主要用來調試腳本 1、先gui創建腳本 先做一個腳本 演示&#xff1a;如何做混合場景的腳本&#xff1f; 用211的業務比例 ①啟動數據庫服務 數據庫服務&#xff1a;包括mysql、redis mysql端口默認3306 netstat -lntp | grep 3306處于監聽狀態&#xf…

深入了解MySQL中的innodb_lock_wait_timeout

引言 在數據庫管理中&#xff0c;確保數據的一致性和完整性是至關重要的。MySQL的InnoDB存儲引擎通過行級鎖定機制來實現這一點。然而&#xff0c;當多個事務同時操作數據庫時&#xff0c;可能會出現鎖等待的情況。了解并合理配置innodb_lock_wait_timeout參數&#xff0c;對于…

數據庫第6次作業

內容 1、創建視圖v_emp_dept_id_1&#xff0c;查詢銷售部門的員工姓名和家庭住址 2、創建視圖v_emp_dept&#xff0c;查詢銷售部門員工姓名和家庭住址及部門名稱。 3、創建視圖v_dept_emp_count(dept_name,emp_count,avg_salay)&#xff0c;統計每個部門人數并計算平均工資。 …

Spring 使用log4j

porn.xml 引入依賴 <dependency><groupId>org.apache.logging.log4j</groupId><artifactId>log4j-core</artifactId><version>2.23.1</version></dependency><dependency><groupId>org.apache.logging.log4j<…

解讀網傳《深圳IT圈?新解讀八小時工作制》

網傳深圳IT圈的新解讀八小時工作制 工作時間安排&#xff1a; 10:00-12:0014:00-18:0019:00-21:00 初看&#xff1a;有驚喜 上午開始時間晚&#xff1a;相對于傳統的9點開始&#xff0c;這種安排允許員工有更多的早晨時間&#xff0c;可以用來休息或處理個人事務。下午和晚上分…

typescript新規范及vue3常用的屬性解析【2024】

文章目錄 如在vue中 使用tyescript來規范定義類型解釋一下 < >的意思 定義 了 personList &#xff1a;是個數組 Array 且要告訴里面每一項 結構長什么樣 Array<PersonInter>definepropsvue3中的hooks組件父子組件 方法、數據、相互調用 如在vue中 使用tyescript來…

【LSTM和GRU極簡,和最新的TT也就是狀態】機器學習模型來學習狀態

LSTM&#xff08;長短期記憶網絡&#xff09;中的關鍵參數包括輸入門、遺忘門、輸出門、細胞狀態和隱藏狀態。以下是如何進行推理計算的示例&#xff1a; LSTM參數和公式 輸入門&#xff08;i_t&#xff09;&#xff1a;決定輸入的信息量。 遺忘門&#xff08;f_t&#xff0…

【React Native】做了一個簡約的雷達圖組件

本文目錄 【React Native】做了一個簡約的雷達圖組件獲取組件實現思路用法示例簡易用法自定義美化 結語 【React Native】做了一個簡約的雷達圖組件 最近在使用 react-native 中需要繪制雷達圖&#xff0c;沒有找到合適的小組件&#xff08;大的圖表庫未直接提供&#xff0c;需…

pico+unity3d運行測試方法

一. 發布并運行程序 這個就很簡單&#xff0c;電腦和pico數據庫連接、pico打開開發者模式、運行的時候選擇設備pico 二. pico串流助手 1.需要先下載pico的軟件 PICO Developer Center、并安裝串流助手、這種方式的話&#xff0c;安裝了向日葵的小伙伴可能有沖突、百度一下解…

c#中的特性

在C#中&#xff0c;特性&#xff08;Attributes&#xff09;是一種向程序元素&#xff08;如類、方法、屬性等&#xff09;添加元數據的方式。特性可以用來提供關于程序元素的附加信息&#xff0c;這些信息可以在編譯時和運行時被訪問。 特性主要有以下幾個用途&#xff1a; 提…

手機數據恢復篇:如何從 Android 設備內恢復數據

如何從 Android 內部存儲恢復數據&#xff1f; 要從 Android 內部存儲恢復已刪除的文件&#xff0c;您需要一個 Android 內部存儲恢復應用或程序。請繼續閱讀以獲取可靠的 Android 數據恢復軟件&#xff0c;并讓它幫助您從 Android 手機的內部存儲恢復數據。 是否有可能恢復 An…

Typescript 合并接口

在TypeScript中&#xff0c;合并接口&#xff08;Interface Merging&#xff09;是一種強大的特性&#xff0c;它允許你擴展現有的接口&#xff0c;無論是通過聲明合并還是在同一個聲明塊中直接擴展。這種特性在基于類的面向對象編程中非常有用&#xff0c;但TypeScript的接口合…

4-2 權重衰減

前一節我們描述了過擬合的問題&#xff0c;本節我們將介紹一些正則化模型的技術。 我們總是可以通過去收集更多的訓練數據來緩解過擬合。 但這可能成本很高&#xff0c;耗時頗多&#xff0c;或者完全超出我們的控制&#xff0c;因而在短期內不可能做到。 假設我們已經擁有盡可能…

圖片轉文字的軟件,分享3種不同的類型的軟件!

在信息爆炸的時代&#xff0c;圖片作為一種直觀、生動的信息載體&#xff0c;已經成為我們日常生活中不可或缺的一部分。然而&#xff0c;有時候我們可能需要將圖片中的文字提取出來&#xff0c;以便于編輯、整理或進一步使用。那么&#xff0c;有哪些實用的圖片轉文字軟件可以…

2718. 查詢后矩陣的和

題目描述&#xff1a; 給你一個整數 n 和一個下標從 0 開始的 二維數組 queries &#xff0c;其中 queries[i] [typei, indexi, vali] 。 一開始&#xff0c;給你一個下標從 0 開始的 n x n 矩陣&#xff0c;所有元素均為 0 。每一個查詢&#xff0c;你需要執行以下操作之一…