Vue组件:做一个表情输入键盘

用H5写一个表情键盘,真的很麻烦,在Vue项目中,更麻烦,调试的过程太痛苦了,不过我在之前的一篇博文里,谈到了如何在移动端进行调试,欢迎大家交流,互相学习.

--------------------------正文-----------------------------

整体思路:

①在一个评论组件comment.vue中嵌套一个表情键盘组件emoji.vue

②如何获取到键盘高度?这个问题昨天百度了半天,发现js无法实现微笑脸

询问了原生的同事,他们的思路是这样:点击输入表情的那个按钮时,隐藏虚拟键盘,显示表情键盘,再点时反之

做法:

①先做好表情键盘的样式,这个不再赘述,滑动的需求用swiper实现.写样式一定要有耐心,慢慢调试~

黄色的那个相当于按钮,展示表情键盘或者隐藏

②父子组件传值

点击表情,或者删除表情,都是在子组件中完成的,子组件完成之后将字符串传给父组件, 子==>父

我们使用 this.$emit('click',value),然后在父组件中绑定一个@click事件,比如 @click='test'

在methods中

test(value){console.log(value)
}value就是子组件穿过来的值

父向子传送值,props就可以了

父组件中的子组件标签: <emoji :parentSendValue='inputValue' />

子组件中,props:['parentSendValue']接收

注意,这里如果你直接拿到这个值,在子组件中更改,console会报错,这里找个值代替一下,就可以了

③我们点击小白标,来隐藏键盘,并显示表情键盘

那么如何显示表情键盘呢?需要两步

1.隐藏虚拟键盘document.activeElement.blur();2.显示表情键盘,这里 键盘是 v-if='emojiShow'this.emojiShow=true;

我们点击黄标,是为了隐藏表情键盘,显示虚拟键盘,这样操作

1.隐藏表情键盘this.emojiShow=false;2.显示虚拟键盘显示虚拟键盘的原理很简单,使这个input聚焦就可以了比如 <input ref='emojiInput' />this.$refs.emojiInput.foucs()就可以了

注意:点击input时需要隐藏表情键盘哦~

Vue组件:做一个表情输入键盘相关推荐

python 表情包制作库_Django+PIL 做一个表情包生成网站
ZERO 前言最近看到一个系列表情包火了起来,无聊之下想起入门Django时没什么好玩项目的种种不利,就写了这么一篇菜菜的文章,也算是一个简单的入门教程吧 ONE 什么是Django Django ...
Unity3D 用minimap系列组件做一个小地图（超简单）
用minimap制作小地图 Minimap 系列用minimap制作小地图 Minimap Camera Minimap Item Minimap Renderer Minimap Scanner ...
vue.js：利用vue.js做一个抽奖小游戏
MVVM模式是什么:M=Model(模型),V=View(视图),VM= ViewModel(简写成MVVM) . 代码如下: 运行代码结果: 1.你没有中奖: 2.恭喜你,你中奖了: 转载于:htt ...
使用vue做一个“淘宝“项目——2
做出首页前言:做出底部导航栏与显示页面目录: 创建项目文件删除原有文件引用资源文件实现底部导航栏显示页面做出首页显示商品栏做出分类一.将导航栏修改颜色首先打开vant 2文档中的 ...
vue 组件发布记录
有段时间没做独立的 vue 组件了,最近突然想把一个常用的 vue 组件打成一个 npm 包,方便使用.好久不用,发现已经忘记环境怎么搭建.翻看以前的组件,才慢慢回想起来,中间还出现些问题.在这记录下 ...
拖拽式Vue组件代码生成平台(LCG)新版详细介绍
拖拽式Vue组件代码生成平台是一款小猴自研的Vue代码生成工具,英文全称:Low Code Generator,简称LCG.它也是一种LowCode解决方案.通过它可以快速完成Vue组件的代码骨架搭建 ...
vue如何掌控表情包
因为项目需要,在网上找了很多表情包的开源代码,可能是由于每个开源代码都是基于不同场景下写出来的,对使用者来说,不是那么透明,今天我分享一个简单实用的表情包代码如何在Vue里制作一个表情包组件 1.下 ...
前端之创建vue组件
创建vue组件创建一个待办事项组件在应用程序中使用组件 props让组件动态化(数据更新) 注册props 使用props内的变量 {{}} props 类型 Vue如何持久化数据状态 vue的数 ...
VUE做一个公共的提示组件，显示两秒自动隐藏，显示的值父组件传递给子组件
需求:VUE做一个公共的提示组件,显示两秒自动隐藏,显示的值由父组件动态传给子组件. 效果图: 实现步骤: 1.创建一个子组件 Toptips.vue (它就是公共提示组件), optips.vue代 ...

Vue组件:做一个表情输入键盘

Vue组件:做一个表情输入键盘相关推荐

最新文章

热门文章