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 相关文章推荐
转换json格式的日期为Javascript对象的函数
Jul 13 Javascript
JQuery扩展插件Validate 1 基本使用方法并打包下载
Sep 05 Javascript
Js点击弹出下拉菜单效果实例
Aug 12 Javascript
javascript中的括号()用法小结
Apr 14 Javascript
JS和css实现检测移动设备方向的变化并判断横竖屏幕
May 25 Javascript
JS正则表达式判断有效数实例代码
Mar 13 Javascript
微信小程序页面生命周期详解
Jan 31 Javascript
AngularJS select加载数据选中默认值的方法
Feb 28 Javascript
vue地址栏直接输入路由无效问题的解决
Nov 15 Javascript
JavaScript使用Math.random()生成简单的验证码
Jan 21 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
使用PreloadJS加载图片资源的基础方法详解
Feb 03 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/10/09 PHP
重新认识php array_merge函数
2014/08/31 PHP
php强制更新图片缓存的方法
2015/02/11 PHP
php+jQuery+Ajax简单实现页面异步刷新
2016/08/08 PHP
PHP cookie与session会话基本用法实例分析
2019/11/18 PHP
简单谈谈jQuery(function(){})与(function(){})(jQuery)
2014/12/19 Javascript
充分发挥Node.js程序性能的一些方法介绍
2015/06/23 Javascript
详解基于javascript实现的苹果系统底部菜单
2016/12/02 Javascript
js实现前端分页页码管理
2017/01/06 Javascript
vue编译打包本地查看index文件的方法
2018/02/23 Javascript
vue2.0父子组件间传递数据的方法
2018/08/16 Javascript
AntV F2和vue-cli构建移动端可视化视图过程详解
2019/10/08 Javascript
vscode调试node.js的实现方法
2020/03/22 Javascript
用JS实现选项卡
2020/03/23 Javascript
Python使用迭代器打印螺旋矩阵的思路及代码示例
2016/07/02 Python
使用python爬虫实现网络股票信息爬取的demo
2018/01/05 Python
Python数据结构之双向链表的定义与使用方法示例
2018/01/16 Python
解决在pycharm中显示额外的 figure 窗口问题
2019/01/15 Python
详解如何减少python内存的消耗
2019/08/09 Python
Python对接 xray 和微信实现自动告警
2019/09/17 Python
Python之Class&amp;Object用法详解
2019/12/25 Python
python批量替换文件名中的共同字符实例
2020/03/05 Python
Python基于pillow库实现生成图片水印
2020/09/14 Python
python获得命令行输入的参数的两种方式
2020/11/02 Python
全球速卖通法国在线交易平台:AliExpress法国
2017/07/07 全球购物
我想声明一个指针并为它分配一些空间, 但却不行。这些代码有什么 问题?char *p; *p = malloc(10);
2016/10/06 面试题
MYSQL基础面试题
2012/05/13 面试题
班组长安全职责
2014/01/05 职场文书
职工运动会邀请函
2014/01/19 职场文书
技校学生个人职业生涯规划范文
2014/03/03 职场文书
大学计划书范文800字
2014/08/14 职场文书
食品安全承诺书范文
2014/08/29 职场文书
就业协议书
2014/09/12 职场文书
挂靠协议书
2015/01/27 职场文书
企业宣传语大全
2015/07/13 职场文书
mysql的单列多值存储实例详解
2022/04/05 MySQL