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 相关文章推荐
载入进度条 效果
Jul 08 Javascript
利用原生JavaScript获取元素样式只是获取而已
Oct 08 Javascript
Javascript中的getUTCDay()方法使用详解
Jun 10 Javascript
jQuery实现列表内容的动态载入特效
Aug 08 Javascript
深入浅析react native es6语法
Dec 09 Javascript
BootstrapTable与KnockoutJS相结合实现增删改查功能【一】
May 10 Javascript
jquery实现ajax提交表单信息的简单方法(推荐)
Aug 24 Javascript
jquery easyui dataGrid动态改变排序字段名的方法
Mar 02 Javascript
bootstrap表单按回车会自动刷新页面的解决办法
Mar 08 Javascript
从零开始用electron手撸一个截屏工具的示例代码
Oct 10 Javascript
用 js 写一个 js 解释器过程详解
Aug 02 Javascript
在SSM框架下用laypage和ajax实现分页和数据交互的方法
Sep 27 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类
2006/11/27 PHP
php一句话cmdshell新型 (非一句话木马)
2009/04/18 PHP
php ckeditor上传图片文件名乱码解决方法
2013/11/15 PHP
PHP的CURL方法curl_setopt()函数案例介绍(抓取网页,POST数据)
2016/12/14 PHP
[原创]PHP实现字节数Byte转换为KB、MB、GB、TB的方法
2017/08/31 PHP
thinkPHP5框架导出Excel文件简单操作示例
2018/08/03 PHP
PHP实现批量修改文件名的方法示例
2019/09/18 PHP
js检测客户端不是firefox则提示下载
2007/04/07 Javascript
js压缩工具 yuicompressor 使用教程
2010/03/31 Javascript
手机端网页点击链接触发自动拨打或保存电话的示例代码
2014/08/15 Javascript
Javascript实现Web颜色值转换
2015/02/05 Javascript
微信小程序 获取javascript 里的数据
2017/08/17 Javascript
Javascript Promise用法详解
2018/05/10 Javascript
详解js获取video任意时间的画面截图
2019/04/17 Javascript
Jquery Datatables的使用详解
2020/01/30 jQuery
Vue简单实现原理详解
2020/05/07 Javascript
vue+koa2搭建mock数据环境的详细教程
2020/05/18 Javascript
在vue中实现清除echarts上次保留的数据(亲测有效)
2020/09/09 Javascript
Vue在H5 项目中使用融云进行实时个人单聊通讯
2020/12/14 Vue.js
python入门教程之识别验证码
2017/03/04 Python
Python tkinter模块弹出窗口及传值回到主窗口操作详解
2017/07/28 Python
Python运维之获取系统CPU信息的实现方法
2018/06/11 Python
java中的控制结构(if,循环)详解
2019/06/26 Python
关于Python核心框架tornado的异步协程的2种方法详解
2019/08/28 Python
python用pip install时安装失败的一系列问题及解决方法
2020/02/24 Python
Python实现UDP程序通信过程图解
2020/05/15 Python
Marc Jacobs彩妆官网:Marc Jacobs Beauty
2017/07/03 全球购物
Herve Leger官网:标志性绷带连衣裙等
2018/12/26 全球购物
路德维希•贝克(LUDWIG BECK)中文官网:德国大型美妆百货
2020/09/19 全球购物
广告学毕业生求职信
2014/01/30 职场文书
社会实践活动总结报告
2014/04/29 职场文书
民族团结先进个人事迹材料
2014/06/02 职场文书
2014年领导班子工作总结
2014/12/11 职场文书
三潭印月的导游词
2015/02/12 职场文书
欠条范文
2015/07/03 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS