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下的keyCode键码值表
Apr 10 Javascript
异步动态加载JS并运行(示例代码)
Dec 13 Javascript
事件委托与阻止冒泡阻止其父元素事件触发
Sep 02 Javascript
jQuery实现contains方法不区分大小写的方法
Feb 13 Javascript
将JavaScript的jQuery库中表单转化为JSON对象的方法
Nov 17 Javascript
基于javascript实现彩票随机数生成(升级版)
Apr 17 Javascript
Bootstrap select下拉联动(jQuery cxselect)
Jan 04 Javascript
BOM之navigator对象和用户代理检测
Feb 10 Javascript
JavaScript 中调用 Kotlin 方法实例详解
Jun 09 Javascript
微信小程序顶部可滚动导航效果
Oct 31 Javascript
javascript实现fetch请求返回的统一拦截
Dec 22 Javascript
利用promise及参数解构封装ajax请求的方法
Mar 24 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
WHOIS类的修改版
2006/10/09 PHP
[原创]效率较高的php下读取文本文件的代码
2008/07/02 PHP
PHP错误提示的关闭方法详解
2013/06/23 PHP
php以post形式发送xml的方法
2014/11/04 PHP
nginx+thinkphp下解决不支持pathinfo模式
2015/07/01 PHP
YII框架学习笔记之命名空间、操作响应与视图操作示例
2019/04/30 PHP
在laravel中使用with实现动态添加where条件
2019/10/10 PHP
Jquery替换已存在于element上的event的方法
2010/03/09 Javascript
读jQuery之二(两种扩展)
2011/06/11 Javascript
关于 文本框默认值 的操作js代码
2012/01/12 Javascript
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
js 判断文件类型并控制表单提交示例代码
2013/11/14 Javascript
js滑动提示效果代码分享
2016/03/10 Javascript
BootStrap便签页的简单应用
2017/01/06 Javascript
JavaScript中值类型和引用类型的区别
2017/02/23 Javascript
Angularjs渲染的 using 指令的星级评分系统示例
2017/11/09 Javascript
Angular2之二级路由详解
2018/08/31 Javascript
vue项目引入Iconfont图标库的教程图解
2018/10/24 Javascript
[52:12]FNATIC vs Infamous 2019国际邀请赛小组赛 BO2 第一场 8.16
2019/08/19 DOTA
详解Tensorflow数据读取有三种方式(next_batch)
2018/02/01 Python
python机器学习之神经网络实现
2018/10/13 Python
python实时获取外部程序输出结果的方法
2019/01/12 Python
python 环境搭建 及python-3.4.4的下载和安装过程
2019/07/20 Python
基于python实现自动化办公学习笔记(CSV、word、Excel、PPT)
2019/08/06 Python
html5文本内容_动力节点Java学院整理
2017/07/11 HTML / CSS
英国男士时尚购物网站:Stuarts London
2017/10/22 全球购物
世界领先的艺术图书出版社:TASCHEN
2018/07/23 全球购物
英国电气世界:Electrical World
2019/09/08 全球购物
海量信息软件测试笔试题
2015/08/08 面试题
中学自我评价
2014/01/31 职场文书
运动会广播稿150字
2014/02/19 职场文书
师范类求职信
2014/06/21 职场文书
实习生辞职信范文
2015/03/02 职场文书
服装区域经理岗位职责
2015/04/10 职场文书
常住证明范本
2015/06/23 职场文书
nginx配置proxy_pass中url末尾带/与不带/的区别详解
2021/03/31 Servers