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 相关文章推荐
Discuz! 6.1_jQuery兼容问题
Sep 23 Javascript
js jquery验证银行卡号信息正则学习
Jan 21 Javascript
解析Javascript中中括号“[]”的多义性
Dec 03 Javascript
jQuery修改CSS伪元素属性的方法
Jul 30 Javascript
js jquery获取当前元素的兄弟级 上一个 下一个元素
Sep 01 Javascript
jquery中ajax跨域方法实例分析
Dec 18 Javascript
深入解析JavaScript中的立即执行函数
May 21 Javascript
基于JS代码实现图片在页面中旋转效果
Jun 16 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
Node.js 实现抢票小工具 &amp; 短信通知提醒功能
Oct 22 Javascript
Vue SPA 初次进入加载动画实现代码
Nov 14 Javascript
详解Vue 的异常处理机制
Nov 30 Vue.js
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
PDO版本问题 Invalid parameter number: no parameters were bound
2013/01/06 PHP
php mysql_real_escape_string函数用法与实例教程
2013/09/30 PHP
在PHP中使用X-SendFile头让文件下载更快
2014/06/01 PHP
分享php多功能图片处理类
2016/05/15 PHP
js prototype 格式化数字 By shawl.qiu
2007/04/02 Javascript
jquery 屏蔽一个区域内的所有元素,禁止输入
2009/10/22 Javascript
Jquery Validation插件防止重复提交表单的解决方法
2010/03/05 Javascript
有关于JS构造函数的重载和工厂方法
2013/04/07 Javascript
详解 javascript中offsetleft属性的用法
2015/11/11 Javascript
老生常谈JavaScript 正则表达式语法
2016/08/20 Javascript
jQuery鼠标事件总结
2016/10/13 Javascript
Angularjs 设置全局变量的方法总结
2016/10/20 Javascript
vue日期组件 支持vue1.0和2.0
2017/01/09 Javascript
原生js实现类似fullpage的单页/全屏滚动
2017/01/22 Javascript
详解Webstorm 下的Angular2.0开发之路(图文)
2018/12/06 Javascript
python自动安装pip
2014/04/24 Python
python实现根据图标提取分类应用程序实例
2014/09/28 Python
Python中property函数用法实例分析
2018/06/04 Python
python2与python3的print及字符串格式化小结
2018/11/30 Python
python中yield的用法详解——最简单,最清晰的解释
2019/04/04 Python
解决python有时候import不了当前的包问题
2019/08/28 Python
使用卷积神经网络(CNN)做人脸识别的示例代码
2020/03/27 Python
区分python中的进程与线程
2020/08/13 Python
python SOCKET编程基础入门
2021/02/27 Python
详解css3 mask遮罩实现一些特效
2018/10/24 HTML / CSS
css3设置box-pack和box-align让div里面的元素垂直居中
2014/09/01 HTML / CSS
简单介绍HTML5中audio标签的使用
2015/09/24 HTML / CSS
荷兰鞋类购物网站:Donelli
2019/05/24 全球购物
厨师岗位职责
2013/11/12 职场文书
营业员实习自我鉴定
2013/12/07 职场文书
商场活动策划方案
2014/01/24 职场文书
年度安全生产目标责任书
2014/07/23 职场文书
财会专业大学生求职信
2014/09/26 职场文书
教师节寄语2015
2015/03/23 职场文书
上课迟到检讨书范文
2015/05/06 职场文书
新娘婚礼答谢词
2015/09/29 职场文书