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 相关文章推荐
基于jquery实现的类似百度搜索的输入框自动完成功能
Aug 23 Javascript
js中return false(阻止)的用法
Aug 14 Javascript
面向对象设计模式的核心法则
Nov 10 Javascript
实现51Map地图接口(示例代码)
Nov 22 Javascript
jQuery Validation Plugin验证插件手动验证
Jan 26 Javascript
JS中使用gulp实现压缩文件及浏览器热加载功能
Jul 12 Javascript
详解react使用react-bootstrap当轮子造车
Aug 15 Javascript
JS尾递归的实现方法及代码优化技巧
Jan 19 Javascript
react配置antd按需加载的使用
Feb 11 Javascript
浅谈Angular单元测试总结
Mar 22 Javascript
详解Vue之事件处理
Jul 10 Javascript
javascript实现打砖块小游戏(附完整源码)
Sep 18 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
xajax写的留言本
2006/11/25 PHP
一个图形显示IP的PHP程序代码
2007/10/19 PHP
将CMYK颜色值和RGB颜色相互转换的PHP代码
2014/07/28 PHP
PHP针对字符串开头和结尾的判断方法
2016/07/11 PHP
浅谈php fopen下载远程文件的函数
2016/11/18 PHP
Javascript中的Split使用方法与技巧
2007/03/09 Javascript
window.onload 加载完毕的问题及解决方案(上)
2009/07/09 Javascript
javascript游戏开发之《三国志曹操传》零部件开发(三)情景对话中仿打字机输出文字
2013/01/23 Javascript
js实现鼠标点击文本框自动选中内容的方法
2015/08/20 Javascript
Jquery Mobile 自定义按钮图标
2015/11/18 Javascript
一个字符串中出现次数最多的字符 统计这个次数【实现代码】
2016/04/29 Javascript
jQuery事件绑定用法详解
2016/09/08 Javascript
Javascript动画效果(2)
2016/10/11 Javascript
AngularJS入门示例之Hello World详解
2017/01/04 Javascript
浅析jsopn跨域请求原理及cors(跨域资源共享)的完美解决方法
2017/02/06 Javascript
HTML5+jQuery实现搜索智能匹配功能
2017/03/24 jQuery
jQuery实现的点击标题文字切换字体效果示例【测试可用】
2018/04/26 jQuery
微信小程序模板消息推送的两种实现方式
2019/08/27 Javascript
基于layui框架响应式布局的一些使用详解
2019/09/16 Javascript
JavaScript ECMA-262-3 深入解析(二):变量对象实例详解
2020/04/25 Javascript
es6函数之尾递归用法实例分析
2020/04/25 Javascript
让IDE识别webpack的别名alias的实现方法
2020/05/06 Javascript
在antd中setFieldsValue和defaultVal的用法
2020/10/29 Javascript
python字符串加密解密的三种方法分享(base64 win32com)
2014/01/19 Python
跟老齐学Python之从if开始语句的征程
2014/09/14 Python
详解在Python中处理异常的教程
2015/05/24 Python
Python读取txt文件数据的方法(用于接口自动化参数化数据)
2018/06/27 Python
python 按不同维度求和,最值,均值的实例
2018/06/28 Python
python中单例常用的几种实现方法总结
2018/10/13 Python
pyqt实现.ui文件批量转换为对应.py文件脚本
2019/06/19 Python
python 读取、写入txt文件的示例
2020/09/27 Python
Tom Dixon官网:英国照明及家具设计和制造公司
2019/03/01 全球购物
Java中有几种方法可以实现一个线程?用什么关键字修饰同步方法?stop()和suspend()方法为何不推荐使用?
2015/08/04 面试题
农民入党思想汇报
2014/01/03 职场文书
学生自我评价范文
2014/02/02 职场文书
《登鹳雀楼》教学反思
2014/04/09 职场文书