之前在做pc端接通腾讯IM聊天的时候，需要发送表情包，这里用到了element-ui的
el-prpover组件，具体使用也是参考了别人的一篇文章 点击
下边是我自己使用的
<tempalte>
<el-popover placement="top-start" width="400" trigger="click">
<div class="emojis">
<div
v-for="item in emojiName"
class="emoji"
:key="item"
@click="chooseEmoji(item)"
>
<img
:src="emojiUrl + emojiMap[item]"
style="width: 30px; height: 30px"
/>
</div>
</div>
/*这是触发按钮，通过slot="reference"这种方法*/
<svg class="icon" aria-hidden="true" slot="reference">
<use xlink:href="#icon-kaixin" />
</svg>
</el-popover>
</template>
<script>
import {
emojiMap, emojiName, emojiUrl } from "@/js/emojiMap";
export default{
data(){
return{
emojiMap: emojiMap,
emojiName: emojiName,
emojiUrl: emojiUrl,
}
},
methods:{
chooseEmoji(item){
}
}
}
</script>
<style lang="scss">
.emojis {
height: 160px;
box-sizing: border-box;
display: flex;
flex-direction: row;
flex-wrap: wrap;
overflow-y: scroll;
}
.emoji {
height: 40px;
width: 40px;
box-sizing: border-box;
cursor: pointer;
}
</style>
emojiMap.js文件
//emojiMap.js文件
export const emojiUrl = 'https://imgcache.qq.com/open/qcloud/tim/assets/emoji/'
export const emojiMap = {
'[NO]': '[email protected]',
'[OK]': '[email protected]',
'[下雨]': '[email protected]',
'[么么哒]': '[email protected]',
'[乒乓]': '[email protected]',
'[便便]': '[email protected]',
'[信封]': '[email protected]',
'[偷笑]': '[email protected]',
'[傲慢]': '[email protected]',
'[再见]': '[email protected]',
'[冷汗]': '[email protected]',
'[凋谢]': '[email protected]',
'[刀]': '[email protected]',
'[删除]': '[email protected]',
'[勾引]': '[email protected]',
'[发呆]': '[email protected]',
'[发抖]': '[email protected]',
'[可怜]': '[email protected]',
'[可爱]': '[email protected]',
'[右哼哼]': '[email protected]',
'[右太极]': '[email protected]',
'[右车头]': '[email protected]',
'[吐]': '[email protected]',
'[吓]': '[email protected]',
'[咒骂]': '[email protected]',
'[咖啡]': '[email protected]',
'[啤酒]': '[email protected]',
'[嘘]': '[email protected]',
'[回头]': '[email protected]',
'[困]': '[email protected]',
'[坏笑]': '[email protected]',
'[多云]': '[email protected]',
'[大兵]': '[email protected]',
'[大哭]': '[email protected]',
'[太阳]': '[email protected]',
'[奋斗]': '[email protected]',
'[奶瓶]': '[email protected]',
'[委屈]': '[email protected]',
'[害羞]': '[email protected]',
'[尴尬]': '[email protected]',
'[左哼哼]': '[email protected]',
'[左太极]': '[email protected]',
'[左车头]': '[email protected]',
'[差劲]': '[email protected]',
'[弱]': '[email protected]',
'[强]': '[email protected]',
'[彩带]': '[email protected]',
'[彩球]': '[email protected]',
'[得意]': '[email protected]',
'[微笑]': '[email protected]',
'[心碎了]': '[email protected]',
'[快哭了]': '[email protected]',
'[怄火]': '[email protected]',
'[怒]': '[email protected]',
'[惊恐]': '[email protected]',
'[惊讶]': '[email protected]',
'[憨笑]': '[email protected]',
'[手枪]': '[email protected]',
'[打哈欠]': '[email protected]',
'[抓狂]': '[email protected]',
'[折磨]': '[email protected]',
'[抠鼻]': '[email protected]',
'[抱抱]': '[email protected]',
'[抱拳]': '[email protected]',
'[拳头]': '[email protected]',
'[挥手]': '[email protected]',
'[握手]': '[email protected]',
'[撇嘴]': '[email protected]',
'[擦汗]': '[email protected]',
'[敲打]': '[email protected]',
'[晕]': '[email protected]',
'[月亮]': '[email protected]',
'[棒棒糖]': '[email protected]',
'[汽车]': '[email protected]',
'[沙发]': '[email protected]',
'[流汗]': '[email protected]',
'[流泪]': '[email protected]',
'[激动]': '[email protected]',
'[灯泡]': '[email protected]',
'[炸弹]': '[email protected]',
'[熊猫]': '[email protected]',
'[爆筋]': '[email protected]',
'[爱你]': '[email protected]',
'[爱心]': '[email protected]',
'[爱情]': '[email protected]',
'[猪头]': '[email protected]',
'[猫咪]': '[email protected]',
'[献吻]': '[email protected]',
'[玫瑰]': '[email protected]',
'[瓢虫]': '[email protected]',
'[疑问]': '[email protected]',
'[白眼]': '[email protected]',
'[皮球]': '[email protected]',
'[睡觉]': '[email protected]',
'[磕头]': '[email protected]',
'[示爱]': '[email protected]',
'[礼品袋]': '[email protected]',
'[礼物]': '[email protected]',
'[篮球]': '[email protected]',
'[米饭]': '[email protected]',
'[糗大了]': '[email protected]',
'[红双喜]': '[email protected]',
'[红灯笼]': '[email protected]',
'[纸巾]': '[email protected]',
'[胜利]': '[email protected]',
'[色]': '[email protected]',
'[药]': '[email protected]',
'[菜刀]': '[email protected]',
'[蛋糕]': '[email protected]',
'[蜡烛]': '[email protected]',
'[街舞]': '[email protected]',
'[衰]': '[email protected]',
'[西瓜]': '[email protected]',
'[调皮]': '[email protected]',
'[象棋]': '[email protected]',
'[跳绳]': '[email protected]',
'[跳跳]': '[email protected]',
'[车厢]': '[email protected]',
'[转圈]': '[email protected]',
'[鄙视]': '[email protected]',
'[酷]': '[email protected]',
'[钞票]': '[email protected]',
'[钻戒]': '[email protected]',
'[闪电]': '[email protected]',
'[闭嘴]': '[email protected]',
'[闹钟]': '[email protected]',
'[阴险]': '[email protected]',
'[难过]': '[email protected]',
'[雨伞]': '[email protected]',
'[青蛙]': '[email protected]',
'[面条]': '[email protected]',
'[鞭炮]': '[email protected]',
'[风车]': '[email protected]',
'[飞吻]': '[email protected]',
'[飞机]': '[email protected]',
'[饥饿]': '[email protected]',
'[香蕉]': '[email protected]',
'[骷髅]': '[email protected]',
'[麦克风]': '[email protected]',
'[麻将]': '[email protected]',
'[鼓掌]': '[email protected]',
'[龇牙]': '[email protected]'
}
export const emojiName = [
'[龇牙]',
'[调皮]',
'[流汗]',
'[偷笑]',
'[再见]',
'[敲打]',
'[擦汗]',
'[猪头]',
'[玫瑰]',
'[流泪]',
'[大哭]',
'[嘘]',
'[酷]',
'[抓狂]',
'[委屈]',
'[便便]',
'[炸弹]',
'[菜刀]',
'[可爱]',
'[色]',
'[害羞]',
'[得意]',
'[吐]',
'[微笑]',
'[怒]',
'[尴尬]',
'[惊恐]',
'[冷汗]',
'[爱心]',
'[示爱]',
'[白眼]',
'[傲慢]',
'[难过]',
'[惊讶]',
'[疑问]',
'[困]',
'[么么哒]',
'[憨笑]',
'[爱情]',
'[衰]',
'[撇嘴]',
'[阴险]',
'[奋斗]',
'[发呆]',
'[右哼哼]',
'[抱抱]',
'[坏笑]',
'[飞吻]',
'[鄙视]',
'[晕]',
'[大兵]',
'[可怜]',
'[强]',
'[弱]',
'[握手]',
'[胜利]',
'[抱拳]',
'[凋谢]',
'[米饭]',
'[蛋糕]',
'[西瓜]',
'[啤酒]',
'[瓢虫]',
'[勾引]',
'[OK]',
'[爱你]',
'[咖啡]',
'[月亮]',
'[刀]',
'[发抖]',
'[差劲]',
'[拳头]',
'[心碎了]',
'[太阳]',
'[礼物]',
'[皮球]',
'[骷髅]',
'[挥手]',
'[闪电]',
'[饥饿]',
'[咒骂]',
'[折磨]',
'[抠鼻]',
'[鼓掌]',
'[糗大了]',
'[左哼哼]',
'[打哈欠]',
'[快哭了]',
'[吓]',
'[篮球]',
'[乒乓]',
'[NO]',
'[跳跳]',
'[怄火]',
'[转圈]',
'[磕头]',
'[回头]',
'[跳绳]',
'[激动]',
'[街舞]',
'[献吻]',
'[左太极]',
'[右太极]',
'[闭嘴]',
'[猫咪]',
'[红双喜]',
'[鞭炮]',
'[红灯笼]',
'[麻将]',
'[麦克风]',
'[礼品袋]',
'[信封]',
'[象棋]',
'[彩带]',
'[蜡烛]',
'[爆筋]',
'[棒棒糖]',
'[奶瓶]',
'[面条]',
'[香蕉]',
'[飞机]',
'[左车头]',
'[车厢]',
'[右车头]',
'[多云]',
'[下雨]',
'[钞票]',
'[熊猫]',
'[灯泡]',
'[风车]',
'[闹钟]',
'[雨伞]',
'[彩球]',
'[钻戒]',
'[沙发]',
'[纸巾]',
'[手枪]',
'[青蛙]'
]