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 相关文章推荐
javascript 冒号 使用说明
Jun 06 Javascript
JavaScript 三种创建对象的方法
Oct 16 Javascript
jquery-easyui关闭tab自动切换到前一个tab
Jul 29 Javascript
jquery.validate分组验证代码
Mar 17 Javascript
javascript实现简单的省市区三级联动
May 14 Javascript
jQuery平滑旋转幻灯片特效代码分享
Sep 07 Javascript
JavaScript编程中布尔对象的基本使用
Oct 25 Javascript
JS实现的多张图片轮流播放幻灯片效果
Jul 22 Javascript
js实现随机div颜色位置 类似满天星效果
Oct 24 Javascript
JavaScript实现滑动门效果
Jan 18 Javascript
vue实现瀑布流组件滑动加载更多
Mar 10 Javascript
js实现日历
Nov 07 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
php 常用字符串函数总结
2008/03/15 PHP
PHP中使用gettext来支持多语言的方法
2011/05/02 PHP
php生成curl命令行的方法
2015/12/14 PHP
yii使用activeFileField控件实现上传文件与图片的方法
2015/12/28 PHP
PHP中Socket连接及读写数据超时问题分析
2016/07/19 PHP
PHP高并发和大流量解决方案整理
2021/03/09 PHP
jquery checkbox全选、取消全选实现代码
2010/03/05 Javascript
jQuery Ajax 实例全解析
2011/04/20 Javascript
从阶乘函数对比Javascript和C#的异同
2012/05/31 Javascript
javascript中clone对象详解
2014/12/03 Javascript
jQuery实现的多滑动门,多选项卡效果代码
2016/03/28 Javascript
JS基于HTML5的canvas标签实现炫目的色相球动画效果实例
2016/08/24 Javascript
在网页中插入百度地图的步骤详解
2016/12/02 Javascript
jQuery中DOM节点删除之empty与remove
2017/01/20 Javascript
Vue.js实战之使用Vuex + axios发送请求详解
2017/04/04 Javascript
使用JavaScript实现链表的数据结构的代码
2017/08/02 Javascript
详解创建自定义的Angular Schematics
2018/06/06 Javascript
详解解决小程序中webview页面多层history返回问题
2019/08/20 Javascript
JS正则表达式验证端口范围(0-65535)
2020/01/06 Javascript
BootStrap前端框架使用方法详解
2020/02/26 Javascript
vue实现简易计算器功能
2021/01/20 Vue.js
js 执行上下文和作用域的相关总结
2021/02/08 Javascript
Python浅拷贝与深拷贝用法实例
2015/05/09 Python
Python实现新浪博客备份的方法
2016/04/27 Python
python远程调用rpc模块xmlrpclib的方法
2019/01/11 Python
详解python的argpare和click模块小结
2019/03/31 Python
Python openpyxl 插入折线图实例
2020/04/17 Python
python爬虫中url管理器去重操作实例
2020/11/30 Python
python中threading和queue库实现多线程编程
2021/02/06 Python
如何在Canvas上的图形/图像绑定事件监听的实现
2020/09/16 HTML / CSS
印度第一网上礼品店:IGP.com
2020/02/06 全球购物
药品销售员2015年终工作总结
2015/10/22 职场文书
2019年销售部季度工作计划3篇
2019/10/09 职场文书
django 认证类配置实现
2021/11/11 Python
一文弄懂MySQL索引创建原则
2022/02/28 MySQL
Win10玩csgo闪退如何解决?Win10玩csgo闪退的解决方法
2022/07/23 数码科技