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


Posted in Javascript onFebruary 11, 2019

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

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

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

注意:

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地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Javascript Math ceil()、floor()、round()三个函数的区别
Mar 09 Javascript
一个简单的网站访问JS计数器 刷新1次加1次访问
Sep 20 Javascript
动态的创建一个元素createElement及删除一个元素
Jan 24 Javascript
js的隐含参数(arguments,callee,caller)使用方法
Jan 28 Javascript
表单提交前触发函数返回true表单才会提交
Mar 11 Javascript
JS+CSS实现闪烁字体效果代码
Apr 05 Javascript
js计算时间差代码【包括计算,天,时,分,秒】
Apr 26 Javascript
JavaScript实现星级评分
Jan 12 Javascript
Bootstrap导航中表单简单实现代码
Mar 06 Javascript
Node.js文件编码格式的转换的方法
Apr 27 Javascript
JavaScript使用类似break机制中断forEach循环的方法
Nov 13 Javascript
vue进入页面时不在顶部,检测滚动返回顶部按钮问题及解决方法
Oct 30 Javascript
js屏蔽退格键(backspace或者叫后退键与F5)
Feb 10 #Javascript
Vue动画事件详解及过渡动画实例
Feb 09 #Javascript
JavaScript ES6常用基础知识总结
Feb 09 #Javascript
Vue组件的使用及个人理解与介绍
Feb 09 #Javascript
Vue自定义指令写法与个人理解
Feb 09 #Javascript
Vue指令指令大全
Feb 09 #Javascript
vue基于两个计算属性实现选中和全选功能示例
Feb 08 #Javascript
You might like
PHP 数组遍历顺序理解
2009/09/09 PHP
ThinkPHP文件上传实例教程
2014/08/22 PHP
Laravel框架使用monolog_mysql实现将系统日志信息保存到mysql数据库的方法
2018/08/16 PHP
[全兼容哦]--实用、简洁、炫酷的页面转入效果loing
2007/05/07 Javascript
加速IE的Javascript document输出的方法
2010/12/02 Javascript
jQuery lazyLoad图片延迟加载插件的优化改造方法分享
2013/08/13 Javascript
根据表格中的某一列进行排序的javascript代码
2013/11/29 Javascript
基于Jquery和html5实现炫酷的3D焦点图动画
2016/03/02 Javascript
jquery实现多次上传同一张图片
2017/01/09 Javascript
React + webpack 环境配置的方法步骤
2017/09/07 Javascript
node.js基础知识小结
2018/02/26 Javascript
使用Vue动态生成form表单的实例代码
2018/04/26 Javascript
简单了解JavaScript异步
2019/05/23 Javascript
泛谈JS逻辑判断选择器 || &amp;&amp;
2019/05/24 Javascript
js+canvas实现两张图片合并成一张图片的方法
2019/11/01 Javascript
在vue和element-ui的table中实现分页复选功能
2019/12/04 Javascript
js、jquery实现列表模糊搜索功能过程解析
2020/03/27 jQuery
[43:32]2014 DOTA2华西杯精英邀请赛 5 25 LGD VS NewBee第一场
2014/05/26 DOTA
Django中更新多个对象数据与删除对象的方法
2015/07/17 Python
python套接字流重定向实例汇总
2016/03/03 Python
Python Xml文件添加字节属性的方法
2018/03/31 Python
python基础教程项目五之虚拟茶话会
2018/04/02 Python
python 对给定可迭代集合统计出现频率,并排序的方法
2018/10/18 Python
Python pandas.DataFrame调整列顺序及修改index名的方法
2019/06/21 Python
python常用排序算法的实现代码
2019/11/08 Python
python GUI库图形界面开发之PyQt5打印控件QPrinter详细使用方法与实例
2020/02/28 Python
css3媒体查询中device-width和width的区别详解
2020/03/27 HTML / CSS
用HTML5实现手机摇一摇的功能的教程
2012/10/30 HTML / CSS
英国鲜花速递:Serenata Flowers
2018/04/03 全球购物
Web Service面试题:如何搭建Axis2的开发环境
2012/06/20 面试题
会计实习生工作总结的自我评价
2013/10/07 职场文书
公司承诺书范文
2014/05/19 职场文书
优秀班集体先进事迹材料
2014/05/28 职场文书
寻找最美家庭活动方案
2014/08/20 职场文书
大学生就业意向书
2015/05/11 职场文书
药品销售员2015年终工作总结
2015/10/22 职场文书