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.mzph.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;你需要执行以下操作之一…