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 相关文章推荐
js css样式操作代码(批量操作)
Oct 09 Javascript
TreeView 用法(有代码)(asp.net)
Jul 15 Javascript
调试Node.JS的辅助工具(NodeWatcher)
Jan 04 Javascript
jQuery实现的手风琴侧边菜单效果
Mar 29 jQuery
jQuery实现拼图小游戏(实例讲解)
Jul 24 jQuery
详解使用路由延迟加载 Angular 模块
Oct 12 Javascript
vue-cli脚手架搭建的项目去除eslint验证的方法
Sep 29 Javascript
详解实现一个通用的“划词高亮”在线笔记功能
Apr 23 Javascript
vue视图不更新情况详解
May 16 Javascript
jQuery实现B2B网站后台管理系统侧导航
Jul 08 jQuery
antd vue 刷新保留当前页面路由,保留选中菜单,保留menu选中操作
Aug 06 Javascript
关于vue-cli3打包代码后白屏的解决方案
Sep 02 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项目打包方法
2008/02/18 PHP
深入Apache与Nginx的优缺点比较详解
2013/06/17 PHP
php 在windows下配置虚拟目录的方法介绍
2013/06/26 PHP
Laravel框架路由管理简单示例
2019/05/07 PHP
Thinkphp框架使用list_to_tree 实现无限级分类列出所有节点示例
2020/04/04 PHP
QQ邮箱的一个文本编辑器代码
2007/03/14 Javascript
juqery 学习之四 筛选过滤
2010/11/30 Javascript
JSDoc 介绍使用规范JsDoc的使用介绍
2011/02/12 Javascript
JavaScript显示当然日期和时间即年月日星期和时间
2013/10/29 Javascript
jquery删除提示框弹出是否删除对话框
2014/01/07 Javascript
使用时间戳解决ie缓存的问题
2014/08/20 Javascript
jQuery实现可编辑的表格实例讲解(2)
2015/09/17 Javascript
基于JavaScript代码实现随机漂浮图片广告
2016/01/05 Javascript
JavaScript获取URL参数的方法之一
2017/03/24 Javascript
Express URL跳转(重定向)的实现方法
2017/04/07 Javascript
JS验证全角与半角及相互转化的介绍
2017/05/18 Javascript
利用node.js+mongodb如何搭建一个简单登录注册的功能详解
2017/07/30 Javascript
jQuery实现滚动到底部时自动加载更多的方法示例
2018/02/18 jQuery
Angular6封装http请求的步骤详解
2018/08/13 Javascript
vue 自定义指令自动获取文本框焦点的方法
2018/08/25 Javascript
详解webpack 热更新优化
2018/09/13 Javascript
详解swiper在vue中的应用(以3.0为例)
2018/09/20 Javascript
使用JS获取页面上的所有标签
2018/10/18 Javascript
优雅地使用loading(推荐)
2019/04/20 Javascript
swiper自定义分页器的样式
2020/09/14 Javascript
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
python 删除大文件中的某一行(最有效率的方法)
2017/08/19 Python
Python利用字典破解WIFI密码的方法
2019/02/27 Python
Python基本数据结构之字典类型dict用法分析
2019/06/08 Python
从训练好的tensorflow模型中打印训练变量实例
2020/01/20 Python
python实现ftp文件传输功能
2020/03/20 Python
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
计算机专业推荐信范文
2013/11/20 职场文书
自我鉴定怎么写
2014/01/12 职场文书
文明城市创建标语
2014/06/16 职场文书
instantclient客户端 连接oracle数据库
2022/04/26 Oracle