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 相关文章推荐
IE浏览器打印的页眉页脚设置解决方法
Dec 08 Javascript
学习javascript,实现插入排序实现代码
Jul 31 Javascript
jQuery插件原来如此简单 jQuery插件的机制及实战
Feb 07 Javascript
js showModalDialog弹出窗口实例详解
Jan 07 Javascript
javascript中的Base64、UTF8编码与解码详解
Mar 18 Javascript
JavaScript操作Cookie方法实例分析
May 27 Javascript
JavaScript使表单中的内容显示在屏幕上的方法
Jun 29 Javascript
HTML5+jQuery实现搜索智能匹配功能
Mar 24 jQuery
Bootstrap开发中Tab标签页切换图表显示问题的解决方法
Jul 13 Javascript
ES6新增的数组知识实例小结
May 23 Javascript
详解JavaScript数据类型和判断方法
Sep 04 Javascript
JS绘图Flot如何实现可选显示曲线图功能
Oct 16 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框架Phpbean说明
2008/01/10 PHP
php两点地理坐标距离的计算方法
2018/12/29 PHP
用js查找法实现当前栏目的高亮显示的代码
2007/11/24 Javascript
jQuery让控件左右移动的三种实现方法
2013/09/08 Javascript
JavaScript function 的 length 属性使用介绍
2014/09/15 Javascript
jQuery实现流动虚线框的方法
2015/01/29 Javascript
BootStrap扔进Django里的方法详解
2016/05/13 Javascript
第八篇Bootstrap下拉菜单实例代码
2016/06/21 Javascript
jQuery实现查找最近父节点的方法
2016/06/23 Javascript
教你JS中的运算符乘方、开方及变量格式转换
2016/08/09 Javascript
js 判断登录界面的账号密码是否为空
2017/02/08 Javascript
从零学习node.js之模块规范(一)
2017/02/21 Javascript
深入理解Vue官方文档梳理之全局API
2017/11/22 Javascript
自己动手封装一个React Native多级联动
2018/09/19 Javascript
vue实现随机验证码功能(完整代码)
2019/12/10 Javascript
vue-cli设置publicPath小记
2020/04/14 Javascript
Vue实现图书管理小案例
2020/12/03 Vue.js
python基础教程之简单入门说明(变量和控制语言使用方法)
2014/03/25 Python
编程语言Python的发展史
2014/09/26 Python
Python 类与元类的深度挖掘 II【经验】
2016/05/06 Python
浅谈python中get pass用法
2019/03/19 Python
pandas DataFrame的修改方法(值、列、索引)
2019/08/02 Python
python自动提取文本中的时间(包含中文日期)
2020/08/31 Python
AmazeUI 按钮交互的实现示例
2020/08/24 HTML / CSS
简历中自我评价分享
2013/10/09 职场文书
英语自荐信范文
2013/12/11 职场文书
2014年大学生职业规划书:未来不是梦,只要勇敢冲!
2014/09/22 职场文书
财务务虚会发言材料
2014/10/20 职场文书
2014年打非治违工作总结
2014/11/13 职场文书
人事局接收函
2015/01/30 职场文书
企业财务人员岗位职责
2015/04/14 职场文书
《1942》观后感
2015/06/08 职场文书
十八大观后感
2015/06/12 职场文书
MIME类型中application/xml与text/xml的区别介绍
2022/01/18 HTML / CSS
如何利用python实现Simhash算法
2022/06/28 Python
td 内容自动换行 table表格td设置宽度后文字太多自动换行
2022/12/24 HTML / CSS