vue中使用微信聊天表情（vue2x版本）

1、先准备好表情数据,新建emjoydata.js文件。

    export const emojisAmap = {"微笑": "emojis_0","撇嘴": "emojis_1","色": "emojis_2","发呆": "emojis_3","得意": "emojis_4","流泪": "emojis_5","害羞": "emojis_6","闭嘴": "emojis_7","睡": "emojis_8","大哭": "emojis_9","尴尬": "emojis_10","发怒": "emojis_11","调皮": "emojis_12","呲牙": "emojis_13","惊讶": "emojis_14","难过": "emojis_15","酷": "emojis_16","囧": "emojis_17","抓狂": "emojis_18","吐": "emojis_19","偷笑": "emojis_20","愉快": "emojis_21","白眼": "emojis_22","傲慢": "emojis_23","饥饿": "emojis_24","困": "emojis_25","惊恐": "emojis_26","流汗": "emojis_27","憨笑": "emojis_28","悠闲": "emojis_29","奋斗": "emojis_30","咒骂": "emojis_31","疑问": "emojis_32","嘘": "emojis_33","晕": "emojis_34","疯了": "emojis_35","衰": "emojis_36","骷髅": "emojis_37","敲打": "emojis_38","再见": "emojis_39","擦汗": "emojis_40","抠鼻": "emojis_41","鼓掌": "emojis_42","糗大了": "emojis_43","坏笑": "emojis_44","左哼哼": "emojis_45","右哼哼": "emojis_46","哈欠": "emojis_47","鄙视": "emojis_48","委屈": "emojis_49","快哭了": "emojis_50","阴险": "emojis_51","亲亲": "emojis_52","吓": "emojis_53","可怜": "emojis_54","菜刀": "emojis_55","西瓜": "emojis_56","啤酒": "emojis_57","篮球": "emojis_58","乒乓": "emojis_59","咖啡": "emojis_60","饭": "emojis_61","猪头": "emojis_62","玫瑰": "emojis_63","凋谢": "emojis_64","嘴唇": "emojis_65","爱心": "emojis_66","心碎": "emojis_67","蛋糕": "emojis_68","闪电": "emojis_69","炸弹": "emojis_70","刀": "emojis_71","足球": "emojis_72","瓢虫": "emojis_73","便便": "emojis_74","月亮": "emojis_75","太阳": "emojis_76","礼物": "emojis_77","拥抱": "emojis_78","强": "emojis_79","弱": "emojis_80","握手": "emojis_81","胜利": "emojis_82","抱拳": "emojis_83","勾引": "emojis_84","拳头": "emojis_85","差劲": "emojis_86","爱你": "emojis_87","NO": "emojis_88","OK": "emojis_89","爱情": "emojis_90","飞吻": "emojis_91","跳跳": "emojis_92","发抖": "emojis_93","怄火": "emojis_94","转圈": "emojis_95","磕头": "emojis_96","回头": "emojis_97","跳绳": "emojis_98","右太极": "emojis_104","激动": "emojis_100","乱舞": "emojis_101","献吻": "emojis_102","左太极": "emojis_103","投降": "emojis_99"};export const emojisBmap = {"😁": "emojib_0","😷": "emojib_1","😂": "emojib_2","😝": "emojib_3","😳": "emojib_4","😱": "emojib_5","😔": "emojib_6","😒": "emojib_7","[嘿哈]": "emojib_8","[捂脸]": "emojib_9","[奸笑]": "emojib_10","[机智]": "emojib_11","[皱眉]": "emojib_12","[耶]": "emojib_13","👻": "emojib_14","🙏": "emojib_15","💪": "emojib_16","🎉": "emojib_17","🎁": "emojib_18","[红包]": "emojib_19","[鸡]": "emojib_101","😊": "emojib_21","😃": "emojib_22","☺": "emojib_23","😉": "emojib_24","😍": "emojib_25","😘": "emojib_26","😚": "emojib_27","😬": "emojib_28","😌": "emojib_29","😜": "emojib_30","😏": "emojib_31","😓": "emojib_32","😞": "emojib_33","😖": "emojib_34","😢": "emojib_39","😰": "emojib_36","😨": "emojib_37","😣": "emojib_38","😭": "emojib_40","😵": "emojib_41","😠": "emojib_42","😡": "emojib_43","😪": "emojib_44","👿": "emojib_45","👽": "emojib_46","❤": "emojib_47","💔": "emojib_48","💘": "emojib_49","✨": "emojib_50","⭐": "emojib_51","❗": "emojib_52","❓": "emojib_53","💤": "emojib_54","💦": "emojib_55","🎵": "emojib_56","🔥": "emojib_57","💩": "emojib_58","👍": "emojib_59","👎": "emojib_60","👊": "emojib_61","✌": "emojib_62","👆": "emojib_63","👇": "emojib_64","👉": "emojib_65","👈": "emojib_66","☝": "emojib_67","💏": "emojib_68","💑": "emojib_69","👦": "emojib_70","👧": "emojib_71","👩": "emojib_72","👨": "emojib_73","👼": "emojib_74","💀": "emojib_75","💋": "emojib_76","☀": "emojib_77","☔": "emojib_78","☁": "emojib_79","⛄": "emojib_80","🌙": "emojib_81","⚡": "emojib_82","🌊": "emojib_83","🐱": "emojib_84","🐶": "emojib_85","🐭": "emojib_86","🐹": "emojib_87","🐰": "emojib_88","🐺": "emojib_89","🐸": "emojib_90","🐯": "emojib_91","🐨": "emojib_92","🐻": "emojib_93","🐷": "emojib_94","🐮": "emojib_95","🐗": "emojib_96","🐵": "emojib_97","🐴": "emojib_98","🐍": "emojib_99","🐦": "emojib_100","🐧": "emojib_102","🐛": "emojib_103","🐙": "emojib_104","🐠": "emojib_105","🐳": "emojib_106","🐬": "emojib_107","🌹": "emojib_108","🌺": "emojib_109","🌴": "emojib_110","🌵": "emojib_111","💝": "emojib_112","🎃": "emojib_113","🎅": "emojib_114","🎄": "emojib_115","🔔": "emojib_116","🎈": "emojib_117","💿": "emojib_118","📷": "emojib_119","🎥": "emojib_120","💻": "emojib_121","📺": "emojib_122","☎": "emojib_123","🔓": "emojib_124","🔒": "emojib_125","🔑": "emojib_126","🔨": "emojib_127","💡": "emojib_128","📫": "emojib_129","🛀": "emojib_130","💰": "emojib_131","💣": "emojib_132","🔫": "emojib_133","💊": "emojib_134","🏈": "emojib_135","🏀": "emojib_136","⚽": "emojib_137","⚾": "emojib_138","⛳": "emojib_139","🏆": "emojib_140","👾": "emojib_141","🎤": "emojib_142","🎸": "emojib_143","👙": "emojib_144","👑": "emojib_145","🌂": "emojib_146","👜": "emojib_147","💄": "emojib_148","💍": "emojib_149","💎": "emojib_150","☕": "emojib_151","🍺": "emojib_152","🍻": "emojib_153","🍸": "emojib_154","🍔": "emojib_155","🍟": "emojib_156","🍝": "emojib_157","🍣": "emojib_158","🍜": "emojib_159","🍳": "emojib_160","🍦": "emojib_161","🎂": "emojib_162","🍅": "emojib_163","✈": "emojib_164","🚀": "emojib_165","🚲": "emojib_166","🚄": "emojib_167","⚠": "emojib_168","🏁": "emojib_169","🚹": "emojib_170","🚺": "emojib_171","⭕": "emojib_172","✖": "emojib_173","©": "emojib_174","®": "emojib_175","™": "emojib_176","[發]": "emojib_177","[小狗]": "emojib_85"}export const emojiReg = /\ud83d\ude01|\ud83d\ude37|\ud83d\ude02|\ud83d\ude1d|\ud83d\ude33|\ud83d\ude31|\ud83d\ude14|\ud83d\ude12|\ud83d\udc7b|\ud83d\ude4f|\ud83d\udcaa|\ud83c\udf89|\ud83c\udf81|\ud83d\ude0a|\ud83d\ude03|\u263a|\ud83d\ude09|\ud83d\ude0d|\ud83d\ude18|\ud83d\ude1a|\ud83d\ude2c|\ud83d\ude0c|\ud83d\ude1c|\ud83d\ude0f|\ud83d\ude13|\ud83d\ude1e|\ud83d\ude16|\ud83d\ude22|\ud83d\ude30|\ud83d\ude28|\ud83d\ude23|\ud83d\ude2d|\ud83d\ude35|\ud83d\ude20|\ud83d\ude21|\ud83d\ude2a|\ud83d\udc7f|\ud83d\udc7d|\u2764|\ud83d\udc94|\ud83d\udc98|\u2728|\u2b50|\u2757|\u2753|\ud83d\udca4|\ud83d\udca6|\ud83c\udfb5|\ud83d\udd25|\ud83d\udca9|\ud83d\udc4d|\ud83d\udc4e|\ud83d\udc4a|\u270c|\ud83d\udc46|\ud83d\udc47|\ud83d\udc49|\ud83d\udc48|\u261d|\ud83d\udc8f|\ud83d\udc91|\ud83d\udc66|\ud83d\udc67|\ud83d\udc69|\ud83d\udc68|\ud83d\udc7c|\ud83d\udc80|\ud83d\udc8b|\u2600|\u2614|\u2601|\u26c4|\ud83c\udf19|\u26a1|\ud83c\udf0a|\ud83d\udc31|\ud83d\udc36|\ud83d\udc2d|\ud83d\udc39|\ud83d\udc30|\ud83d\udc3a|\ud83d\udc38|\ud83d\udc2f|\ud83d\udc28|\ud83d\udc3b|\ud83d\udc37|\ud83d\udc2e|\ud83d\udc17|\ud83d\udc35|\ud83d\udc34|\ud83d\udc0d|\ud83d\udc26|\ud83d\udc27|\ud83d\udc1b|\ud83d\udc19|\ud83d\udc20|\ud83d\udc33|\ud83d\udc2c|\ud83c\udf39|\ud83c\udf3a|\ud83c\udf34|\ud83c\udf35|\ud83d\udc9d|\ud83c\udf83|\ud83c\udf85|\ud83c\udf84|\ud83d\udd14|\ud83c\udf88|\ud83d\udcbf|\ud83d\udcf7|\ud83c\udfa5|\ud83d\udcbb|\ud83d\udcfa|\u260e|\ud83d\udd13|\ud83d\udd12|\ud83d\udd11|\ud83d\udd28|\ud83d\udca1|\ud83d\udceb|\ud83d\udec0|\ud83d\udcb0|\ud83d\udca3|\ud83d\udd2b|\ud83d\udc8a|\ud83c\udfc8|\ud83c\udfc0|\u26bd|\u26be|\u26f3|\ud83c\udfc6|\ud83d\udc7e|\ud83c\udfa4|\ud83c\udfb8|\ud83d\udc59|\ud83d\udc51|\ud83c\udf02|\ud83d\udc5c|\ud83d\udc84|\ud83d\udc8d|\ud83d\udc8e|\u2615|\ud83c\udf7a|\ud83c\udf7b|\ud83c\udf78|\ud83c\udf54|\ud83c\udf5f|\ud83c\udf5d|\ud83c\udf63|\ud83c\udf5c|\ud83c\udf73|\ud83c\udf66|\ud83c\udf82|\ud83c\udf45|\u2708|\ud83d\ude80|\ud83d\udeb2|\ud83d\ude84|\u26a0|\ud83c\udfc1|\ud83d\udeb9|\ud83d\udeba|\u2b55|\u2716|\u0026\u0023\u0031\u0036\u0039\u003b|\u0026\u0023\u0031\u0037\u0034\u003b|\u2122/g;export const emojiString = "嘿哈,捂脸,奸笑,机智,皱眉,耶,红包,鸡,發,小狗";export const wChartReg = /\uE415|\uE40C|\uE412|\uE409|\uE40D|\uE107|\uE403|\uE40E|\uE11B|\uE14C|\uE312|\uE112|\uE056|\uE057|\uE414|\uE405|\uE106|\uE418|\uE417|\uE404|\uE40A|\uE105|\uE402|\uE108|\uE058|\uE407|\uE401|\uE40F|\uE40B|\uE406|\uE413|\uE411|\uE410|\uE059|\uE416|\uE408|\uE11A|\uE10C|\uE022|\uE023|\uE329|\uE32E|\uE335|\uE337|\uE336|\uE13C|\uE331|\uE03E|\uE11D|\uE05A|\uE00E|\uE421|\uE00D|\uE011|\uE22E|\uE22F|\uE231|\uE230|\uE00F|\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|\uE448|\uE033|\uE325|\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|\uE30C|\uE044|\uE120|\uE33B|\uE33F|\uE344|\uE340|\uE147|\uE33A|\uE34B|\uE345|\uE01D|\uE10D|\uE136|\uE435|\uE252|\uE132|\uE138|\uE139|\uE332|\uE333|\uE24E|\uE24F|\uE537|\uE41D/g;export const wChatEmojis = {"E415": "emojib_0","E40C": "emojib_1","E412": "emojib_2","E409": "emojib_3","E40D": "emojib_4","E107": "emojib_5","E403": "emojib_6","E40E": "emojib_7","[嘿哈]": "emojib_8","[捂脸]": "emojib_9","[奸笑]": "emojib_10","[机智]": "emojib_11","[皱眉]": "emojib_12","[耶]": "emojib_13","E11B": "emojib_14","E41D": "emojib_15","E14C": "emojib_16","E312": "emojib_17","E112": "emojib_18","[红包]": "emojib_19","[鸡]": "emojib_101","E056": "emojib_21","E057": "emojib_22","E414": "emojib_23","E405": "emojib_24","E106": "emojib_25","E418": "emojib_26","E417": "emojib_27","E404": "emojib_28","E40A": "emojib_29","E105": "emojib_30","E402": "emojib_31","E108": "emojib_32","E058": "emojib_33","E407": "emojib_34","E401": "emojib_35","E40F": "emojib_36","E40B": "emojib_37","E406": "emojib_38","E413": "emojib_39","E411": "emojib_40","E410": "emojib_41","E059": "emojib_42","E416": "emojib_43","E408": "emojib_44","E11A": "emojib_45","E10C": "emojib_46","E022": "emojib_47","E023": "emojib_48","E329": "emojib_49","E32E": "emojib_50","E335": "emojib_51","E337": "emojib_52","E336": "emojib_53","E13C": "emojib_54","E331": "emojib_55","E03E": "emojib_56","E11D": "emojib_57","E05A": "emojib_58","E00E": "emojib_59","E421": "emojib_60","E00D": "emojib_61","E011": "emojib_62","E22E": "emojib_63","E22F": "emojib_64","E231": "emojib_65","E230": "emojib_66","E00F": "emojib_67","E111": "emojib_68","E425": "emojib_69","E001": "emojib_70","E002": "emojib_71","E005": "emojib_72","E004": "emojib_73","E04E": "emojib_74","E11C": "emojib_75","E003": "emojib_76","E04A": "emojib_77","E04B": "emojib_78","E049": "emojib_79","E048": "emojib_80","E04C": "emojib_81","E13D": "emojib_82","E43E": "emojib_83","E04F": "emojib_84","E052": "emojib_85","E053": "emojib_86","E524": "emojib_87","E52C": "emojib_88","E52A": "emojib_89","E531": "emojib_90","E050": "emojib_91","E527": "emojib_92","E051": "emojib_93","E10B": "emojib_94","E52B": "emojib_95","E52F": "emojib_96","E109": "emojib_97","E01A": "emojib_98","E52D": "emojib_99","E521": "emojib_100","E52E": "emojib_101","E055": "emojib_102","E525": "emojib_103","E10A": "emojib_104","E522": "emojib_105","E054": "emojib_106","E520": "emojib_107","E032": "emojib_108","E303": "emojib_109","E307": "emojib_110","E308": "emojib_111","E437": "emojib_112","E445": "emojib_113","E448": "emojib_114","E033": "emojib_115","E325": "emojib_116","E310": "emojib_117","E126": "emojib_118","E008": "emojib_119","E03D": "emojib_120","E00C": "emojib_121","E12A": "emojib_122","E009": "emojib_123","E145": "emojib_124","E144": "emojib_125","E03F": "emojib_126","E116": "emojib_127","E10F": "emojib_128","E101": "emojib_129","E13F": "emojib_130","E12F": "emojib_131","E311": "emojib_132","E113": "emojib_133","E30F": "emojib_134","E42B": "emojib_135","E42A": "emojib_136","E018": "emojib_137","E016": "emojib_138","E014": "emojib_139","E131": "emojib_140","E12B": "emojib_141","E03C": "emojib_142","E041": "emojib_143","E322": "emojib_144","E10E": "emojib_145","E43C": "emojib_146","E323": "emojib_147","E31C": "emojib_148","E034": "emojib_149","E035": "emojib_150","E045": "emojib_151","E047": "emojib_152","E30C": "emojib_153","E044": "emojib_154","E120": "emojib_155","E33B": "emojib_156","E33F": "emojib_157","E344": "emojib_158","E340": "emojib_159","E147": "emojib_160","E33A": "emojib_161","E34B": "emojib_162","E345": "emojib_163","E01D": "emojib_164","E10D": "emojib_165","E136": "emojib_166","E435": "emojib_167","E252": "emojib_168","E132": "emojib_169","E138": "emojib_170","E139": "emojib_171","E332": "emojib_172","E333": "emojib_173","E24E": "emojib_174","E24F": "emojib_175","E537": "emojib_176","[發]": "emojib_177","[小狗]": "emojib_85"}export const wChatToUi = {"E415": "😁","E40C": "😷","E412": "😂","E409": "😝","E40D": "😳","E107": "😱","E403": "😔","E40E": "😒","[嘿哈]": "[嘿哈]","[捂脸]": "[捂脸]","[奸笑]": "[奸笑]","[机智]": "[机智]","[皱眉]": "[皱眉]","[耶]": "[耶]","E11B": "👻","E41D": "🙏","E14C": "💪","E312": "🎉","E112": "🎁","[红包]": "[红包]","[鸡]": "[鸡]","E056": "😊","E057": "😃","E414": "☺","E405": "😉","E106": "😍","E418": "😘","E417": "😚","E404": "😬","E40A": "😌","E105": "😜","E402": "😏","E108": "😓","E058": "😞","E407": "😖","E401": "😢","E40F": "😰","E40B": "😨","E406": "😣","E413": "😢","E411": "😭","E410": "😵","E059": "😠","E416": "😡","E408": "😪","E11A": "👿","E10C": "👽","E022": "❤","E023": "💔","E329": "💘","E32E": "✨","E335": "⭐","E337": "❗","E336": "❓","E13C": "💤","E331": "💦","E03E": "🎵","E11D": "🔥","E05A": "💩","E00E": "👍","E421": "👎","E00D": "👊","E011": "✌","E22E": "👆","E22F": "👇","E231": "👉","E230": "👈","E00F": "☝","E111": "💏","E425": "💑","E001": "👦","E002": "👧","E005": "👩","E004": "👨","E04E": "👼","E11C": "💀","E003": "💋","E04A": "☀","E04B": "☔","E049": "☁","E048": "⛄","E04C": "🌙","E13D": "⚡","E43E": "🌊","E04F": "🐱","E052": "🐶","E053": "🐭","E524": "🐹","E52C": "🐰","E52A": "🐺","E531": "🐸","E050": "🐯","E527": "🐨","E051": "🐻","E10B": "🐷","E52B": "🐮","E52F": "🐗","E109": "🐵","E01A": "🐴","E52D": "🐍","E521": "🐦","E52E": "鸡","E055": "🐧","E525": "🐛","E10A": "🐙","E522": "🐠","E054": "🐳","E520": "🐬","E032": "🌹","E303": "🌺","E307": "🌴","E308": "🌵","E437": "💝","E445": "🎃","E448": "🎅","E033": "🎄","E325": "🔔","E310": "🎈","E126": "💿","E008": "📷","E03D": "🎥","E00C": "💻","E12A": "📺","E009": "☎","E145": "🔓","E144": "🔒","E03F": "🔑","E116": "🔨","E10F": "💡","E101": "📫","E13F": "🛀","E12F": "💰","E311": "💣","E113": "🔫","E30F": "💊","E42B": "🏈","E42A": "🏀","E018": "⚽","E016": "⚾","E014": "⛳","E131": "🏆","E12B": "👾","E03C": "🎤","E041": "🎸","E322": "👙","E10E": "👑","E43C": "🌂","E323": "👜","E31C": "💄","E034": "💍","E035": "💎","E045": "☕","E047": "🍺","E30C": "🍻","E044": "🍸","E120": "🍔","E33B": "🍟","E33F": "🍝","E344": "🍣","E340": "🍜","E147": "🍳","E33A": "🍦","E34B": "🎂","E345": "🍅","E01D": "✈","E10D": "🚀","E136": "🚲","E435": "🚄","E252": "⚠","E132": "🏁","E138": "🚹","E139": "🚺","E332": "⭕","E333": "✖","E24E": "©","E24F": "®","E537": "™","[發]": "[發]","[小狗]": "[小狗]"}

2、新建解析表情方法文件emjoymethod.js。

    import Vue from 'vue';import {emojisAmap,emojisBmap,emojiReg,emojiString,wChartReg,wChatEmojis,wChatToUi} from './emjoydata';// 解析emoji表情 以及换行回车Vue.prototype.parsingEmoji = function (value) {if (!value) return '';let str = value;str = str.replace(/\n/gi, '<br>');// str = EmojiUnicode.trans(str);// var reg = /^\[.*\]$/gi;var reg = /\[+[^\[\]]+\]/g;str = str.replace(reg, function (s) {var s = s.split("[")[1].split(']')[0];if (emojiString.indexOf(s) != -1) {return '<span class="chat-emoji emoji_b ' + emojisBmap['[' + s + ']'] + '" data-name="' + s + '"></span>';} else if(emojisAmap[s]){return '<span class="chat-emoji emoji_a ' + emojisAmap[s] + '" data-name="' + s + '"></span>';}else{return '['+s+']';};});str = str.replace(emojiReg, function (emo) {var emo = emo.replace(/\\/g, '\\');return '<span class="chat-emoji emoji_b ' + emojisBmap[emo] + '" data-name="' + emo + '"></span>';});// 微信emoji=》unicode表情规则str = str.replace(wChartReg, function (wCeo) {return '<span class="chat-emoji emoji_b ' + wChatEmojis[_escapeToUtf32(wCeo).toLocaleUpperCase()] + '" data-name="' + wChatToUi[_escapeToUtf32(wCeo).toLocaleUpperCase()] + '"></span>';});return str;};//编码转换function _escapeToUtf32(str) {var escaped = [],unicodeCodes = _convertStringToUnicodeCodePoints(str),i = 0,l = unicodeCodes.length,hex;for (; i < l; i++) {hex = unicodeCodes[i].toString(16);escaped.push('0000'.substr(hex.length) + hex);}return escaped.join('-');}function _convertStringToUnicodeCodePoints(str) {var surrogate1st = 0,unicodeCodes = [],i = 0,l = str.length;for (; i < l; i++) {var utf16Code = str.charCodeAt(i);if (surrogate1st != 0) {if (utf16Code >= 0xDC00 && utf16Code <= 0xDFFF) {var surrogate2nd = utf16Code,unicodeCode = (surrogate1st - 0xD800) * (1 << 10) + (1 << 16) + (surrogate2nd - 0xDC00);unicodeCodes.push(unicodeCode);}surrogate1st = 0;} else if (utf16Code >= 0xD800 && utf16Code <= 0xDBFF) {surrogate1st = utf16Code;} else {unicodeCodes.push(utf16Code);}}return unicodeCodes;}

3、新建表情样式文件emjoy.css

    .emoji_a,.emoji_b{width: 21px;height: 21px;display:inline-block;vertical-align: middle;overflow: hidden;}.emoji_a {background: url("../imgs/emjoy/emoji_.png") no-repeat;}.emoji_b {background: url("../imgs/emjoy/emoji_b.png") no-repeat;}span.emojis_0 {background-position: 0px 0px !important}span.emojis_1 {background-position: -24px 0px !important}span.emojis_2 {background-position: -48px 0px !important}span.emojis_3 {background-position: -72px 0px !important}span.emojis_4 {background-position: -96px 0px !important}span.emojis_5 {background-position: -120px 0px !important}span.emojis_6 {background-position: -144px 0px !important}span.emojis_7 {background-position: -168px 0px !important}span.emojis_8 {background-position: -192px 0px !important}span.emojis_9 {background-position: -216px 0px !important}span.emojis_10 {background-position: -240px 0px !important}span.emojis_11 {background-position: -264px 0px !important}span.emojis_12 {background-position: -288px 0px !important}span.emojis_13 {background-position: -312px 0px !important}span.emojis_14 {background-position: -336px 0px !important}span.emojis_15 {background-position: 0px -24px !important}span.emojis_16 {background-position: -24px -24px !important}span.emojis_17 {background-position: -48px -24px !important}span.emojis_18 {background-position: -72px -24px !important}span.emojis_19 {background-position: -96px -24px !important}span.emojis_20 {background-position: -120px -24px !important}span.emojis_21 {background-position: -144px -24px !important}span.emojis_22 {background-position: -168px -24px !important}span.emojis_23 {background-position: -192px -24px !important}span.emojis_24 {background-position: -216px -24px !important}span.emojis_25 {background-position: -240px -24px !important}span.emojis_26 {background-position: -264px -24px !important}span.emojis_27 {background-position: -288px -24px !important}span.emojis_28 {background-position: -312px -24px !important}span.emojis_29 {background-position: -336px -24px !important}span.emojis_30 {background-position: 0px -48px !important}span.emojis_31 {background-position: -24px -48px !important}span.emojis_32 {background-position: -48px -48px !important}span.emojis_33 {background-position: -72px -48px !important}span.emojis_34 {background-position: -96px -48px !important}span.emojis_35 {background-position: -120px -48px !important}span.emojis_36 {background-position: -144px -48px !important}span.emojis_37 {background-position: -168px -48px !important}span.emojis_38 {background-position: -192px -48px !important}span.emojis_39 {background-position: -216px -48px !important}span.emojis_40 {background-position: -240px -48px !important}span.emojis_41 {background-position: -264px -48px !important}span.emojis_42 {background-position: -288px -48px !important}span.emojis_43 {background-position: -312px -48px !important}span.emojis_44 {background-position: -336px -48px !important}span.emojis_45 {background-position: 0px -72px !important}span.emojis_46 {background-position: -24px -72px !important}span.emojis_47 {background-position: -48px -72px !important}span.emojis_48 {background-position: -72px -72px !important}span.emojis_49 {background-position: -96px -72px !important}span.emojis_50 {background-position: -120px -72px !important}span.emojis_51 {background-position: -144px -72px !important}span.emojis_52 {background-position: -168px -72px !important}span.emojis_53 {background-position: -192px -72px !important}span.emojis_54 {background-position: -216px -72px !important}span.emojis_55 {background-position: -240px -72px !important}span.emojis_56 {background-position: -264px -72px !important}span.emojis_57 {background-position: -288px -72px !important}span.emojis_58 {background-position: -312px -72px !important}span.emojis_59 {background-position: -336px -72px !important}span.emojis_60 {background-position: 0px -96px !important}span.emojis_61 {background-position: -24px -96px !important}span.emojis_62 {background-position: -48px -96px !important}span.emojis_63 {background-position: -72px -96px !important}span.emojis_64 {background-position: -96px -96px !important}span.emojis_65 {background-position: -120px -96px !important}span.emojis_66 {background-position: -144px -96px !important}span.emojis_67 {background-position: -168px -96px !important}span.emojis_68 {background-position: -192px -96px !important}span.emojis_69 {background-position: -216px -96px !important}span.emojis_70 {background-position: -240px -96px !important}span.emojis_71 {background-position: -264px -96px !important}span.emojis_72 {background-position: -288px -96px !important}span.emojis_73 {background-position: -312px -96px !important}span.emojis_74 {background-position: -336px -96px !important}span.emojis_75 {background-position: 0px -120px !important}span.emojis_76 {background-position: -24px -120px !important}span.emojis_77 {background-position: -48px -120px !important}span.emojis_78 {background-position: -72px -120px !important}span.emojis_79 {background-position: -96px -120px !important}span.emojis_80 {background-position: -120px -120px !important}span.emojis_81 {background-position: -144px -120px !important}span.emojis_82 {background-position: -168px -120px !important}span.emojis_83 {background-position: -192px -120px !important}span.emojis_84 {background-position: -216px -120px !important}span.emojis_85 {background-position: -240px -120px !important}span.emojis_86 {background-position: -264px -120px !important}span.emojis_87 {background-position: -288px -120px !important}span.emojis_88 {background-position: -312px -120px !important}span.emojis_89 {background-position: -336px -120px !important}span.emojis_90 {background-position: 0px -144px !important}span.emojis_91 {background-position: -24px -144px !important}span.emojis_92 {background-position: -48px -144px !important}span.emojis_93 {background-position: -72px -144px !important}span.emojis_94 {background-position: -96px -144px !important}span.emojis_95 {background-position: -120px -144px !important}span.emojis_96 {background-position: -144px -144px !important}span.emojis_97 {background-position: -168px -144px !important}span.emojis_98 {background-position: -192px -144px !important}span.emojis_99 {background-position: -216px -144px !important}span.emojis_100 {background-position: -240px -144px !important}span.emojis_101 {background-position: -264px -144px !important}span.emojis_102 {background-position: -288px -144px !important}span.emojis_103 {background-position: -312px -144px !important}span.emojis_104 {background-position: -336px -144px !important}span.emojis_105 {background-position: 0px -168px !important}span.emojis_106 {background-position: -24px -168px !important}span.emojis_107 {background-position: -48px -168px !important}span.emojis_108 {background-position: -72px -168px !important}span.emojis_109 {background-position: -96px -168px !important}span.emojis_110 {background-position: -120px -168px !important}span.emojis_111 {background-position: -144px -168px !important}span.emojis_112 {background-position: -168px -168px !important}span.emojis_113 {background-position: -192px -168px !important}span.emojis_114 {background-position: -216px -168px !important}span.emojis_115 {background-position: -240px -168px !important}span.emojis_116 {background-position: -264px -168px !important}span.emojis_117 {background-position: -288px -168px !important}span.emojis_118 {background-position: -312px -168px !important}span.emojis_119 {background-position: -336px -168px !important}span.emojis_120 {background-position: 0px -192px !important}span.emojis_121 {background-position: -24px -192px !important}span.emojis_122 {background-position: -48px -192px !important}span.emojis_123 {background-position: -72px -192px !important}span.emojis_124 {background-position: -96px -192px !important}span.emojis_125 {background-position: -120px -192px !important}span.emojib_0 {background-position: 0px 0px !important}span.emojib_1 {background-position: -24px 0px !important}span.emojib_2 {background-position: -48px 0px !important}span.emojib_3 {background-position: -72px 0px !important}span.emojib_4 {background-position: -96px 0px !important}span.emojib_5 {background-position: -120px 0px !important}span.emojib_6 {background-position: -144px 0px !important}span.emojib_7 {background-position: -168px 0px !important}span.emojib_8 {background-position: -192px 0px !important}span.emojib_9 {background-position: -216px 0px !important}span.emojib_10 {background-position: -240px 0px !important}span.emojib_11 {background-position: -264px 0px !important}span.emojib_12 {background-position: -288px 0px !important}span.emojib_13 {background-position: -312px 0px !important}span.emojib_14 {background-position: -336px 0px !important}span.emojib_15 {background-position: 0px -24px !important}span.emojib_16 {background-position: -24px -24px !important}span.emojib_17 {background-position: -48px -24px !important}span.emojib_18 {background-position: -72px -24px !important}span.emojib_19 {background-position: -96px -24px !important}span.emojib_20 {background-position: -120px -24px !important}span.emojib_21 {background-position: -144px -24px !important}span.emojib_22 {background-position: -168px -24px !important}span.emojib_23 {background-position: -192px -24px !important}span.emojib_24 {background-position: -216px -24px !important}span.emojib_25 {background-position: -240px -24px !important}span.emojib_26 {background-position: -264px -24px !important}span.emojib_27 {background-position: -288px -24px !important}span.emojib_28 {background-position: -312px -24px !important}span.emojib_29 {background-position: -336px -24px !important}span.emojib_30 {background-position: 0px -48px !important}span.emojib_31 {background-position: -24px -48px !important}span.emojib_32 {background-position: -48px -48px !important}span.emojib_33 {background-position: -72px -48px !important}span.emojib_34 {background-position: -96px -48px !important}span.emojib_35 {background-position: -120px -48px !important}span.emojib_36 {background-position: -144px -48px !important}span.emojib_37 {background-position: -168px -48px !important}span.emojib_38 {background-position: -192px -48px !important}span.emojib_39 {background-position: -216px -48px !important}span.emojib_40 {background-position: -240px -48px !important}span.emojib_41 {background-position: -264px -48px !important}span.emojib_42 {background-position: -288px -48px !important}span.emojib_43 {background-position: -312px -48px !important}span.emojib_44 {background-position: -336px -48px !important}span.emojib_45 {background-position: 0px -72px !important}span.emojib_46 {background-position: -24px -72px !important}span.emojib_47 {background-position: -48px -72px !important}span.emojib_48 {background-position: -72px -72px !important}span.emojib_49 {background-position: -96px -72px !important}span.emojib_50 {background-position: -120px -72px !important}span.emojib_51 {background-position: -144px -72px !important}span.emojib_52 {background-position: -168px -72px !important}span.emojib_53 {background-position: -192px -72px !important}span.emojib_54 {background-position: -216px -72px !important}span.emojib_55 {background-position: -240px -72px !important}span.emojib_56 {background-position: -264px -72px !important}span.emojib_57 {background-position: -288px -72px !important}span.emojib_58 {background-position: -312px -72px !important}span.emojib_59 {background-position: -336px -72px !important}span.emojib_60 {background-position: 0px -96px !important}span.emojib_61 {background-position: -24px -96px !important}span.emojib_62 {background-position: -48px -96px !important}span.emojib_63 {background-position: -72px -96px !important}span.emojib_64 {background-position: -96px -96px !important}span.emojib_65 {background-position: -120px -96px !important}span.emojib_66 {background-position: -144px -96px !important}span.emojib_67 {background-position: -168px -96px !important}span.emojib_68 {background-position: -192px -96px !important}span.emojib_69 {background-position: -216px -96px !important}span.emojib_70 {background-position: -240px -96px !important}span.emojib_71 {background-position: -264px -96px !important}span.emojib_72 {background-position: -288px -96px !important}span.emojib_73 {background-position: -312px -96px !important}span.emojib_74 {background-position: -336px -96px !important}span.emojib_75 {background-position: 0px -120px !important}span.emojib_76 {background-position: -24px -120px !important}span.emojib_77 {background-position: -48px -120px !important}span.emojib_78 {background-position: -72px -120px !important}span.emojib_79 {background-position: -96px -120px !important}span.emojib_80 {background-position: -120px -120px !important}span.emojib_81 {background-position: -144px -120px !important}span.emojib_82 {background-position: -168px -120px !important}span.emojib_83 {background-position: -192px -120px !important}span.emojib_84 {background-position: -216px -120px !important}span.emojib_85 {background-position: -240px -120px !important}span.emojib_86 {background-position: -264px -120px !important}span.emojib_87 {background-position: -288px -120px !important}span.emojib_88 {background-position: -312px -120px !important}span.emojib_89 {background-position: -336px -120px !important}span.emojib_90 {background-position: 0px -144px !important}span.emojib_91 {background-position: -24px -144px !important}span.emojib_92 {background-position: -48px -144px !important}span.emojib_93 {background-position: -72px -144px !important}span.emojib_94 {background-position: -96px -144px !important}span.emojib_95 {background-position: -120px -144px !important}span.emojib_96 {background-position: -144px -144px !important}span.emojib_97 {background-position: -168px -144px !important}span.emojib_98 {background-position: -192px -144px !important}span.emojib_99 {background-position: -216px -144px !important}span.emojib_100 {background-position: -240px -144px !important}span.emojib_101 {background-position: -264px -144px !important}span.emojib_102 {background-position: -288px -144px !important}span.emojib_103 {background-position: -312px -144px !important}span.emojib_104 {background-position: -336px -144px !important}span.emojib_105 {background-position: 0px -168px !important}span.emojib_106 {background-position: -24px -168px !important}span.emojib_107 {background-position: -48px -168px !important}span.emojib_108 {background-position: -72px -168px !important}span.emojib_109 {background-position: -96px -168px !important}span.emojib_110 {background-position: -120px -168px !important}span.emojib_111 {background-position: -144px -168px !important}span.emojib_112 {background-position: -168px -168px !important}span.emojib_113 {background-position: -192px -168px !important}span.emojib_114 {background-position: -216px -168px !important}span.emojib_115 {background-position: -240px -168px !important}span.emojib_116 {background-position: -264px -168px !important}span.emojib_117 {background-position: -288px -168px !important}span.emojib_118 {background-position: -312px -168px !important}span.emojib_119 {background-position: -336px -168px !important}span.emojib_120 {background-position: 0px -192px !important}span.emojib_121 {background-position: -24px -192px !important}span.emojib_122 {background-position: -48px -192px !important}span.emojib_123 {background-position: -72px -192px !important}span.emojib_124 {background-position: -96px -192px !important}span.emojib_125 {background-position: -120px -192px !important}span.emojib_126 {background-position: -144px -192px !important}span.emojib_127 {background-position: -168px -192px !important}span.emojib_128 {background-position: -192px -192px !important}span.emojib_129 {background-position: -216px -192px !important}span.emojib_130 {background-position: -240px -192px !important}span.emojib_131 {background-position: -264px -192px !important}span.emojib_132 {background-position: -288px -192px !important}span.emojib_133 {background-position: -312px -192px !important}span.emojib_134 {background-position: -336px -192px !important}span.emojib_135 {background-position: 0px -216px !important}span.emojib_136 {background-position: -24px -216px !important}span.emojib_137 {background-position: -48px -216px !important}span.emojib_138 {background-position: -72px -216px !important}span.emojib_139 {background-position: -96px -216px !important}span.emojib_140 {background-position: -120px -216px !important}span.emojib_141 {background-position: -144px -216px !important}span.emojib_142 {background-position: -168px -216px !important}span.emojib_143 {background-position: -192px -216px !important}span.emojib_144 {background-position: -216px -216px !important}span.emojib_145 {background-position: -240px -216px !important}span.emojib_146 {background-position: -264px -216px !important}span.emojib_147 {background-position: -288px -216px !important}span.emojib_148 {background-position: -312px -216px !important}span.emojib_149 {background-position: -336px -216px !important}span.emojib_150 {background-position: 0px -240px !important}span.emojib_151 {background-position: -24px -240px !important}span.emojib_152 {background-position: -48px -240px !important}span.emojib_153 {background-position: -72px -240px !important}span.emojib_154 {background-position: -96px -240px !important}span.emojib_155 {background-position: -120px -240px !important}span.emojib_156 {background-position: -144px -240px !important}span.emojib_157 {background-position: -168px -240px !important}span.emojib_158 {background-position: -192px -240px !important}span.emojib_159 {background-position: -216px -240px !important}span.emojib_160 {background-position: -240px -240px !important}span.emojib_161 {background-position: -264px -240px !important}span.emojib_162 {background-position: -288px -240px !important}span.emojib_163 {background-position: -312px -240px !important}span.emojib_164 {background-position: -336px -240px !important}span.emojib_165 {background-position: 0px -264px !important}span.emojib_166 {background-position: -24px -264px !important}span.emojib_167 {background-position: -48px -264px !important}span.emojib_168 {background-position: -72px -264px !important}span.emojib_169 {background-position: -96px -264px !important}span.emojib_170 {background-position: -120px -264px !important}span.emojib_171 {background-position: -144px -264px !important}span.emojib_172 {background-position: -168px -264px !important}span.emojib_173 {background-position: -192px -264px !important}span.emojib_174 {background-position: -216px -264px !important}span.emojib_175 {background-position: -240px -264px !important}span.emojib_176 {background-position: -264px -264px !important}span.emojib_177 {background-position: -288px -264px !important}

4、表情图片放到对应的目录下，图片如下：

1、emoji_.png

2、emoji_b.png

5、使用：

在main.js中引入emjoymethod.js(方法文件)和emjoy.css样式文件即可。页面中使用时直接用方法名即可，例如:
var str = '明天约吗？[奸笑]'
<span v-html='parsingEmoji(str)'></span>