关于vant的日历组件,在iPhonex上可选日期空白

更新时间：2022年04月25日 16:37:31 作者：manda Liu

这篇文章主要介绍了关于vant的日历组件,在iPhonex上可选日期空白，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教

vant日历组件,在iPhonex上可选日期空白

需求

一个列表页面需要用到日期筛选，用的是vant组件Calendar的选择日期区间

bug情况

进入页面，给了组件默认值，当点开日历时，可选日期空白，需要先向下拉一下，可选日期才会正常显示

解决方案

给日历控件设置高度，默认高度为页面的80%,我把它改为90%，成功解决bug

.van-calendar__popup.van-popup--bottom, .van-calendar__popup.van-popup--top{
    height: 90% !important;
  }

不要忘记：!important 哦~~，否则更改组件样式不会生效的

正常效果

vue使用vant的日历组件

刚开始还研究了半天，其实也并没有想象中的难，刚开始用的时候什么也显示不出来，研究了半天显示出来了但没有具体地区，最后终于弄出来了，话不多说，下面就是研究成果，记录下来方便以后查看，也希望能帮助到同样遇到这个困难的你。。。

首先看成果

直接上代码

也可以直接去官网自行研究Vant

template中的代码

<van-field
  readonly
  clickable
  name="area"
  :value="value"
  label="地区选择"
  placeholder="点击选择省市区"
  @click="showArea = true"
/>
<van-popup v-model="showArea" position="bottom">
  <van-area
    :area-list="areaList"
    @confirm="onConfirm"
    @cancel="showArea = false"
  />
</van-popup>

script中的代码

export default {
  data() {
    return {
      value: '',
      showArea: false,
      areaList, //这里要注意一下，在官网上后面是个空对象,需要改一下
    };
  },
  methods: {
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
  },
};

直通Area 省市区选择组件的快车

这里我选择的是下面这种方式

这里是安装及使用的步骤

NPM

npm i @vant/area-data -D

YARN

yarn add @vant/area-data --dev

使用

import { areaList } from ‘@vant/area-data';

注意：areaList: {} 换成 areaList

赶紧动起手来试试。

以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。

您可能感兴趣的文章:

Vue如何获取表单数据
我们在做后台管理系统里面有非常多的表单需求,下面这篇文章主要给大家介绍了关于Vue如何获取表单数据的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
2023-06-06
element-ui动态级联选择器回显问题详解(二十多行代码搞定）
大家在使用element-ui的时候肯定会遇到这样一个问题,就是在你使用级联选择器的回显问题,下面这篇文章主要给大家介绍了关于element-ui动态级联选择器回显问题的相关资料,需要的朋友可以参考下
2023-03-03
vue2中使用sass并配置全局的sass样式变量的方法
这篇文章主要介绍了vue2中使用sass并配置全局的sass样式变量的方法,本文给大家介绍的非常详细，具有一定的参考借鉴价值，需要的朋友可以参考下
2018-09-09
vue 左滑删除功能的示例代码
这篇文章主要介绍了vue 左滑删除功能的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-01-01
Vue中this.$nextTick的作用及用法
在本文章里小编给大家整理了关于Vue中this.$nextTick的作用及用法，有需要的朋友们可以跟着学习参考下。
2020-02-02
vue使用screenfull插件实现全屏功能
这篇文章主要为大家详细介绍了vue使用screenfull插件实现全屏功能，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2020-09-09
vue2 前端搜索实现示例
本篇文章主要介绍了vue2 前端搜索实现示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2018-02-02
vue props传值失败输出undefined的解决方法
今天小编就为大家分享一篇vue props传值失败输出undefined的解决方法，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2018-09-09
vue项目如何监听localStorage或sessionStorage的变化
这篇文章主要介绍了vue 项目如何监听localStorage或sessionStorage的变化，帮助大家更好的理解和使用vue框架，感兴趣的朋友可以了解下
2021-01-01
vue-router 中 meta的用法详解
今天小编就为大家分享一篇vue-router 中 meta的用法详解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2019-11-11