Vant 2 - 移动端 Vue 组件库 _ 问题记录

置顶

雨季mo浅忆

已于 2024-02-01 14:50:16 修改

阅读量2.5w

点赞数 8

分类专栏：前端 Vue 文章标签：前端 Vant 2 组件库

于 2022-10-28 00:00:00 首次发布

本文链接：https://blog.csdn.net/weixin_58099903/article/details/127558917

版权

本文记录了在移动端项目中使用 Vant 2 组件库时遇到的问题，包括 Popup 弹出层、DatetimePicker 时间选择、Field 输入框、Form 表单、Picker 选择器、Radio 单选框、Uploader 文件上传等组件的使用问题及解决方案，特别是 Field 输入框与 Popup 结合使用时的 iPhone 真机测试问题。

摘要由CSDN通过智能技术生成

发布初衷：

记录在移动端项目中使用 Vant 2 组件库时遇到的各种问题，

方便以后再次遇到类似问题，能够快时查阅解决，

大家要是觉得有帮助的话，可以收藏一下，博主会不定时更新文章的

基础组件

介绍

弹出层容器，用于展示弹窗、信息提示等内容，支持多个弹出层叠加展示。

问题记录： Field 输入框和 Popup 弹出层两个结合使用时，

在 iPhone 真机上测试的时候出现的一个小 bug ：

点击 Field 输入框的时候， 第一次会弹出一个手机的键盘输入框 ，

点击第二次的时候才出来 Popup 弹出层里面的内容（比如日期选择器）

解决方案：

给 Field 输入框设置 readonly ，通过 readonly 将输入框设置为只读状态

输入框 van-field 必须得加入 readonly 这个只读属性 ,

不然会导致用户手机触发默认键盘遮挡你的弹窗和选择器内容影响体验

也不要用 disabled 来禁用输入框 , 样式会变成禁用状态下的样式很难改动

只需要设置为只读即可 , 也不会触发手机键盘

表单组件

DatetimePicker 时间选择

介绍

时间选择器，支持日期、年月、时分等维度，通常与弹出层组件配合使用。

确认选择的时间数据是需要自己处理的，详见 confirmPicker 方法

<template>
  <div class="seller">
    <van-cell
      title="开始时间"
      is-link
      :value-class="className"
      :value="timeValue"
      @click="showPopup" />
    <van-popup v-model="show" position="bottom">
      <van-datetime-picker
        v-model="currentDate"
        type="datetime"
        title="选择时间"
        :loading="isLoadingShow"
        :min-date="minDate"
        :max-date="maxDate"
        :formatter="formatter"
        @cancel="show = false"
        @confirm="confirmPicker"
      />
    </van-popup>
  </div>
</template>

<script>
export default {
  name: 'Seller',
  data () {
    return {
      msg: '商家页面',
      timeValue: '请选择时间',
      show: false,
      isLoadingShow: true,
      currentDate: new Date(),
      minDate: new Date(),
      maxDate: new Date(2020, 12, 31),
      className: ''
    }
  },
  methods: {
    // 显示弹窗
    showPopup () {
      this.show = true
      this.isLoadingShow = true
      setTimeout(() => {
        this.isLoadingShow = false
      }, 500)
    },
    // 确认选择的时间
    confirmPicker (val) {
      let year = val.getFullYear()
      let month = val.getMonth() + 1
      let day = val.getDate()
      let hour = val.getHours()
      let minute = val.getMinutes()
      if (month >= 1 && month <= 9) { month = `0${month}` }
      if (day >= 1 && day <= 9) { day = `0${day}` }
      if (hour >= 0 && hour <= 9) { hour = `0${hour}` }
      if (minute >= 0 && minute <= 9) { minute = `0${minute}` }
      this.className = 'timeClass'
      this.timeValue = `${year}-${month}-${day} ${hour}:${minute}`
      this.show = false
    },
    // 选项格式化函数
    formatter (type, value) {
      if (type === 'year') {
        return `${value}年`
      } else if (type === 'month') {
        return `${value}月`
      } else if (type === 'day') {
        return `${value}日`
      } else if (type === 'hour') {
        return `${value}