欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

關于vant的日歷組件,在iPhonex上可選日期空白

 更新時間：2022年04月25日 16:37:31   作者：manda?Liu  
這篇文章主要介紹了關于vant的日歷組件,在iPhonex上可選日期空白，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vant日歷組件,在iPhonex上可選日期空白

需求

一個列表頁面需要用到日期篩選，用的是vant組件Calendar的選擇日期區(qū)間

bug情況

進入頁面，給了組件默認值，當點開日歷時，可選日期空白，需要先向下拉一下，可選日期才會正常顯示

解決方案

給日歷控件設置高度，默認高度為頁面的80%,我把它改為90%，成功解決bug

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

不要忘記：!important 哦~~，否則更改組件樣式不會生效的

正常效果

vue使用vant的日歷組件

剛開始還研究了半天，其實也并沒有想象中的難，剛開始用的時候什么也顯示不出來，研究了半天顯示出來了但沒有具體地區(qū)，最后終于弄出來了，話不多說，下面就是研究成果，記錄下來方便以后查看，也希望能幫助到同樣遇到這個困難的你。。。

首先看成果

直接上代碼

也可以直接去官網(wǎng)自行研究Vant

template中的代碼

<van-field
  readonly
  clickable
  name="area"
  :value="value"
  label="地區(qū)選擇"
  placeholder="點擊選擇省市區(qū)"
  @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, //這里要注意一下，在官網(wǎng)上后面是個空對象,需要改一下
    };
  },
  methods: {
    onConfirm(values) {
      this.value = values
        .filter((item) => !!item)
        .map((item) => item.name)
        .join('/');
      this.showArea = false;
    },
  },
};

直通Area 省市區(qū)選擇組件的快車

這里我選擇的是下面這種方式

這里是安裝及使用的步驟

NPM

npm i @vant/area-data -D

YARN

yarn add @vant/area-data --dev

使用

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

注意：areaList: {} 換成 areaList

趕緊動起手來試試。

以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

相關文章

  • Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)

    Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)

    這篇文章主要介紹了Nuxt 嵌套路由nuxt-child組件用法(父子頁面組件的傳值)，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
    2020-11-11
  • 3種vue路由傳參的基本模式

    3種vue路由傳參的基本模式

    這篇文章主要為大家詳細介紹了vue路由傳參的3種基本模式，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2018-02-02
  • vue中的使用token的方法示例

    vue中的使用token的方法示例

    這篇文章主要介紹了vue中的使用token的方法示例，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧
    2020-03-03
  • 詳解Vue中組件傳值的多重實現(xiàn)方式

    詳解Vue中組件傳值的多重實現(xiàn)方式

    這篇文章主要介紹了詳解Vue中組件傳值的多重實現(xiàn)方式,非常不錯，具有一定的參考借鑒價值，需要的朋友可以參考下
    2019-08-08
  • Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題

    Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題

    這篇文章主要介紹了Vue動態(tài)獲取數(shù)據(jù)后控件不可編輯問題，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
    2022-04-04
  • Vue3使用JSX的方法實例(筆記自用)

    Vue3使用JSX的方法實例(筆記自用)

    以前我們經(jīng)常在react中使用jsx，現(xiàn)在我們在vue中也是用jsx,下面這篇文章主要給大家介紹了關于Vue3使用JSX的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • windows下vue.js開發(fā)環(huán)境搭建教程

    windows下vue.js開發(fā)環(huán)境搭建教程

    這篇文章主要為大家詳細介紹了windows下vue.js開發(fā)環(huán)境搭建教程，具有一定的參考價值，感興趣的小伙伴們可以參考一下
    2017-03-03
  • Vue手寫防抖和節(jié)流函數(shù)代碼詳解

    Vue手寫防抖和節(jié)流函數(shù)代碼詳解

    在Vue中函數(shù)的防抖和節(jié)流不是什么新鮮話題,這篇文章主要給大家介紹了關于Vue3中防抖/節(jié)流的相關資料,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
    2023-02-02
  • vue.js vue-router如何實現(xiàn)無效路由(404)的友好提示

    vue.js vue-router如何實現(xiàn)無效路由(404)的友好提示

    眾所周知vue-router是Vue.js官方的路由插件，它和vue.js是深度集成的，適合用于構建單頁面應用，下面這篇文章主要給大家介紹了關于vue.js中vue-router如何實現(xiàn)無效路由(404)的友好提示的相關資料，需要的朋友可以參考下。
    2017-12-12
  • Vue組件上使用v-model之單選框

    Vue組件上使用v-model之單選框

    這篇文章主要介紹了Vue組件上使用v-model之單選框,代碼分為子組件內(nèi)容和父組件內(nèi)容，本文結合實例代碼給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下
    2022-10-10

最新評論