js 制作qq、微信的表情

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

表情的符号

javascript">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)
}