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


Posted in Javascript onSeptember 11, 2020

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

<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界面发送表情的实现代码就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JObj预览一个JS的框架
Mar 13 Javascript
javascript获得CheckBoxList选中的数量
Oct 27 Javascript
JavaScript 加号(+)运算符号
Dec 06 Javascript
js实现的日期操作类DateTime函数代码
Mar 16 Javascript
JavaScript作用域与作用域链深入解析
Dec 06 Javascript
JavaScript输入邮箱自动提示实例代码
Jan 13 Javascript
javascript实现单击和双击并存的方法
Dec 13 Javascript
javascript实现鼠标放上后下边对应内容变换的效果
Aug 06 Javascript
JavaScript中数组的22种方法必学(推荐)
Jul 20 Javascript
Javascript数组循环遍历之forEach详解
Nov 07 Javascript
AngularJS 获取ng-repeat动态生成的ng-model值实例详解
Nov 29 Javascript
微信小程序实现带刻度尺滑块功能
Mar 29 Javascript
在vue中配置不同的代理同时访问不同的后台操作
Sep 11 #Javascript
vscode中的vue项目报错Property ‘xxx‘ does not exist on type ‘CombinedVueInstance<{ readyOnly...Vetur(2339)
Sep 11 #Javascript
Vue proxyTable配置多个接口地址,解决跨域的问题
Sep 11 #Javascript
关于ES6尾调用优化的使用
Sep 11 #Javascript
在js文件中引入(调用)另一个js文件的三种方法
Sep 11 #Javascript
Vue项目开发常见问题和解决方案总结
Sep 11 #Javascript
JavaScript实现简单日历效果
Sep 11 #Javascript
You might like
深入apache host的配置详解
2013/06/09 PHP
PHP实现过滤各种HTML标签
2015/05/17 PHP
PHP函数引用返回的实例详解
2016/09/11 PHP
php+Ajax无刷新验证用户名操作实例详解
2019/03/04 PHP
关于实现代码语法标亮 dp.SyntaxHighlighter
2007/02/02 Javascript
jquery统计输入文字的个数并对其进行判断
2014/01/07 Javascript
jQuery DOM操作实例
2014/03/05 Javascript
关于Javascript加载执行优化的研究报告
2014/12/16 Javascript
js判断复选框是否选中及选中个数的实现代码
2016/05/30 Javascript
ES6之模版字符串的具体使用
2018/05/17 Javascript
几个你不知道的技巧助你写出更优雅的vue.js代码
2018/06/11 Javascript
解决Vue2.0 watch对象属性变化监听不到的问题
2018/09/11 Javascript
深入浅析javascript函数中with
2018/10/28 Javascript
vue实现简单的星级评分组件源码
2018/11/16 Javascript
微信小程序使用component自定义toast弹窗效果
2018/11/27 Javascript
微信小程序实现时间预约功能
2018/11/27 Javascript
详解JavaScript的变量
2019/04/04 Javascript
解决layui 表单元素radio不显示渲染的问题
2019/09/04 Javascript
javascript canvas封装动态时钟
2020/09/30 Javascript
[03:09]2014DOTA2国际邀请赛 Mushi前队友送上祝福
2014/07/12 DOTA
pygame学习笔记(2):画点的三种方法和动画实例
2015/04/15 Python
简单介绍Python中的readline()方法的使用
2015/05/24 Python
Python查看微信撤回消息代码
2018/06/07 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
解决pycharm工程启动卡住没反应的问题
2019/01/19 Python
Pycharm安装Qt Design快捷工具的详细教程
2020/11/18 Python
python中numpy数组与list相互转换实例方法
2021/01/29 Python
BOSE德国官网:尽探索之力,享音乐之极
2016/12/11 全球购物
ProBikeKit新西兰:自行车套件,跑步和铁人三项装备
2017/04/05 全球购物
校园活动策划书范文
2014/01/10 职场文书
幼儿园教师培训方案
2014/02/04 职场文书
自动一体化专业求职信
2014/03/15 职场文书
留学生求职信
2014/06/03 职场文书
高中学生自我评价范文
2014/09/23 职场文书
2015年转正工作总结范文
2015/04/02 职场文书
员工离职证明范本
2015/06/12 职场文书