vue界面发送表情的实现代码
完全照搬不一定能写出来 只是让看个思想
<template> <section class="dialogue-section clearfix" > <div class="row clearfix" v-for="(item,index) in msgs" :key = index> <img :src="item.uid == myInfo.uid ? myInfo.avatar :otherInfo.avatar" :class="item.uid == myInfo.uid ? 'headerleft' : 'headerright'"> <p :class="item.uid == myInfo.uid ? 'textleft' : 'textright'" v-html="customEmoji(item.content)"></p> </div> </section> <div id="emoji-list" class="flex-column" v-if="emojiShow"> //首先根据这个来判断发送表情弹窗用不用出现 <div class="flex-cell flex-row" v-for="list in imgs"> <div class="flex-cell flex-row cell" v-for="item in list" @click="inputEmoji(item)"> <img :src="'./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="./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" width="400" trigger="click" class="emoBox" > <div class="emotionList"> <a href="javascript:void(0);" rel="external nofollow" @click="getEmo(index)" v-for="(item, index) in faceList" :key="index" class="emotionItem" >{{ item }}</a > </div> <el-button class="emotionSelect" icon="iconfont icon-biaoqing" slot="reference" ></el-button> </el-popover> <el-input v-model="textarea" class="chatText" resize="none" type="textarea" id="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界面发送表情的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。
赞 (0)