Vue表情输入组件微信人脸表情组件

VUE表情包输入组件，我们先来看看成品图。

年底了，没什么事可做。取出之前项目中的组件，并对其进行审查。先说说想法。

注意：

1.该项目采用vue-cli3.0构建，参考cli3.0官方网站地址

2.风格是使用scss来安装依赖项：NPM安装节点

想法：页面内容一般分为三个区域(内容区、表情区、输入区)。引入JSON文件表达式库渲染到页面，点击事件绑定到每个表达式，并传递下标。用户单击的表达式存储在数组中，首先分配给输入标记的值以显示在输入框中，然后通过“确定”按钮绑定到单击事件。用户单击“确定”按钮，将输入中的值分配给内容区域(还应该为内容呈现创建一个数组)

Html区域

模板div class='home '！-页面内容区-div : class=' faceshow '？content box contfacesshow ' : ' content box ' ' ul Li v-for='(项目，索引)在content ' : key=' index ' span { { item } }/span/Li/ul/div！-输入框区域-div : class=' faceshow '？box box face show ' : ' box ' ' ref=' heightFace '输入类型=' text ' v-model=' text content ' class=' input content ' button class=' refer but ' @ click=' refer content Submit/button class=' face but ' @ click=' face content '表情符号/button /div！-表情区-div class=' brow box ' v-if=' face show ' ul Li v-for='(item，index)在face list ' : key=' index ' @ click=' getbrow(index)' { { item } }/Li/ul/div/。

//导入json格式的表达式库const appdata=require(' @/assets/emo jis . JSON ')；导出默认{ name: 'home '，data() { return { textConent: ' '，faceList: []，faceShow: false，getBrowString: ' '，content :[]}；}，methods: {//表情符号faceContent() {this.faceShow=！this.faceShowif(this . FaceBook==true){ for(让我输入appData){ this . FaceList . push(appData[I])。char)；} } else { this . FaceList=[]；}}，//获取用户点击后的标签，并存储在输入框getbrowse (index) {for(让我在这。facelist) {if (index==I) {this。getbrowstring=this。face list[index]；this . text conent=this . getbrowstring；}}}，//将输入的内容呈现到页面refer content () {if (this。textcone==' ')返回警报('请输入内容')；//保存在this . content . push(this . text cone)中；//空输入数据this.textConent=//关闭表情列表this.faceShow=false} },};Css区域

style lang=' scss ' scopedbody，html，head，主页{宽度： 100%；高度： 100%;padding: 0px相对位置：margin: 0px}。主页{宽度： 100%；高度： 100%;内容框{宽度： 100%；显示： flex flex-方向：柱；正义-内容：灵活端；文本对齐：右侧；绝对位置：bottom : 60pxli { list-style :无；padding: 4px 10px边距-底部： 20pxspan { background : # e6e 6；边界半径： 5pxpadding: 5px } } }。contFaceShow { position:绝对值；bottom: 240px}。盒子{宽度： 100%；高度： 40pxmargin:汽车绝对位置：bottom: 0px .inputContent { position:绝对值；底部： 0%;左侧： 0%;宽度： 74%;高度： 100%;border: 1px固体# ccc}。参考但{位置：绝对；底部： 0%;右： 2%;高度： 100%;宽度： 10%;边界半径： 5px背景技术# aaaaffcolor: # fff }。faceBut {位置：绝对值；底部： 0；右： 13%；高度： 100%;宽度： 10%;边界半径： 5px背景技术# aaaaffcolor: # fff } }。boxFaceShow { position:绝对值；bottom: 200px！重要；} .浏览器框{宽度： 100%；高度： 200像素；背景技术# e6e6e6绝对位置：bottom: 0px飞越：卷轴；ul { display: flex柔性包装：包装；padd : 10Pxli { width : 14%；font-size : 26px列表样式：无；文本对齐：中心；} } } }/style style lang=' SCS ' body，html，head { width : 100%；高度： 100%;相对位置：} # app {高度： 100%；} * { padd : 0pxmargin : 0px }/样式代码在我的开源代码库上：github地址

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