Vue 表情输入组件，微信face表情组件

VUE表情包输入组件，先来张成品图看看。

年底了没事干，把以前做过的项目中的组件拿出来再复习一下，先说说思路吧。
注意：

1. 项目是用vue-cli3.0搭建起来的项目，参考cli3.0官网地址

2.样式是用scss需要安装依赖： npm install node-sass sass-loader -D

思路： 页面内容总体分为三块区域（内容区，表情区，输入区），引入JSON文件表情库渲染到页面，给每个表情绑定点击事件并传递下标，将用户点击过的表情存放到一个数组中，赋值给input标签的value中让其显示先输入框内，然后给确定按钮绑定点击事件，用户点击确定按钮将input中的value值赋值给内容区（内容去也要创建一个数组）让其渲染到你要的位置上，这样就完成了表情的渲染和发送。

html区域

<template><div class="home"><!-- 页面内容区域 --><div :class="faceShow ? 'contentBox contFaceShow' : 'contentBox'"><ul><li v-for="(item,index) in content" :key="index"><span>{{item}}</span></li></ul></div><!-- 输入框区域 --><div :class="faceShow ?'box boxFaceShow' : 'box'" ref="heightFace"><input type="text" v-model="textConent" class="inputContent"><button class="referBut" @click="referContent">提交</button><button class="faceBut" @click="faceContent">表情</button></div><!-- 表情区域 --><div class="browBox" v-if="faceShow"><ul><li v-for="(item,index) in faceList" :key="index" @click="getBrow(index)">{{item}}</li></ul></div></div>
</template>

JS区域

// 导入JSON格式的表情库
const appData = require("@/assets/emojis.json");
export default {name: "home",data() {return {textConent: "",faceList: [],faceShow: false,getBrowString: "",content: []};},methods: {// 表情faceContent() {this.faceShow = !this.faceShow;if (this.faceShow == true) {for (let i in appData) {this.faceList.push(appData[i].char);}} else {this.faceList = [];}},// 获取用户点击之后的标签 ，存放到输入框内getBrow(index) {for (let i in this.faceList) {if (index == i) {this.getBrowString = this.faceList[index];this.textConent += this.getBrowString;}}},// 将input的内容渲染到页面上referContent() {if (this.textConent == "") return alert("请输入内容");// 存入this.content.push(this.textConent);// 清空input数据this.textConent = "";// 关闭表情列表this.faceShow = false;}},
};

css区域

<style lang="scss" scoped>
body,
html,
head,
.home {width: 100%;height: 100%;padding: 0px;position: relative;margin: 0px;
}
.home {width: 100%;height: 100%;.contentBox {width: 100%;display: flex;flex-direction: column;justify-content: flex-end;text-align: right;position: absolute;bottom: 60px;li {list-style: none;padding: 4px 10px;margin-bottom: 20px;span {background: #e6e6e6;border-radius: 5px;padding: 5px;}}}.contFaceShow {position: absolute;bottom: 240px;}.box {width: 100%;height: 40px;margin: auto;position: absolute;bottom: 0px;.inputContent {position: absolute;bottom: 0%;left: 0%;width: 74%;height: 100%;border: 1px solid #ccc;}.referBut {position: absolute;bottom: 0%;right: 2%;height: 100%;width: 10%;border-radius: 5px;background: #aaaaff;color: #fff;}.faceBut {position: absolute;bottom: 0;right: 13%;height: 100%;width: 10%;border-radius: 5px;background: #aaaaff;color: #fff;}}.boxFaceShow {position: absolute;bottom: 200px !important;}.browBox {width: 100%;height: 200px;background: #e6e6e6;position: absolute;bottom: 0px;overflow: scroll;ul {display: flex;flex-wrap: wrap;padding: 10px;li {width: 14%;font-size: 26px;list-style: none;text-align: center;}}}
}
</style><style lang="scss">
body,
html,
head {width: 100%;height: 100%;position: relative;
}
#app {height: 100%;
}
* {padding: 0px;margin: 0px;
}
</style>

代码在我的github上：github地址：https://github.com/wanglei-bilibili/Vue-WeiXin-face
欢迎大家来提出意见，共同努力进步。

Vue 表情输入组件，微信face表情组件相关推荐

mysql支持表情输入_mysql支持emoji表情
最近开发的iOS项目由于须要用户文本的存储,天然就遇到了emoji等表情符号如何被mysql DB支持的问题.困扰了很多天,在就要绝望放弃的边缘,终于完成了转换和迁移.在此特别分析和整理,方便更多人. ...
Vue组件:做一个表情输入键盘
用H5写一个表情键盘,真的很麻烦,在Vue项目中,更麻烦,调试的过程太痛苦了,不过我在之前的一篇博文里,谈到了如何在移动端进行调试,欢迎大家交流,互相学习. --------------------- ...
vue中使用微信jssdk语音聊天功能，实现语音输入内容的van-field输入框组件
一.配置项 1.绑定域名 2.引入JS文件前两步直接看官方文档 3.wx.config配置: 这边要注意有一个坑必须要注意一下:可能会遇到安卓系统配置正常,ios上面报签名无效配置失败. 如果是使用 ...
vue.js仿微信聊天窗口展示组件
原链接:https://www.jianshu.com/p/0faf8e78d0a5 源码:https://github.com/doterlin/vue-wxChat 演示地址:https://do ...
android高仿微信表情输入与键盘输入详解－解决跳闪与表情切换问题
最近公司在项目上要使用到表情与键盘的切换输入,自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个相当困扰我,不过所幸在Github(其中一个不错的开源项目是https://git ...
android高仿微信表情输入与键盘输入详解
转载请注明出处: http://blog.csdn.net/javazejian/article/details/52126391 最近公司在项目上要使用到表情与键盘的切换输入,自己实现了一个,还 ...
android高仿微信表情输入与键盘输入(详细实现分析)
转载请注明出处(请尊重原创!谢谢~): http://blog.csdn.net/javazejian/article/details/52126391 出自[zejian的博客] 表情与键盘的切 ...
java使用微信表情代码_iOS高仿微信表情输入功能代码分享
最近项目需求,要实现一个类似微信的的表情输入,于是把微信的表情扒拉出来,实现了一把.可以从这里下载源码.看起来表情输入没有多少东西,不外乎就是用NSTextAttachment来实现图文混排,结果在实 ...
mysql emoy表情_GitHub - PandaQAQ/PandaEmoView: emoji gif 表情图文混排，仿微信表情输入...
该库具有以下特点: 支持 emoji 表情图片支持 gif 动态表情输入显示支持单张贴图表情(与微信收藏表情一致) 支持题图表情库的添加删除效果图: 快速使用引入库 compile 'com. ...
android 调出键盘表情_android高仿微信表情输入与键盘输入代码(详细实现分析)
表情与键盘的切换输入大部分IM都会需要到,之前自己实现了一个,还是存在些缺陷,比如说键盘与表情切换时出现跳闪问题,这个困扰了我些时间,不过所幸在Github(其代码整体结构很不错)并且在论坛上找些解决 ...

Vue 表情输入组件，微信face表情组件

Vue 表情输入组件，微信face表情组件相关推荐

最新文章

热门文章