移动端点击input会把底部样式顶起解决方案

很多人会遇到 H5 点击input 安卓端会把底部tab样式弹上去如何解决这个问题特别是安卓端会经常遇到
但是网上又没有特别完美的方法

我这里自己弄了一个解决方案
![在这里插入图片描述](https://img-blog.csdnimg.cn/20201202155007681.png#pic_center

创建 store

导入main.js

通过actions 异步触发同步 mutations
注意这里 actions和mutations都是方法
所以名字要不一样
getters 是计算属性 computed
因为有些参数拿到后可能需要加减乘除等复杂计算
通过getters定义一个属性返回值
拿到state里面的某个值进行处理 return 返回
这个属性值可以和state里面的属性名一样

因为有很多方法属性是重复的所以我们可以用到mixins

import 导入辅助函数
mapGetters Actions 是在mixins.js 最外面

这里的mounted console 打印是否混入成功
computed 混入属性hidshow
下面也是如此 …mapActions[‘xx’]
混入方法之后就直接可以使用this.xx 并且可以传入参数给Vuex

其中辅助函数引入的东西还可以取别名直接使用

使用的时候直接混入

然后blur focus方法用上
blur失去焦点 focus焦点
监听input 焦点的变化渲染tab

然后在tab页面的控制页使用getters里面的值进行判断控制 tab的显示

产生 components的原因就是使用了vuex 但是
vue和vue-router的版本不匹配

卸载node-modules之后重新安装回来就可以了
可能有版本冲突问题

事件委托进行美化

重点blur方法就是focusout focus方法就是focusin 在这里
封装在mixins 就可以动态控制按钮的显示了

只需要给每一个input 添加上一个class=“input”

如果觉得可以的话帮你解决了的话点赞三连多分享么么哒

移动端点击input会把底部样式顶起解决方案相关推荐

小程序点击input框时被软键盘挡住解决方案
小程序点击input框时被软键盘挡住解决方案可以正在input上面加 cursor-spacing='10' <input type="number" value=&quo ...
移动端点击input不触发光标（原生js）
当在移动端的时候,我那边在点击input输入框的时候可以跳转到另一个页面,而不是触发光标,这里就可以在获取焦点的时候让input失去焦点,也可以屏蔽默认键盘弹出 // 失去焦点var inp = do ...
禁止手机端点击input框跳出输入法
第一种方式:HTML <input> 标签的 disabled 属性 <form action="form_action.asp" method="ge ...
在手机端点击input框不弹出输入法的方法
1.使用CSS样式 : input { pointer-events: none; } 2. 使用事件阻止 : input.onmousedown = function (e) { e.prevent ...
input输入框在移动端点击有阴影解决方法
input输入框在移动端点击有阴影解决方法参考文章: (1)input输入框在移动端点击有阴影解决方法 (2)https://www.cnblogs.com/dingjiujiu/p/6694332 ...
CSS_css去掉input标签的默认样式，去除input点击样式
去掉input标签的默认样式,去除input点击样式 outline: none; input {background: none;outline: none;border: none; }
#input框#默认样式#：怎么修改点击之后的边框的样式
目录前言一.how? 总结前言在我们的项目的样式设计中,input框的默认样式,一般是满足不了我们的需求.所以,我们就要改变input框的默认样式.这里我们将设置input框的样式中,获取焦点 ...
解决input获取焦点时底部菜单被顶上来问题
当input获取焦点时底部菜单被顶上来问题解决方案: 1.如果是短页面,比如登录页,上部的登录表单div与底部的菜单div不会重合(两个div是同级的),可以通过设置登录表单div的z-index比底 ...
怎么修改谷歌浏览器文件提交按钮样式_使用css自定义input file浏览按钮样式
前言文件上传用途非常广泛,浏览器自带文件控件不太美观,很多时候不能满足需求,需要自定义input [type=file]的样式. 不同浏览器的file控件表现形式不一样火狐谷歌 IE 不同浏览器 ...

移动端点击input会把底部样式顶起解决方案

移动端点击input会把底部样式顶起解决方案相关推荐

最新文章

热门文章