vue 使用emoji表情包
1、前端页面
vue
<template><div class="test"><div v-show="show" :class="show == false ? 'bqb' : 'bqb2'"><!--表情包弹出组件--><!--表情包内部结构--><div slot="content"><el-tabs tab-position="left" @tab-click="tabClick"><!--循环表情包的类型--><el-tab-pane:label="item.name"v-for="(item, index) in faceList":key="index"><div class="img-div" style="overflow: auto; height: 530px"><!--循环表情类型的每一个表情包--><iclass="emoji"v-for="(item1, index1) in faceList[tabIndex].iconArr":key="index1"@click="clickEmoji(item1.icon)"style="cursor: pointer">{{ item1.icon }}</i></div></el-tab-pane></el-tabs></div></div><i class="iconfont icon-xiaolian" title="表情" @click="bqb"></i><div class="content" @click="show = false"><div><textareastyle="width: 98%;resize: none;border: none;outline: none;font-size: 30px;padding-left: 12px;padding-top: 10px;background-color: #f5f5f5;-webkit-app-region: no-drag;"rows="3"type="text"name=""id="textarea"v-model="input"/></div></div></div>
</template><script>
import { emojiArr } from "@/assets/js/emojiArr"; //引入js文件
import "@/assets/fonts/bqb/iconfont.css"; //引入图标export default {name: "test",data() {return {faceList: emojiArr,tabIndex: 0, //表情包的类型索引show: false,input: "",};},methods: {// 点击表情包clickEmoji(val) {// 获取textarea输入框元素节点let ele = document.querySelector("#textarea");// 获取光标let cursor = ele.selectionStart;// 设置文本内容ele.setRangeText(val);// 移动光标并聚焦ele.selectionStart = cursor + 2;ele.focus();// 使文本输入框的内容等于当前的值this.input = ele.value;this.show = false;},// 点击标签页tabClick(tab) {this.tabIndex = tab.index - 0;},bqb() {if (this.show == true) {this.show = false;} else {this.show = true;}},},
};
</script><!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
.bqb {background-color: #ffffff;width: 430px;
}
.bqb2 {background-color: #f5f5f5;width: 430px;.emoji:hover {background-color: #f2f2f2;}i {font-size: 25px;}
}
</style>emojiArr.js文件
var emojiArr = [{name: '热门',iconArr: [{className: 'bg-1f4b0',icon: '
vue 使用emoji表情包相关推荐
- markdown中快速插入Emoji表情包语法速查表！！！
markdown中快速插入Emoji表情包语法速查表!!!
- CSS雪碧图制作emoji表情包
效果图: 原理:利用雪碧图,来实现emoji表情包,减少图片请求数. 表情包转换为文字 & 文字转换为表情包 维护两个对象来实现. 缺点:表情包大小由雪碧图中表情包大小控制,不能更改. htm ...
- Emoji-Chat emoji表情包发送及显示兼容web端、移动端
Emoji-Chat emoji表情包发送及显示兼容web端.移动端 序言 在如今聊天表情包满天飞的当下,聊天过程中想发送个表情感慨一下情绪在所难免,当下我就遇到这么个需求,希望在web端聊天室中可以 ...
- js文本内去除emoji表情包
利用正则匹配emoji表情包并且去除 let Arr=['emoji
- linux版微信 能发表情包的,仿微信在对话框文字中插入Emoji表情包
场景 类似于微信聊天的一个对话框,要求可以使用EMOJI表情,对话框是一个div,通过改变contentEditable属性使得内容可以编辑. 问题 Emoji表情在页面中其实是GIF格式的IMG标签 ...
- 前端emojs_Emoji-Chat emoji表情包发送及显示兼容web端、移动端
序言 在如今聊天表情包满天飞的当下,聊天过程中想发送个表情感慨一下情绪在所难免,当下我就遇到这么个需求,希望在web端聊天室中可以发送表情,还得在web端.微信H5.app端.微信公众号里均可以正常显 ...
- php文本框添加表情,仿微信在对话框文字中插入Emoji表情包
场景 类似于微信聊天的一个对话框,要求可以使用EMOJI表情,对话框是一个div,通过改变contentEditable属性使得内容可以编辑. 问题 Emoji表情在页面中其实是GIF格式的IMG标签 ...
- 仿微信在对话框文字中插入Emoji表情包
场景 类似于微信聊天的一个对话框,要求可以使用EMOJI表情,对话框是一个div,通过改变contentEditable属性使得内容可以编辑. 问题 Emoji表情在页面中其实是GIF格式的IMG标签 ...
- 基与Vue的emoji表情使用 --- emoji-vue的使用和bug修改
介绍 最近的项目用到了表情包,咱们以前项目有用到emoji-vue.我就直接拿来用了.使用过程中真的一言难尽啊~~~~~ 先附上一张这个插件在Vue中使用的列子.可以清楚的看到一个比较重要的方法onI ...
最新文章
- 在vmware的Solaris虚拟机中安装vmtool
- 重写GridView的Intellisence问题
- BZOJ 4448 主席树+树链剖分（在线）
- 华为鸿蒙会议安排,2020华为HDC日程确定，鸿蒙、HMS以及EMUI 11成最关注点
- centos普通用户修改文件权限_Linux实战014：Centos创建用户并添加root授权
- 雷军：小米10是首款支持8x8 MU-MIMO的手机
- oracle常用系统变量,Oracle环境变量
- MFC初探 —— 文件与文件夹的选择与拷贝
- c语言关键字识别程序,c语言－以关键字搜索程序
- linux 改路由表 宕机,网管宕机，服务停止？别担心，解决方案来了
- zynq操作系统： Linux驱动开发串口篇
- vs2012 安装 InstallShield
- JS常见的兼容性问题汇总
- jsp mysql 鲜花_jsp+servlet+mysql实现的在线鲜花商城源码附带视频指导运行教程
- 移植sqlite3到arm-linux上（AM3352）
- 两个excel表格取交集_(怎么用excel把两个表格数据做交集)如何把不同excel表格数据取交集...
- Linux服务器部署蝉道软件（安装mysql）
- 进不去系统rpc服务器不可用,rpc服务器不可用_详细解决方法,彻底修复
- W25Q128芯片的SPI驱动设计
- 无效的月份oracle,Oracle插入失败：无效的月份
热门文章