vant 组件库使用中遇到的问题 —— vue

最新推荐文章于 2024-04-03 14:02:31 发布

①条咸鱼

最新推荐文章于 2024-04-03 14:02:31 发布

阅读量1.2k

点赞数

分类专栏： Vue.js CSS 文章标签： vue.js vant

本文链接：https://blog.csdn.net/C_hydar/article/details/128187203

版权

CSS 同时被 2 个专栏收录

9 篇文章 0 订阅

订阅专栏

Vue.js

7 篇文章 0 订阅

订阅专栏

vant 官方文档

遇到的问题

van-field

输入框聚焦的时候，页面会自动放大（iPhone 手机）
解决方案：
在 public目录下的index.html文件的head进行以下设置

<!-- index.html -->
<head>
	<meta content="yes" name="apple-mobile-web-app-capable">
	<meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>

ios 端中使用不灵敏，目前收到的反馈是输入了一大串东西后，不能将焦点聚焦在中间的任何一个位置
解决方案 （没有实践过不知道能否奏效） ：

https://blog.csdn.net/weixin_44207118/article/details/127668405

① npm 安装 fastclick 插件：npm install --save fastclick
② main.js进行设置

// main.js
import  FastClick  from  'fastclick'
FastClick.prototype.focus = function (targetElement) {
  let length;
  //这是因为这些元素并没有selectionStart和selectionEnd的整型数字属性，所以一旦引用就会报错，因此排除这些属性才使用setSelectionRange方法
  if (targetElement.setSelectionRange && targetElement.type.indexOf('date') !== 0 && targetElement.type !== 'time' && targetElement.type !== 'month') {
    length = targetElement.value.length;
    targetElement.focus();
    targetElement.setSelectionRange(length, length);//修复bug ios 11.3不弹出键盘，这里加上聚焦代码，让其强制聚焦弹出键盘
  } else {
    targetElement.focus();
  }
};
FastClick.attach(document.body);

van-datetime-picker

日历控件的v-model一定是绑定的 object 类型
之前我是van-datetime-picker组件的v-model和van-field的value一样绑定的都是字符串，每次选择日期的时候都会报错

正确做法：
van-datetime-picker的v-model一定绑定的是 object 类型，并且想要变量的值发生变化，需要使用@confirm的方法，赋值进去（选择器也一样）

而且formatter设置的不是显示的值的格式，而是控件的格式（跟 ElementUI 不一样）

<van-datetime-picker v-model="dateObj" type="date" title="选择年月日" :max-date="maxDate"
                :min-date="minDate" @confirm="onDateConfirm" :formatter="formatter" />

methods: {
	// 日期选择器选项格式化
    formatter(type, val) {
        if (type === 'year') {
            return val + '-';
        }
        if (type === 'month') {
            return val + '-';
        }
        if (type === 'day') {
            return val + '-';
        }
        if(type==='hour') {
            return val + ':';
        }
        if(type==='minute') {
            return val;
        }
        return val;
    },
}