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

目录

基础组件

Popup 弹出层

表单组件

DatetimePicker 时间选择

Field 输入框

Form 表单

Picker 选择器

Radio 单选框

Uploader 文件上传

展示组件

List 列表

导航组件

Tab 标签页

---

发布初衷 ：

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

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

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

---

基础组件

Popup 弹出层

介绍

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

问题记录 ： 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}