欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

Vue表情输入组件 微信face表情组件

程序员文章站 2022-08-28 10:02:26
vue表情包输入组件,先来张成品图看看。 年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧。 注意: 1. 项目是用vue-cli3.0搭建...

vue表情包输入组件,先来张成品图看看。

Vue表情输入组件 微信face表情组件

年底了没事干,把以前做过的项目中的组件拿出来再复习一下, 先说说思路吧。

注意:

1. 项目是用vue-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地址

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持。