完全照搬不一定能写出来 只是让看个思想
<template> <section class="dialogue-section clearfix" > <div class="row clearfix" v-for="(item,index) in msgs" :key = index> <img :src="/UploadFiles/2021-04-02/item.uid == myInfo.uid ">补充知识: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界面发送表情的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持。
华山资源网 Design By www.eoogi.com
广告合作:本站广告合作请联系QQ:858582 申请时备注:广告合作(否则不回)
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
免责声明:本站资源来自互联网收集,仅供用于学习和交流,请遵循相关法律法规,本站一切资源不代表本站立场,如有侵权、后门、不妥请联系本站删除!
华山资源网 Design By www.eoogi.com
暂无评论...
更新日志
2024年12月23日
2024年12月23日
- 小骆驼-《草原狼2(蓝光CD)》[原抓WAV+CUE]
- 群星《欢迎来到我身边 电影原声专辑》[320K/MP3][105.02MB]
- 群星《欢迎来到我身边 电影原声专辑》[FLAC/分轨][480.9MB]
- 雷婷《梦里蓝天HQⅡ》 2023头版限量编号低速原抓[WAV+CUE][463M]
- 群星《2024好听新歌42》AI调整音效【WAV分轨】
- 王思雨-《思念陪着鸿雁飞》WAV
- 王思雨《喜马拉雅HQ》头版限量编号[WAV+CUE]
- 李健《无时无刻》[WAV+CUE][590M]
- 陈奕迅《酝酿》[WAV分轨][502M]
- 卓依婷《化蝶》2CD[WAV+CUE][1.1G]
- 群星《吉他王(黑胶CD)》[WAV+CUE]
- 齐秦《穿乐(穿越)》[WAV+CUE]
- 发烧珍品《数位CD音响测试-动向效果(九)》【WAV+CUE】
- 邝美云《邝美云精装歌集》[DSF][1.6G]
- 吕方《爱一回伤一回》[WAV+CUE][454M]