vue 引入 emoji 表情包

vue 引入 emoji 表情包

  • 一、安装
  • 二、组件内使用

在这里插入图片描述

一、安装

npm install --save emoji-mart-vue

二、组件内使用

import { Picker } from "emoji-mart-vue"; //引入组件

<picker :include="['people','Smileys']" :showSearch="false" :showPreview="false" :showCategories="false" @select="addEmoji" />

 
components: { //注册组件,不能全局挂载
    Picker
}
addEmoji(e){
    this.content += e.native;
},

css 消除文字
.emoji-mart[data-v-7bc71df8] {
  font-family: -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  display: -ms-flexbox;
  display: flex;
  -ms-flex-direction: column;
  flex-direction: column;
  height: 420px;
  color: #ffffff !important;
  border: 1px solid #d9d9d9;
  border-radius: 5px;
  background: #fff;

链接: https://www.cnblogs.com/majiayin/p/15797456.html
链接: https://blog.csdn.net/ziyi813/article/details/122987501

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:/a/637825.html

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

操作系统中的内存管理

虚拟内存 操作系统会提供一种机制&#xff0c;将不同进程的虚拟地址和不同内存的物理地址映射起来。如果程序要访问虚拟地址的时候&#xff0c;由操作系统转换成不同的物理地址&#xff0c;这样不同的进程运行的时候&#xff0c;写入的是不同的物理地址&#xff0c;这样就不会冲…

【JavaEE进阶】——Spring Web MVC (响应)

目录 &#x1f6a9;学习Spring MVC &#x1f388;返回静态网页 &#x1f388;返回数据ResponseBody &#x1f388;返回html代码片段 &#x1f388;返回JSON &#x1f388;设置状态码 &#x1f388;设置Header &#x1f6a9;学习Spring MVC 既然是 Web 框架, 那么当⽤⼾在…

ORA-01012: not logged on

问题描述 明明已经shutdown immediate一致性关库&#xff0c;但是查进程时发现oracle进程依然存在。sqlplus / as sysdba登录提示ORA-01012: not logged on报错&#xff0c;着重强调&#xff0c;服务器上就一个实例。 分析过程 查看进程 我通常会在shutdown immediate之后查…

黄石首家Pearson VUE国际认证考试中心落户湖北理工学院

Pearson VUE 作为 Pearson 集团的专门从事计算机化考试服务的公司&#xff0c;到目前为止&#xff0c;已在全世界165 个国家授权了 4400 多个考试中心以及超过 230 家 PVUE 自有考试中心&#xff0c;其中在中国的有三百多个授权考点和 4 个自有考试中心。Pearson VUE 以其技术和…

Python模块、包和异常处理

大家好&#xff0c;在当今软件开发领域&#xff0c;Python作为一种简洁、易读且功能强大的编程语言&#xff0c;被广泛应用于各种领域。作为一名测试开发工程师&#xff0c;熟练掌握Python的模块、包和异常处理是提高代码可维护性和错误处理能力的关键。本文将和大家一起探讨Py…

QT--将编译程序打包成可安装执行文件方法记录

QT–将编译程序打包成可安装执行文件 文章目录 QT--将编译程序打包成可安装执行文件前言一、下载inno setup compiler工具并安装&#xff0c;然后&#xff0c;打开打包工具执行流程二、设置中文语言三、流程结束后需要修改脚本&#xff0c;否则&#xff0c;创建的快捷方式不是编…

web前端项目已有阿里巴巴图标基础上,再次导入阿里巴巴图标的方法

如果是第一次导入阿里巴巴图标请参考: vue项目引入阿里云图标_vue引用阿里云图标fontclass-CSDN博客 本文主要想讲在项目原有阿里巴巴图标基础上,再次导入阿里巴巴图标的解决办法: 1.iconfont.json对应修改就行,这个简单一看就明白; 2.iconfont.js主要改动<symbol><…

SpringBoot基础详解

文章目录 SpringBoot简介入门案例入门案例搭建基于SpringBoot官网创建项目SpringBoot项目快速启动 SpringBoot概述起步依赖默认配置 基础配置配置文件格式修改服务器端口SpringBoot配置文件加载顺序 yamlyaml语法规则yaml数组数据yaml数据读取 多环境开发配置多环境启动配置多环…

Python01:初入Python(Mac)

Python环境准备 下载Python&#xff1a;官网https://www.python.org/ 下载PyCharm&#xff1a;官网https://www.jetbrains.com/pycharm/download Python与PyCharm的关系 Python&#xff08;解释器&#xff09;&#xff1a;机器语言—>翻译人员–>翻译成电脑能读懂的 PyC…

//TODO 注释的作用

// TODO 用来标记某处&#xff0c;表示该处含有待办事项&#xff08;尚未解决&#xff09;。其设计本意只是提醒开发者注意&#xff0c;除了代码高亮之外&#xff0c;还可以借助编辑器实现快速定位。 如何使用&#xff1f; 直接在双斜杠后面加 TODO 或者 todo 即可&#xff0c…

opencv cuda win10

首先需要安装CUDA和cuDNN&#xff0c;不再赘述 下载对应的opencv和opencv_contrib 打开CMakeGUI&#xff0c;填入下载的路径和生成的路径 再点config configure完后会出现 在search栏修改以下&#xff1a; 1.modules路径 2.cuda 3. opencv_world 4.nonfree 5.取消勾选tes…

石油化工巡检机器人:应对挑战的创新力量

在石油化工领域&#xff0c;安全始终是高悬的达摩克利斯之剑。人工巡检面临诸多痛点&#xff0c;如高危环境对人身安全的巨大威胁&#xff0c;复杂工况下难以做到全面细致监测&#xff0c;对有害气体检测存在滞后性&#xff0c;还有恶劣天气对巡检工作的严重干扰。而这些痛点&a…

探索生态农业,守护绿色家园

在繁忙的都市生活中&#xff0c;我们往往忽略了与自然和谐相处的重要性。而生态农业&#xff0c;正是让我们重拾与大自然亲密关系的桥梁。通过采用生态友好的耕作方式&#xff0c;生态农业不仅能够提供健康、营养的农产品&#xff0c;还能够保护生态环境&#xff0c;实现人与自…

Cesium 开发大屏数据可视化模板 开箱即用 无偿贡献

下载地址&#xff1a;李鑫/cesium大屏数据可视化https://gitee.com/bujieqingfeng/cesium_data_visual 项目预览&#xff1a; 对您有用的话受累点个 ‘Star’

安卓数据存储(键值对、数据库、存储卡、应用组件Application、共享数据)

键值对 此小节介绍Android的键值对存储方式的使用方法&#xff0c;其中包括&#xff1a;如何将数据保存到共享参数&#xff0c;如何从共享参数读取数据&#xff0c;如何使用共享参数实现登陆页面的记住密码功能&#xff0c;如何使用Jetpack集成的数据仓库。 共享参数的用法 …

ESP-IDF使用Button组件实现按键检测的功能

ESP32使用Button组件实现按键检测的功能 ESP-IDF 组件管理LED 组件简介测试button组件写在最后 ESP-IDF 组件管理 IDF 组件管理器工具用于下载 ESP-IDF CMake 项目的依赖项&#xff0c;该下载在 CMake 运行期间自动完成。IDF 组件管理器可以从自动从组件注册表 或 Git 仓库获取…

【数据结构与算法】之堆及其实现!

目录 1、堆的概念及结构 2、堆的实现 2.1 堆向下和向上调整算法 2.2 堆的创建 2.3 建堆时间复杂度 2.4 堆的插入 2.5 堆的删除 2.6 完整代码 3、完结散花 个人主页&#xff1a;秋风起&#xff0c;再归来~ 数据结构与算法 个人格言&#…

ACM实训第十七天

Is It A Tree? 问题 考试时应该做不出来&#xff0c;果断放弃 树是一种众所周知的数据结构&#xff0c;它要么是空的(null, void, nothing)&#xff0c;要么是一个或的集合满足以下属性的节点之间有向边连接的节点较多。 •只有一个节点&#xff0c;称为根节点&#xff0c;它…

【设计模式深度剖析】【2】【创建型】【工厂方法模式】

&#x1f448;️上一篇:单例模式 | 下一篇:抽象工厂模式&#x1f449;️ 目录 工厂方法模式概览工厂方法模式的定义英文原话直译 工厂方法模式的4个角色抽象工厂&#xff08;Creator&#xff09;角色具体工厂&#xff08;Concrete Creator&#xff09;角色抽象产品&#x…