js 制作qq、微信 的表情

这篇csdn缺少的图片资源可以在“我的资源那下载,有一个zip的包”


表情的符号

export const QQFaceList = [{name: 'weixiao',code: '[微笑]',},{name: 'piezui',code: '[撇嘴]',},{name: 'se',code: '[色]',},{name: 'fadai',code: '[发呆]',},{name: 'deyi',code: '[得意]',},{name: 'liulei',code: '[流泪]',},{name: 'haixiu',code: '[害羞]',},{name: 'bizui',code: '[闭嘴]',},{name: 'shui',code: '[睡]',},{name: 'daku',code: '[大哭]',},{name: 'ganga',code: '[尴尬]',},{name: 'fanu',code: '[发怒]',},{name: 'tiaopi',code: '[调皮]',},{name: 'ciya',code: '[呲牙]',},{name: 'jingya',code: '[惊讶]',},{name: 'nanguo',code: '[难过]',},{name: 'ku',code: '[酷]',},{name: 'lenghan',code: '[冷汗]',},{name: 'zhuakuang',code: '[抓狂]',},{name: 'tu',code: '[吐]',},{name: 'touxiao',code: '[偷笑]',},{name: 'yukuai',code: '[愉快]',},{name: 'baiyan',code: '[白眼]',},{name: 'aoman',code: '[傲慢]',},{name: 'jie',code: '[饥饿]',},{name: 'kun',code: '[困]',},{name: 'jingkong',code: '[惊恐]',},{name: 'liuhan',code: '[流汗]',},{name: 'hanxiao',code: '[憨笑]',},{name: 'youxian',code: '[悠闲]',},{name: 'fendou',code: '[奋斗]',},{name: 'zhouma',code: '[咒骂]',},{name: 'yiwen',code: '[疑问]',},{name: 'xu',code: '[嘘]',},{name: 'yun',code: '[晕]',},{name: 'fengle',code: '[疯了]',},{name: 'shuai',code: '[衰]',},{name: 'kulou',code: '[骷髅]',},{name: 'qiaoda',code: '[敲打]',},{name: 'zaijian',code: '[再见]',},{name: 'cahan',code: '[擦汗]',},{name: 'koubi',code: '[抠鼻]',},{name: 'guzhang',code: '[鼓掌]',},{name: 'choudale',code: '[糗大了]',},{name: 'huaixiao',code: '[坏笑]',},{name: 'zuohengheng',code: '[左哼哼]',},{name: 'youhengheng',code: '[右哼哼]',},{name: 'haqie',code: '[哈欠]',},{name: 'bishi',code: '[鄙视]',},{name: 'weiqu',code: '[委屈]',},{name: 'kuaikule',code: '[快哭了]',},{name: 'yinxian',code: '[阴险]',},{name: 'qinqin',code: '[亲亲]',},{name: 'xia',code: '[吓]',},{name: 'kelian',code: '[可怜]',},{name: 'caidao',code: '[菜刀]',},{name: 'xigua',code: '[西瓜]',},{name: 'pijiu',code: '[啤酒]',},{name: 'lanqiu',code: '[篮球]',},{name: 'pingpang',code: '[乒乓]',},{name: 'kafei',code: '[咖啡]',},{name: 'fan',code: '[饭]',},{name: 'zhutou',code: '[猪头]',},{name: 'meigui',code: '[玫瑰]',},{name: 'diaoxie',code: '[凋谢]',},{name: 'zuichun',code: '[嘴唇]',},{name: 'aixin',code: '[爱心]',},{name: 'xinsui',code: '[心碎]',},{name: 'dangao',code: '[蛋糕]',},{name: 'shandian',code: '[闪电]',},{name: 'zhadan',code: '[炸弹]',},{name: 'dao',code: '[刀]',},{name: 'zuqiu',code: '[足球]',},{name: 'piaochong',code: '[瓢虫]',},{name: 'bianbian',code: '[便便]',},{name: 'yueliang',code: '[月亮]',},{name: 'taiyang',code: '[太阳]',},{name: 'liwu',code: '[礼物]',},{name: 'yongbao',code: '[拥抱]',},{name: 'qiang',code: '[强]',},{name: 'ruo',code: '[弱]',},{name: 'woshou',code: '[握手]',},{name: 'shengli',code: '[胜利]',},{name: 'baoquan',code: '[抱拳]',},{name: 'gouyin',code: '[勾引]',},{name: 'quantou',code: '[拳头]',},{name: 'chajin',code: '[差劲]',},{name: 'aini',code: '[爱你]',},{name: 'NO',code: '[NO]',},{name: 'OK',code: '[OK]',},{name: 'aiqing',code: '[爱情]',},{name: 'feiwen',code: '[飞吻]',},{name: 'tiaotiao',code: '[跳跳]',},{name: 'fadou',code: '[发抖]',},{name: 'ouhuo',code: '[怄火]',},{name: 'zhuanquan',code: '[转圈]',},{name: 'ketou',code: '[磕头]',},{name: 'huitou',code: '[回头]',},{name: 'tiaosheng',code: '[跳绳]',},{name: 'touxiang',code: '[投降]',},{name: 'jidong',code: '[激动]',},{name: 'luanwu',code: '[乱舞]',},{name: 'xianwen',code: '[献吻]',},{name: 'zuotaiji',code: '[左太极]',},
]export const emojiList = ['\\ue415','\\ue056','\\ue057','\\ue414','\\ue405','\\ue106','\\ue418','\\ue417','\\ue40d','\\ue404','\\ue40a','\\ue105','\\ue409','\\ue40e','\\ue402','\\ue108','\\ue403','\\ue058','\\ue407','\\ue401','\\ue40f','\\ue40b','\\ue406','\\ue413','\\ue411','\\ue412','\\ue410','\\ue107','\\ue059','\\ue416','\\ue408','\\ue40c','\\ue11a','\\ue10c','\\ue022','\\ue023','\\ue329','\\ue32e','\\ue335','\\ue337','\\ue336','\\ue13c','\\ue331','\\ue03e','\\ue11d','\\ue05a','\\ue00e','\\ue421','\\ue00d','\\ue011','\\ue22e','\\ue22f','\\ue231','\\ue230','\\ue00f','\\ue14c','\\ue111','\\ue425','\\ue001','\\ue002','\\ue005','\\ue004','\\ue04e','\\ue11c','\\ue003','\\ue04a','\\ue04b','\\ue049','\\ue048','\\ue04c','\\ue13d','\\ue43e','\\ue04f','\\ue052','\\ue053','\\ue524','\\ue52c','\\ue52a','\\ue531','\\ue050','\\ue527','\\ue051','\\ue10b','\\ue52b','\\ue52f','\\ue109','\\ue01a','\\ue52d','\\ue521','\\ue52e','\\ue055','\\ue525','\\ue10a','\\ue522','\\ue054','\\ue520','\\ue032','\\ue303','\\ue307','\\ue308','\\ue437','\\ue445','\\ue11b','\\ue448','\\ue033','\\ue112','\\ue325','\\ue312','\\ue310','\\ue126','\\ue008','\\ue03d','\\ue00c','\\ue12a','\\ue009','\\ue145','\\ue144','\\ue03f','\\ue116','\\ue10f','\\ue101','\\ue13f','\\ue12f','\\ue311','\\ue113','\\ue30f','\\ue42b','\\ue42a','\\ue018','\\ue016','\\ue014','\\ue131','\\ue12b','\\ue03c','\\ue041','\\ue322','\\ue10e','\\ue43c','\\ue323','\\ue31c','\\ue034','\\ue035','\\ue045','\\ue047','\\ue30c','\\ue044','\\ue120','\\ue33b','\\ue33f','\\ue344','\\ue340','\\ue147','\\ue33a','\\ue34b','\\ue345','\\ue01d','\\ue10d','\\ue136','\\ue435','\\ue252','\\ue132','\\ue138','\\ue139','\\ue332','\\ue333','\\ue24e','\\ue24f','\\ue537',
]

这样使用

<style lang="less" scoped>.qEmoji {background: url('/src/components/emoji/images/1.png');height: 25px;width: 25px;margin: 0 auto;}.eList {background: url('/src/components/emoji/images/2.png');height: 25px;width: 25px;margin: 0 auto;}
</style><a-tabs v-model:activeKey="activeKey" tab-position="top" :animated="true"><a-tab-pane key="1" tab="QQ" style="height: 400px;"><a-row><a-col v-for="(item, index) in QQFaceList" :span="2" :key="index"><divclass="qEmoji":style="{ 'background-position': emojiPosition(index) }"@click="setEmoji(item.code)"></div></a-col></a-row></a-tab-pane><a-tab-pane key="2" tab="微信" style="height: 400px;"><a-row><a-col v-for="(item, index) in emojiList" :span="2" :key="index"><divclass="eList"@click="setEmoji(item)":style="{ 'background-position': emojiPosition(index) }"></div></a-col></a-row></a-tab-pane></a-tabs>----------------------------------------------------------------------------------------------import { QQFaceList } from '@/components/emoji/emoji.ts'
import { emojiList } from '@/components/emoji/emoji.ts'const emojiPosition = (index: any) => {return '-' + (index % 15) * 29 + 'px -' + parseInt(index / 15) * 29 + 'px'
}const setEmoji = (emoji: string) => {console.log('emoji=', emoji)
}

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

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器学习/算法工程师面试题目与答案-数学基础部分

机器学习/算法工程师面试题目--数学基础部分 一、数学基础1、微积分SGD,Momentum,Adagard,Adam原理L1不可导的时候该怎么办sigmoid函数特性 2、统计学&#xff0c;概率论求 Max(a, b) 期望拿更长的玫瑰花的最好策略最大化工作天数的员工数切比雪夫不等式随机截成三段组成三角形…

信号分解 | RLMD(鲁棒性局部均值分解)-Matlab

分解效果 RLMD(鲁棒性局部均值分解) RLMD(鲁棒性局部均值分解)-Matlab 代码实现 % %% 清除所有变量 关闭窗口 clc clear all close all%% 导入数据 % data = xlsread(Data.xlsx);%% 输入信号%% RLMD分解 %参数进行设置 % options.display =

SpringCloud系列(20)--Ribbon的简介及使用

1、Ribbon的简介 Spring Cloud Ribbon是基于Netflix Ribboh实现的一套客户端负载均衡的工具&#xff0c;简单的说&#xff0c;Ribbon是Netflix发布的开源项目&#xff0c;主要功能是提供客户端的软件负载均衡算法和服务调用。Ribbon客户端组件提供一系列完善的配置项如连接超时…

ETL中元数据处理的方式

ETLCloud平台是用于处理从数据抽取、转换、加载到持续数据捕获等一系列数据管理活动。除此之外还支持微服务治理与快速开发&#xff0c;并且具备数据库监听功能&#xff0c;能够以不同的方式监听并同步源数据库表数据到目标系统&#xff0c;比如直接传输、通过ETL流程处理或者传…

交直流充电桩检测的基础知识

交直流充电桩检测是电动汽车充电设施的重要组成部分&#xff0c;其目的是确保充电桩的正常运行&#xff0c;保障电动汽车的安全充电。以下是关于交直流充电桩检测的一些基础知识。 我们需要了解什么是交直流充电桩&#xff0c;简单来说&#xff0c;交直流充电桩是一种为电动汽车…

二维数组打印菱形(C语言)

一、N-S流程图&#xff1b; 二、运行结果&#xff1b; 三、源代码&#xff1b; # define _CRT_SECURE_NO_WARNINGS # include <stdio.h>int main() {//初始化变量值&#xff1b;char arr[5][5] { { , , *, , }, { , *, *, *, },{*, *, *, *, *}, { , *, *, *, …

使用NGINX做局域网内 浏览器直接访问链接 拓展外网链接访问本地

达成目的功能&#xff1a; 在本地服务的一个文件路径下&#xff0c;局域网内用ip和路径名访问到对应的地址&#xff1b;如 10.5.9.0/v1 即可访问到 某个固定本地地址目录 V1下&#xff0c;名为index.html的文件。前言 NGINX 是一个非常流行的开源 Web 服务器和反向代理服务器…

社交媒体数据恢复:Reddit

Reddit是一個娛樂、社交及新聞網站&#xff0c;註冊使用者可以將文字或連結在網站上發布&#xff0c;使它基本上成為了一個電子佈告欄系統。註冊使用者可以對這些貼文進行投票&#xff0c;結果將被用來進行排名和決定它在首頁或子頁的位置。網站上的內容分類被稱為「subreddit」…

Springboot+Vue项目-基于Java+MySQL的智慧校园管理系统(附源码+演示视频+LW)

大家好&#xff01;我是程序猿老A&#xff0c;感谢您阅读本文&#xff0c;欢迎一键三连哦。 &#x1f49e;当前专栏&#xff1a;Java毕业设计 精彩专栏推荐&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb;&#x1f447;&#x1f3fb; &#x1f380; Python毕业设计 &…

计算机网络复习(应用层)

一、概述 1、应用层对应用程序的通信提供服务 2、应用层协议定义了如下内容&#xff1a; 报文类型是请求还是响应各种报文类型语法字段的定义时序 3、应用层功能&#xff1a; 文件传输、访问管理 电子邮件 虚拟终端 查询服务和远程作业登录 二、网络服务模型 1、C/S模…

【研发管理】产品经理知识体系-产品设计与开发工具

导读&#xff1a;产品设计与开发工具的重要性体现在多个方面&#xff0c;它们对于产品的成功开发、质量提升以及市场竞争力都具有至关重要的影响。产品设计工具可以帮助设计师更高效地创建和优化产品原型。开发工具在产品开发过程中发挥着至关重要的作用。产品设计与开发工具还…

PotatoPie 4.0 实验教程(25) —— FPGA实现摄像头图像直方图均衡变换

图像的直方图均衡是什么&#xff1f; 图像的直方图均衡是一种用于增强图像对比度的图像处理技术。在直方图均衡中&#xff0c;图像的像素值被重新分配&#xff0c;以使得图像的直方图变得更均匀&#xff0c;即各个像素值的分布更加平衡。这意味着直方图中每个像素值的频率大致…

AMBA-CHI协议详解(二)

《AMBA 5 CHI Architecture Specification》 文章目录 2.1 Channels综述2.2 Channel域段2.2.1 request fields2.2.2 Response fields2.2.3 Snoop request fields2.2.4 Data fields 2.3 事务结构2.3.1 Read transactions2.3.1.1 Allocating Read2.3.1.2 Non-allocating Read 2.…

Spring Boot 的文件配置

SpringBoot的配置文件,有三种格式 1.properties 2.yaml 3.yml(yaml的简写) 这里主要介绍1和3格式的。 在项目中,同时存在properties和yml配置文件, properties的优先级更高 同时存在时,两个文件都生效 如果两个文件中,都包含同一个配置,以properties为主。 properties的配置…

深入解析AI绘画算法:从GANs到VAEs

&#x1f49d;&#x1f49d;&#x1f49d;欢迎莅临我的博客&#xff0c;很高兴能够在这里和您见面&#xff01;希望您在这里可以感受到一份轻松愉快的氛围&#xff0c;不仅可以获得有趣的内容和知识&#xff0c;也可以畅所欲言、分享您的想法和见解。 推荐:「stormsha的主页」…

人工智能底层自行实现篇3——逻辑回归(下)

3. 代码实现 接上一篇文章 3.1 问题背景 应用案例背景 假设我们有一个数据集&#xff0c;包含患者的多种生理指标&#xff08;如年龄、性别、体重指数&#xff08;BMI&#xff09;、血糖水平等&#xff09;以及他们是否被诊断为糖尿病&#xff08;是或否&#xff09;。我们的…

Vue3 el-table 动态高度(element-plus)

先回顾一下vue2element-ui的策略 export default (config) > {const {subtractHeight 250,} config;return {data() {return {subtractHeight,// 列表高度tableHeight: ${document.body.clientHeight - this.subtractHeight}px,};},created() {window.addEventListener(r…

RUST学习过程

一、基础知识&#xff1a; todo!&#xff1a;这个宏用来标记未实现功能。可以不写retuen的写法(if/else不能写分号&#xff0c;break带分号&#xff0c;loop写不写看情况)&#xff1a; fn fib(n: u32) -> u32 {if n < 2 {// The base case.1} else {// The recursive c…

vue-router学习9:过渡动效transition

<transition> 组件 <transition> 是 Vue 提供的一个内置组件&#xff0c;它可以为被包裹的元素或组件添加进入、离开和列表的过渡效果。当包裹的元素或组件的状态改变时&#xff08;例如&#xff0c;v-if 的条件变化或路由切换&#xff09;&#xff0c;<transi…

(python)动态规划

前言 曾经有一位叫做小明的年轻人,他生活在一个被困在连绵不断的山脉中的村庄里。这座村庄每年都会受到洪水的威胁,而村民们只能通过一条崎岖而危险的小路逃离洪水的侵袭。小明决定解决这个问题。他花了很长时间研究了地形图和洪水的模式,最终他发现了一种方法:他可以在山脚…