vue2 0 Vant ui的日期選擇器type

2021-10-01 14:47:57 字數 1573 閱讀 7343

v-model=

"currentdate"

:type=

"datetype"

@cancel=

"showpickertime = false"

@confirm=

"onconfirm"

:formatter=

"formatter"

/>

裡面主要說明兩個屬性:type和formatter,為什麼要單獨說,因為專案需要,有日、月、年三個選項,而官方文件上type的說明:

有日,有月,沒有年。。。

於是二話不說就開始研究啊,咦,有個formatter屬性很有意思,大家想必都知道,在各種元件上面,這個屬性就代表可以修改格式啊,官方操作看一波:

formatter

(type, value)年`;

}else

if(type ===

'month')月`

;}return value;

}

哈哈,這一看就明白,在使用者選擇日這種日期型別,type=date

在使用者選擇月這種日期型別,type=year-month

在使用者選擇年這種日期型別,type=year-month

月和年是被迫一樣的,因為只有這個,然後是重點:

formatter

(type, value)

` }

else

if(type ===

'month')`

}return value;

}elseif(

this

.dateactive ==1)

` }

else

if(type ===

'month')`

}return value;

}elseif(

this

.dateactive ==2)

` }

else

if(type ===

'month'

)return value;}}

,

到這裡,日曆就可以按照日、月、年展示了:

日:

月:

年:

emmmmm,看見問題了嗎,年後面的這片空白。

做人,最重要的是開心嘛,der

vue2 0 實現全選和全不選

1 v model 乙個收集所有input 除全選框外 陣列checkmodel vue會動態將其checked為true的input的value值存入陣列checkmodel裡 2 watch函式來監聽checkmodel 屬性,當其長度 input元素時 全選按鈕選中 否則取消 3 全選按鈕v ...

vue基於element日期選擇器時間選擇範圍限制

elementui是餓了麼推出的一套基於vue2.x的乙個ui框架。官方文件中使用picker options屬性來限制可選擇的日期 元件 情景 限制指定日期 指定日期以前禁止選擇 data 情景1 設定選擇今天以及今天之後的日期 data 情景2 設定選擇今天以及今天以前的日期 data 情景3 ...

vantUI框架在vue專案中的應用踩坑

細節未完善。參考位址編輯方面的應用。1.訂單提交位址等元件的應用。使用的元件有如下 import from vant 主要是配貨位址編輯這塊 search result 詳細位址搜尋結果 所以去掉了,一是沒有做地理搜尋功能。而且發現模擬測試老是有bug,乾脆去掉。2.預設list屬性。要重新定義。配...