vue界面发送表情的实现代码

完全照搬不一定能写出来 只是让看个思想

<template> <section > <div v-for='(item,index) in msgs' :key = index><img :src='https://www.haobala.com/bcjs/item.uid == myInfo.uid ? myInfo.avatar :otherInfo.avatar' :class='item.uid == myInfo.uid ? ’headerleft’ : ’headerright’'><p : v-html='customEmoji(item.content)'></p> </div> </section> <div v-if='emojiShow'> //首先根据这个来判断发送表情弹窗用不用出现 <div v-for='list in imgs'><div v-for='item in list' @click='inputEmoji(item)'> <img :src='https://www.haobala.com/bcjs/’./emoji/’+ item + ’.png’'></div> </div> </div></template><script>import { sendMsg } from '@/ws'; //是一个长连接import _ from 'lodash';//这个是js一个很强大的库 import eventBus from ’@/eventBus’//这是一个子父传递的公共文件console.log(emoji)export default { data() { this.imgs = _.chunk(emoji, 6) //这个是调用lodash库的chunk方法 把 六个元素分成一个数组只不过是emoji这个数组中的二维数组 return { emojiShow: false //刚开始默认不显示 点击按钮显示 点击的按钮上可以写@click=’emojiShow=emojiShow’这种写法 }; }, methods: { customEmoji(text) { //这个函数就是服务器端把传过来的名称转化为图片的 return text.replace(/[([A-Za-z0-9_]+)]/g, ’<img src='https://www.haobala.com/bcjs/emoji/$1.png' style='width:30px; height:30px;'>’) }, inputEmoji(pic) { this.content += `[${pic}]`//传过来的名字转为图片 }};</script><style scoped>@import ’../../assets/css/dialogue.css’;#emoji-list { height: 230px; background: #fff;}#emoji-list .cell { line-height: 13vh; border-right: 1rpx solid #ddd; border-bottom: 1rpx solid #ddd;}.flex-row { display: flex; flex-direction: row; justify-content: center; align-items: center;}.flex-column { display: flex; flex-direction: column; justify-content: center; align-items: stretch;}.flex-cell { flex: 1;}.cell img { width: 35px; height: 35px;}</style>

补充知识：vue+element-ui实现聊天表情包

我是用的本地json数据实现的，表情不是很多，首先创建个json文件，代码如下：

[{ 'codes': '1F600', 'char': '😀', 'name': 'grinning face' }, { 'codes': '1F603', 'char': '😃', 'name': 'grinning face with big eyes' }, { 'codes': '1F604', 'char': '😄', 'name': 'grinning face with smiling eyes' }, { 'codes': '1F601', 'char': '😁', 'name': 'beaming face with smiling eyes' }, { 'codes': '1F606', 'char': '😆', 'name': 'grinning squinting face' }, { 'codes': '1F605', 'char': '😅', 'name': 'grinning face with sweat' }, { 'codes': '1F923', 'char': '🤣', 'name': 'rolling on the floor laughing' }, { 'codes': '1F602', 'char': '😂', 'name': 'face with tears of joy' }, { 'codes': '1F642', 'char': '🙂', 'name': 'slightly smiling face' }, { 'codes': '1F643', 'char': '🙃', 'name': 'upside-down face' }, { 'codes': '1F609', 'char': '😉', 'name': 'winking face' }, { 'codes': '1F60A', 'char': '😊', 'name': 'smiling face with smiling eyes' }, { 'codes': '1F607', 'char': '😇', 'name': 'smiling face with halo' }, { 'codes': '1F970', 'char': '🥰', 'name': 'smiling face with hearts' }, { 'codes': '1F60D', 'char': '😍', 'name': 'smiling face with heart-eyes' }, { 'codes': '1F929', 'char': '🤩', 'name': 'star-struck' }, { 'codes': '1F618', 'char': '😘', 'name': 'face blowing a kiss' }, { 'codes': '1F617', 'char': '😗', 'name': 'kissing face' }, { 'codes': '1F61A', 'char': '😚', 'name': 'kissing face with closed eyes' }, { 'codes': '1F619', 'char': '😙', 'name': 'kissing face with smiling eyes' }, { 'codes': '1F44B', 'char': '👋', 'name': 'waving hand' }, { 'codes': '1F91A', 'char': '🤚', 'name': 'raised back of hand' }, { 'codes': '1F590', 'char': '🖐', 'name': 'hand with fingers splayed' }, { 'codes': '270B', 'char': '✋', 'name': 'raised hand' }, { 'codes': '1F596', 'char': '🖖', 'name': 'vulcan salute' }, { 'codes': '1F44C', 'char': '👌', 'name': 'OK hand' }, { 'codes': '1F90F', 'char': '🤏', 'name': 'pinching hand' }, { 'codes': '270C', 'char': '✌', 'name': 'victory hand' }, { 'codes': '1F91E', 'char': '🤞', 'name': 'crossed fingers' }, { 'codes': '1F91F', 'char': '🤟', 'name': 'love-you gesture' }, { 'codes': '1F918', 'char': '🤘', 'name': 'sign of the horns' }, { 'codes': '1F919', 'char': '🤙', 'name': 'call me hand' }, { 'codes': '1F448', 'char': '👈', 'name': 'backhand index pointing left' }, { 'codes': '1F449', 'char': '👉', 'name': 'backhand index pointing right' }, { 'codes': '1F446', 'char': '👆', 'name': 'backhand index pointing up' }, { 'codes': '1F595', 'char': '🖕', 'name': 'middle finger' }, { 'codes': '1F447', 'char': '👇', 'name': 'backhand index pointing down' }, { 'codes': '261D FE0F', 'char': '☝️', 'name': 'index pointing up' }, { 'codes': '1F44D', 'char': '👍', 'name': 'thumbs up' }, { 'codes': '1F44E', 'char': '👎', 'name': 'thumbs down' }, { 'codes': '270A', 'char': '✊', 'name': 'raised fist' }, { 'codes': '1F44A', 'char': '👊', 'name': 'oncoming fist' }, { 'codes': '1F91B', 'char': '🤛', 'name': 'left-facing fist' }, { 'codes': '1F91C', 'char': '🤜', 'name': 'right-facing fist' }]

vue组件中代码直接贴出来，废话不多说：

<template> <div class='chatIcon'> <el-popover placement='top-start' trigger='click' > <div class='emotionList'> <a href='javascript:void(0);' rel='external nofollow' @click='getEmo(index)' v-for='(item, index) in faceList' :key='index' >{{ item }}</a > </div> <el-button icon='iconfont icon-biaoqing' slot='reference' ></el-button> </el-popover> <el-input v-model='textarea' resize='none' type='textarea' rows='5' @keyup.enter.native='sendInfo' ></el-input> </div></template><script>const appData = require('@/utils/emoji.json');export default { mounted() { for (let i in appData) { this.faceList.push(appData[i].char); } }, data() { return { faceList: [], textarea: '' }; }, methods: { getEmo(index) { var textArea = document.getElementById('textarea'); function changeSelectedText(obj, str) { if (window.getSelection) { // 非IE浏览器 textArea.setRangeText(str); // 在未选中文本的情况下，重新设置光标位置 textArea.selectionStart += str.length; textArea.focus(); } else if (document.selection) { // IE浏览器 obj.focus(); var sel = document.selection.createRange(); sel.text = str; } } changeSelectedText(textArea, this.faceList[index]); this.textarea = textArea.value; // 要同步data中的数据 // console.log(this.faceList[index]); return; } }};</script><style lang='scss'>/* el-popover是和app同级的，所以scoped的局部属性设置了无效 *//* 需要设置全局style */.el-popover { height: 200px; width: 400px; overflow: scroll; overflow-x: auto;}</style><style scoped>.chatIcon { padding: 0 10px; font-size: 25px;}.emotionList { display: flex; flex-wrap: wrap; padding: 5px;}.emotionItem { width: 10%; font-size: 20px; text-align: center;}/*包含以下四种的链接*/.emotionItem { text-decoration: none;}/*正常的未被访问过的链接*/.emotionItem:link { text-decoration: none;}/*已经访问过的链接*/.emotionItem:visited { text-decoration: none;}/*鼠标划过(停留)的链接*/.emotionItem:hover { text-decoration: none;}/* 正在点击的链接*/.emotionItem:active { text-decoration: none;}</style>

以上这篇vue界面发送表情的实现代码就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持好吧啦网。