vue和electron做的聊天应用表情包处理
表情包库: https://apps.timwhitlock.info/emoji/tables/unicode
<template>
<div @click.stop>
<div class="phiz" @mousedown.stop>
<div class="phiz-list" v-show="showPhiz">
<ul class="list-ul">
<li @click.self="addPhiz" v-for="(item, index) in emojiList" :key="index">{{ item }}</li>
</ul>
<div class="bottom-bar">
<div class="select-btn" @click.stop="selectEmojiMenu(1)"><icon-svg name="iconSmileysPeople" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div>
<div class="select-btn" @click.stop="selectEmojiMenu(2)"><icon-svg name="iconAnimalsNature" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div>
<div class="select-btn" @click.stop="selectEmojiMenu(3)"><icon-svg name="iconFoodDrink" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div>
<div class="select-btn" @click.stop="selectEmojiMenu(4)"><icon-svg name="iconTravelPlaces" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div>
<div class="select-btn" @click.stop="selectEmojiMenu(5)"><icon-svg name="iconSymbols" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div>
<!-- <div class="select-btn" @click="selectEmojiMenu(6)"><icon-svg name="iconkaka-emoji" iconStyle="chat-footer-icon phiz-icon"></icon-svg></div> -->
</div>
</div>
</div>
</div>
</template>
<script>
import emoji from '@/assets/phiz/emoji.json'
export default {
props: {
showPhiz: {
default: false
}
},
data () {
return {
phiz: emoji,
emojiList: []
}
},
components: {},
methods: {
selectEmojiMenu (flag) {
this.emojiList = []
switch (flag) {
case 1:
console.log('第一个菜单')
this.initEmoji('0x1F64F', '0x1F601')
break
case 2:
console.log('第二个菜单')
this.initEmoji('0x1F40C', '0x1F43C', true)
break
case 3:
console.log('第三个菜单')
this.initEmoji('0x1F354', '0x1F372', true)
break
case 4:
console.log('第四个菜单')
this.initEmoji('0x1F3E0', '0x1F3F0', true)
break
case 5:
console.log('第五个菜单')
this.initEmoji('0x1F48B', '0x1F4E6', true)
break
case 6:
console.log('第六个菜单')
this.initEmoji('0x1F64F', '0x1F601')
break
}
},
/**
* 表情的unicode
* https://apps.timwhitlock.info/emoji/tables/unicode#
* startUnicode 开始的编码
* endUnicode 结束的编码
* flag 相反
*/
initEmoji (startUnicode, endUnicode, flag) {
let start
let end
if (flag) {
start = startUnicode
end = endUnicode
} else {
start = endUnicode
end = startUnicode
}
for (let i = start; i <= end; i++) {
// console.log(i)
let emoji = String.fromCodePoint(i)
this.emojiList.push(emoji)
}
},
addPhiz (ev) {
// console.log('添加表情')
this.$electron.remote.getCurrentWebContents().insertText(ev.target.innerText)
}
},
created () {
this.initEmoji('0x1F64F', '0x1F601')
}
}
</script>
vue和electron做的聊天应用表情包处理的更多相关文章
- 如何用AR Engine开发一个虚拟形象表情包?
现如今,人们在网上聊天.发帖时越来越爱用表情包,表情包一方面是一种个性化的表达方式,另一方面更能传达出当下的心理活动,可以说在网络社交中表情包是一个不可或缺的存在.加上近年来元宇宙的兴起,3D虚拟形象 ...
- Python自动生产表情包
作为一个数据分析师,应该信奉一句话--"一图胜千言".不过这里要说的并不是数据可视化,而是一款全民向的产品形态--表情包!!!! 表情包不仅仅是一种符号,更是一种文化--是促进社交 ...
- vue实现聊天+图片表情功能
项目需求是这样的:要求实现类似于微信聊天一样,表情+文字效果 "文字效果" 表情包三种方案 表情包的实现其实可以分为以下三种情况: 表情包:点击表情--直接发送大表情(这种方案其实 ...
- problem: 记一次聊天框的表情包弹框不显示的找问题过程
左边是列表,包含了群和成员,右侧是聊天窗口.点击群列表,右侧显示群聊窗口,点击学员,右侧显示私聊窗口. 群聊窗口和私聊窗口是不同的组件,但是窗口中的子组件,例如窗口的头部.中间内容部分.输入框都是复用 ...
- 使用 electron 做个播放器
使用 electron 做个播放器 本文同步更新在:https://github.com/whxaxes/blog/issues/8 前言 虽然 electron 已经出来好长时间了,但是最近才玩了一 ...
- WPF仿QQ聊天框表情文字混排实现
原文:WPF仿QQ聊天框表情文字混排实现 二话不说.先上图 图中分别有文件.文本+表情.纯文本的展示,对于同一个list不同的展示形式,很明显,应该用多个DataTemplate,那么也就需要Data ...
- .net做的exe和electron做的exe之间的通信问题
目前工作遇到个问题: .net做的exe和electron做的exe,之间进行数据通信 目前找到两个相对方便的方法: 1.命名管道 ①.net命名管道资料: 进程间通信 - 命名管道实现 ②elect ...
- socket.io+angular.js+express.js做个聊天应用(三)
版权声明:本文为博主原创文章,未经博主同意不得转载. https://blog.csdn.net/www19940501a/article/details/27590611 接着前面博客文章socke ...
- vue spn如何做seo优化
vue spn如何做seo优化 突然来了一个需求,对已有的项目做SEO优化,WHAT? 总所周知,spn对seo不够优化,因而官方考虑到直接使用ssr 一个不算解决办法的办法prerender-spa ...
随机推荐
- java:struts框架5(Converter,Validation,Tags(Object-Graph Navigation Language))
1.Converter: struts.xml: <?xml version="1.0" encoding="UTF-8"?> <!DOCTY ...
- API管理
原理 在SpringMVC中RequestMappingHandlerMapping是比较重要的一个角色,它决定了每个URL分发至哪个Controller. Spring Boot加载过程如下,所以我 ...
- Python 正则匹配网页内的IP地址及端口号
#!/usr/bin/env python # -*- coding: utf-8 -*- # @Date : 2017-08-30 20:38:23 # @Author : EnderZhou (z ...
- Qt - 基于UDP的网络编程
UDP(用户数据报协议 User Data Protocol) 轻量级.不可靠.面向数据报.无连接 的传输层协议. 适用情况: 网络数据大多为短消息: 拥有大量客户端: 对数据安全无特殊要求: 网络 ...
- CMDB 理论
TIL即IT基础架构库(Information Technology Infrastructure Library, ITIL,信息技术基础架构库)由英国政府部门CCTA(Central Comput ...
- Tomcat配置:java.lang.UnsatisfiedLinkError: D:\DevelopTool\tool20150402\tomcat\apache-tomcat-8.5.16\bin\tcnative-1.dll: Can't load AMD 64-bit .dll on a IA 32-bit platform
解决办法: tomcat启动时提示java.lang.UnsatisfiedLinkError: D:\soft\devTool\apache-tomcat-7.0.57\bin\tcnative-1 ...
- 通过node指令自动创建一个package.json文件,并封装发布使用
通过node指令自动创建一个package.json文件,并封装发布使用:https://blog.csdn.net/scu_cindy/article/details/78208268
- 洛谷 P2796 Facer的程序 题解
题面 一个树形DP, f[i]=表示以i为根可以得到的子树个数: 则f[i]*=(f[j]+1): 初始化f[i]=1; ans=sigma(f[i]); #include <bits/stdc ...
- c++ Convert struct to bytes
D:\stock\Tskingfromgoogle\src\NetTS\TW.cpp Convert struct to bytes //Convert struct to bytes 2019/0 ...
- http://www.pythontutor.com/visualize.html#mode=edit python在线检测代码
http://www.pythontutor.com/visualize.html#mode=edit