關(guān)于vant的日歷組件,在iPhonex上可選日期空白
vant日歷組件,在iPhonex上可選日期空白
需求
一個(gè)列表頁(yè)面需要用到日期篩選，用的是vant組件Calendar的選擇日期區(qū)間
bug情況
進(jìn)入頁(yè)面，給了組件默認(rèn)值，當(dāng)點(diǎn)開(kāi)日歷時(shí)，可選日期空白，需要先向下拉一下，可選日期才會(huì)正常顯示
解決方案
給日歷控件設(shè)置高度，默認(rèn)高度為頁(yè)面的80%,我把它改為90%，成功解決bug
.van-calendar__popup.van-popup--bottom, .van-calendar__popup.van-popup--top{
height: 90% !important;
}
不要忘記：!important 哦~~，否則更改組件樣式不會(huì)生效的
正常效果
vue使用vant的日歷組件
剛開(kāi)始還研究了半天，其實(shí)也并沒(méi)有想象中的難，剛開(kāi)始用的時(shí)候什么也顯示不出來(lái)，研究了半天顯示出來(lái)了但沒(méi)有具體地區(qū)，最后終于弄出來(lái)了，話不多說(shuō)，下面就是研究成果，記錄下來(lái)方便以后查看，也希望能幫助到同樣遇到這個(gè)困難的你。。。
首先看成果
直接上代碼
也可以直接去官網(wǎng)自行研究Vant
template中的代碼
<van-field
readonly
clickable
name="area"
:value="value"
label="地區(qū)選擇"
placeholder="點(diǎn)擊選擇省市區(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)上后面是個(gè)空對(duì)象,需要改一下
};
},
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
趕緊動(dòng)起手來(lái)試試。
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
我們?cè)谧龊笈_(tái)管理系統(tǒng)里面有非常多的表單需求,下面這篇文章主要給大家介紹了關(guān)于Vue如何獲取表單數(shù)據(jù)的相關(guān)資料,文中通過(guò)實(shí)例代碼介紹的非常詳細(xì),需要的朋友可以參考下2023-06-06
element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問(wèn)題詳解(二十多行代碼搞定）
大家在使用element-ui的時(shí)候肯定會(huì)遇到這樣一個(gè)問(wèn)題,就是在你使用級(jí)聯(lián)選擇器的回顯問(wèn)題,下面這篇文章主要給大家介紹了關(guān)于element-ui動(dòng)態(tài)級(jí)聯(lián)選擇器回顯問(wèn)題的相關(guān)資料,需要的朋友可以參考下2023-03-03
這篇文章主要介紹了vue2中使用sass并配置全局的sass樣式變量的方法,本文給大家介紹的非常詳細(xì)，具有一定的參考借鑒價(jià)值，需要的朋友可以參考下2018-09-09
這篇文章主要介紹了vue 左滑刪除功能的示例代碼，文中通過(guò)示例代碼介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2019-01-01
在本文章里小編給大家整理了關(guān)于Vue中this.$nextTick的作用及用法，有需要的朋友們可以跟著學(xué)習(xí)參考下。2020-02-02
vue使用screenfull插件實(shí)現(xiàn)全屏功能
這篇文章主要為大家詳細(xì)介紹了vue使用screenfull插件實(shí)現(xiàn)全屏功能，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下2020-09-09
本篇文章主要介紹了vue2 前端搜索實(shí)現(xiàn)示例，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2018-02-02
vue props傳值失敗 輸出undefined的解決方法
今天小編就為大家分享一篇vue props傳值失敗 輸出undefined的解決方法，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2018-09-09
vue項(xiàng)目如何監(jiān)聽(tīng)localStorage或sessionStorage的變化
這篇文章主要介紹了vue 項(xiàng)目如何監(jiān)聽(tīng)localStorage或sessionStorage的變化，幫助大家更好的理解和使用vue框架，感興趣的朋友可以了解下2021-01-01
今天小編就為大家分享一篇vue-router 中 meta的用法詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11