这篇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)
}