使用vant踩过的那些坑--待补充

最新推荐文章于 2024-03-29 16:00:36 发布
最新推荐文章于 2024-03-29 16:00:36 发布
阅读量779 收藏
点赞数
文章标签： 前端 vue
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_49089159/article/details/121605007
版权

1. ios无法调用Picker

有个表单需要输入号码，所以选择使用picker+NumberKeyboard结合来做，但在使用过程中，发现ios中有的系统版本调用不了Picker，就是Picker选择器无法弹出，查了很多资料，都说是dom的节点载入位置有问题，后来改了之后发现没用，最后的解决办法就是调用系统的数字键盘，这个最保险了。

<van-field type="tel"></van-field>
仙姑不仙
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
利用vant UI 数字键盘做金额输入键盘
qiaokeli826的专栏
11-05 4452
先上效果 vant UI 数字键盘是比较通用的，往往需要根据实际业务需要进行相应整改，比如金额输入： 1、小数点不能再最前面； 2、保留小数点后两位； 3、不允许出现多于1位的小数点； 4、不允许前面出现两个0 下面开整： <template> <div> <van-field readonly label="￥" clickable :value="value1" @touchstart.native.stop="show = t
vant组件 NumberKeyboard 组件中的双向绑定弹出键盘bug
huxiaowei_的博客
10-29 4679
vant 组件中的 NumberKeyboard在运用到移动端时，IOS和Android都会出现bug,感觉是个巨坑。 一、bug情况 IOS：输入数字会出现延迟卡顿的情况，我开始以为是IOS未引入fastclick的问题，但引入后问题并未解决 Android:输入数字后，会将上一个输入的数字清除，再将这个数字显示，也就是每次只能显示当前输入的数字 二、解决办法 自己写一套键盘和样式 html部分...
【修复日常bug】移动端vant框架van-password-input组件在pc端无法点击
技术大咖 Rohlin的博客
05-14 4814
摘要 vant本身是个移动端框架，没有做pc端兼容处理，在pc端使用（van-password-input）密码输入框组件，会导致无法点击的情况发生，如果按f12，开启手机端调试模式是正常的，因为浏览器本身有模拟手机端的调试，我遇到的情况就是，原先项目使用了vant框架做h5页面，然后需要在pc端运行，修改了pc端显示的h5尺寸宽度为414px，效果也就是一个小手机的样式显示在页面并居中。 遇到问题 那么问题来了，如果在pc端不开启f12手机模拟调试，导致van-password-input组件.
vue +element 数字键盘，vant 数字键盘使用
wqnmlgbsz的博客
09-29 2266
下载vant 不在赘述 可以看官网 min.js 写入 import 'vant/lib/index.css'; import { NumberKeyboard } from 'vant'; Vue.use(NumberKeyboard); 下面是页面 <template> <div > <van-number-keyboard :show="show" extra-key="." @input="onInput" @d...
解决ios软键盘弹起遮盖住底部输入框的问题（终极解决方案！！！绝对好用）
热门推荐
AliceWu的博客
07-05 1万+
html &amp;amp;lt;div class=&amp;quot;layout_flex&amp;quot;&amp;amp;gt; &amp;amp;lt;!-- 头部 --&amp;amp;gt; &amp;amp;lt;div class=&amp;quot;header&amp;quot;&amp;amp;gt;header&amp;amp;lt;/div&a
ios端中使用vant ui输入框不灵敏
weixin_44207118的博客
11-03 826
ios端输入框点击多次或用力点击才能够获取焦点
解决vue使用vant下拉框van-dropdown-item 绑定title值不变问题
10-15
在Vue开发过程中，使用Vant UI库的下拉框组件`van-dropdown-item`时，可能会遇到一个问题：下拉框的标题`title`始终不变，即使选中了不同的选项。本篇将详细介绍如何解决这个问题。 首先，我们需要确保Vue项目正确...
vant 自定义 van-dropdown-item的用法
10-15
在移动应用开发中，Vant UI 是一款流行的组件库，它为 Vue.js 应用提供了丰富的 UI 元素和交互设计。本文将详细介绍如何自定义 Vant 的 `van-dropdown-item` 组件，以满足特定的设计需求。 `van-dropdown-item` 是 ...
Vant-Aliapp：支付宝小程序版本Vant组件库
02-26
npm i vant-aliapp -S --production 通过yarn安装 yarn add vant-aliapp --production npm使用 。 下载代码使用 直接通过git下载Vant Aliapp源代码，添加alipay alipay/npm目录副本到自己的项目中 git clone ...
vant-mall-tpl:vant-ui商城模板
05-15
"vant-mall-tpl:vant-ui商城模板" 是一个基于Vant UI的电子商务网站模板，专为快速构建前端商场界面而设计。这个模板利用了Vant UI组件库，提供了丰富的UI元素和交互设计，帮助开发者高效地搭建功能完备、美观的...
PickerView实现三列省市区选择
04-13
简单实现PickerView实现三列省市区选择
keyboard.js
09-11
轻便的js数字键盘，可根据input框位置和窗口大小自动调整键盘显示位置
基于vant的密码输入框，数字键盘，及金额输入
coldriversnow的专栏
08-08 1545
【代码】基于vant的密码输入框，数字键盘，及金额输入。
vant的popup+picker在ios上的一个bug
besttoby01的博客
07-02 3293
场景描述 近期做了一个体检的项目，需求是需要先选择项目，然后去选择排班日期。也就是具有二次关联。 bug描述 在部分的ios上，第二次选择排版日期出现了蒙版样式没了。本来的效果是选择器各项具有模糊效果，只有选中的一项是100%高亮的。 排查问题 先是查看源码，怀疑源码有问题。初步排查下来，发现定位，css都没有问题。（css中模糊使用渐变处理的） 其次一个一个试，最后发现问题是因为dom突然间增加了一段导致的。 结果分析 1. 低版本的ios上dom的定位可能会不太准确 ...
vue中使用vant组件出现软键盘顶起页面——导致事件失效
Smile_ping的博客
03-10 6812
vue中使用vant地址组件页面被顶起问题 遇到问题： IOS设备，当前发现有7Plus、iphone11【测试机有限，更新版本设备未测】 在vue页面中使用vant地址组件， 当操作到详细地址时，软键盘顶起页面往上移动。 当软键盘关闭时，页面没有还原。 操作页面点击事件时无效，【因页面移动导致位置不对】 复现效果图 输入收货人时页面展示正常 当操作详细地址时会发现，软键盘顶...
van-picker下拉列表浮动在顶层，遮挡其他界面
qq_37471721的博客
07-30 1298
由于近期项目采用了Vant作为移动端UI组件库,在使用vant-picker时遇到问题，整理记录下来，方便自己及他人。 代码如下： 期望的效果 实际效果 可以看出每次点击选择“维护计划”的时候，总是会弹出一个列表层，遮挡住我要选择的界面，令人费解。 解决办法： 需要给van-field增加readonly属性。 最终代码： ending… ...
vant2组件使用坑点
最新发布
大圣归来圣骑士清欢的博客
03-29 281
Vant2 Dialog报错
在vant组件下阻止手机自带键盘弹起
qq_53208184的博客
07-14 5149
在vant组件下阻止手机自带键盘弹起
vue封装自定义数字键盘组件
kivet的博客
07-02 9314
最近在公司做一个项目，简单来说就是web端微信公众号上的一个申请表单页面，随便如个图 环境： vue框架 + vant组件库 + 其它（这里用不上的，不说） 都知道，input输入框如果不去给它设置属性，它默认地在移动端访问时，获取焦点的时候弹出的是中文，或者英文之类的默认键盘，反正不是数字键盘，但是看图可知，有关数量或者电话之类的数字字符串输入，并不需要中文，或者英文字母，只需要输入数字即可...
Vant 的van-count-down 标签如何使用
05-20
Vant UI库的van-count-down标签是一个倒计时组件，用于在页面中展示倒计时功能。具体使用方法如下： 1. 引入van-count-down组件 ```javascript import { VanCountDown } from 'vant'; ``` 2. 在页面中使用van-count-down标签 ```html <van-count-down :time="time" @change="onChange" @finish="onFinish" /> ``` 其中，time属性是倒计时的总时间（单位为毫秒），change事件会在倒计时每秒钟改变时触发，finish事件会在倒计时结束时触发。 3. 在Vue实例中定义time属性和onChange、onFinish方法 ```javascript export default { data() { return { time: 60000 // 60秒 } }, methods: { onChange(time) { console.log(time); // 当前剩余时间（单位为毫秒） }, onFinish() { console.log('倒计时结束'); } } } ``` 这样就可以在页面中展示一个倒计时组件，并在倒计时结束时触发相应事件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值