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 相关文章推荐
jquery tools之tabs 选项卡/页签
Jul 25 Javascript
JavaScript入门之事件、cookie、定时等
Oct 21 Javascript
angularjs的一些优化小技巧
Dec 06 Javascript
JavaScript中标识符提升问题
Jun 11 Javascript
javascript中Date()函数在各浏览器中的显示效果
Jun 18 Javascript
利用Javascript仿Excel的数据透视分析功能
Sep 07 Javascript
JS中append字符串包含onclick无效传递参数失败的解决方案
Dec 26 Javascript
Angularjs使用指令做表单校验的方法
Mar 31 Javascript
js禁止浏览器的回退事件
Apr 20 Javascript
bootstrap Table插件使用demo
Aug 07 Javascript
基于 flexible 的 Vue 组件:Toast -- 显示框效果
Dec 26 Javascript
js属性对象的hasOwnProperty方法的使用
Feb 05 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
雄兵连:天使彦天使彦为爱折翼,彦和炙心同时念动的誓言!
2020/03/02 国漫
Apache设置虚拟WEB
2006/10/09 PHP
基于mysql的论坛(6)
2006/10/09 PHP
PHP微信开发之有道翻译
2016/06/23 PHP
PHP7多线程搭建教程
2017/04/21 PHP
JavaScript Event学习第四章 传统的事件注册模型
2010/02/07 Javascript
关于可运行代码无法正常执行的使用说明
2010/05/13 Javascript
网络之美 JavaScript中Get和Set访问器的实现代码
2010/09/19 Javascript
javascript打印输出json实例
2013/11/11 Javascript
$(&quot;&quot;).click与onclick的区别示例介绍
2014/09/25 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
纯js代码实现简单计算器
2015/12/02 Javascript
jQuery UI仿淘宝搜索下拉列表功能
2017/01/10 Javascript
AngularJS ionic手势事件的使用总结
2017/08/09 Javascript
解决vue项目报错webpackJsonp is not defined问题
2018/03/14 Javascript
layer.open关闭父窗口 以及调用父页面的方法
2018/08/17 Javascript
解决vue+element 键盘回车事件导致页面刷新的问题
2018/08/25 Javascript
Vue动态创建注册component的实例代码
2019/06/14 Javascript
element-ui中Table表格省市区合并单元格的方法实现
2019/08/07 Javascript
js实现坦克移动小游戏
2019/10/28 Javascript
基于postman获取动态数据过程详解
2020/09/08 Javascript
Python自定义一个类实现字典dict功能的方法
2019/01/19 Python
Python关于__name__属性的含义和作用详解
2020/02/19 Python
Python 利用Entrez库筛选下载PubMed文献摘要的示例
2020/11/24 Python
windeln官方海外旗舰店:德淘超人气母婴超市
2017/12/15 全球购物
Piercing Pagoda官网:耳环、戒指、项链、手链等
2020/09/28 全球购物
英国婴儿产品专家:Samuel Johnston
2020/04/20 全球购物
教师找工作推荐信
2013/11/23 职场文书
质检部部长职责
2013/12/16 职场文书
大学生未来职业生涯规划书
2014/02/15 职场文书
《跨越海峡的生命桥》教学反思
2014/02/24 职场文书
优秀的2014年两会精神解读
2014/03/17 职场文书
预防传染病方案
2014/06/14 职场文书
初中毕业生自我评价
2015/03/02 职场文书
python数据可视化使用pyfinance分析证券收益示例详解
2021/11/20 Python
Spring Data JPA框架Repository自定义实现
2022/04/28 Java/Android