詳解vue移動(dòng)端日期選擇組件
先給大家分享一下源碼:https://github.com/lx544690189/vue-mobile-calendar
Build Setup
# install dependencies npm install # build for production with minification npm run build
Usage
install
npm install vue-mobile-calendar
or:(from the dist folder)
<script src="vue-mobile-calendar.js" type="text/javascript"></script>
Quickstart
import Vue from 'vue' import Calendar from 'vue-mobile-calendar' Vue.use(Calendar)
<calendar v-model="calendarShow" :defaultDate="defaultDate" @change="handelChange"> </calendar>
Attributes
option | description | type | default |
---|---|---|---|
v-model | show/hide the calendar | Boolean | false |
format | format date | String | "yyyy-MM-dd" |
defaultDate | default selected date | Date | new Date() |
minDate | optional minimum date | Date | null |
maxDate | optional maximum date | Date | null |
closeByClickmask | close by mask | Boolean | true |
month | text of month | Array | ["一月", "二月", "三月", "四月", "五月", "六月", "七月", "八月", "九月", "十月", "十一月", "十二月"] |
week | text of day | Array | ["周一", "周二", "周三", "周四", "周五", "周六", "周日"] |
Events
event name | description | parameter of callback |
---|---|---|
change | when date change | (date,formatDate) |
Reference
- 解決antd日期選擇組件,添加value就無法點(diǎn)擊下一年和下一月問題
- vue左右滑動(dòng)選擇日期組件封裝的方法
- Vue下拉選擇框Select組件使用詳解(二)
- Vue下拉選擇框Select組件使用詳解(一)
- 基于vue2.0+vuex的日期選擇組件功能實(shí)現(xiàn)
- vue.js實(shí)現(xiàn)仿原生ios時(shí)間選擇組件實(shí)例代碼
- Vue無限滑動(dòng)周選擇日期的組件的示例代碼
- 基于Vue組件化的日期聯(lián)動(dòng)選擇器功能的實(shí)現(xiàn)代碼
- vue-calendar-component 封裝多日期選擇組件的實(shí)例代碼
- Ant Design封裝年份選擇組件的方法
相關(guān)文章
Vue引入路徑正確但一直報(bào)錯(cuò)問題:Already included file name&n
這篇文章主要介紹了Vue引入路徑正確但一直報(bào)錯(cuò):Already included file name ‘××ב differs from file name ‘××ב only in casing.具有很好的參考價(jià)值,希望對大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2023-12-12Vue點(diǎn)擊在彈窗外部實(shí)現(xiàn)一鍵關(guān)閉的示例代碼
在Vue應(yīng)用中,彈窗是一個(gè)常見的交互元素,有時(shí)我們可能希望用戶點(diǎn)擊彈窗外部時(shí),彈窗能夠自動(dòng)關(guān)閉,本文主要介紹了Vue點(diǎn)擊在彈窗外部實(shí)現(xiàn)一鍵關(guān)閉的示例代碼,感興趣的可以了解一下2024-06-06Vue3系列之effect和ReactiveEffect?track?trigger源碼解析
這篇文章主要為大家介紹了Vue3系列之effect和ReactiveEffect?track?trigger源碼解析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-10-10vue最強(qiáng)table vxe-table 虛擬滾動(dòng)列表 前端導(dǎo)出問題分析
最近遇到個(gè)問題,后臺(tái)一次性返回2萬條列表數(shù)據(jù)并且需求要求所有數(shù)據(jù)必須全部展示,不能做假分頁,怎么操作呢,下面通過本文介紹下vue最強(qiáng)table vxe-table 虛擬滾動(dòng)列表 前端導(dǎo)出問題,感興趣的朋友一起看看吧2023-10-10Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn)
這篇文章主要介紹了Vue.js中NaiveUI組件文字漸變的實(shí)現(xiàn),文章圍繞主題展開詳細(xì)的內(nèi)容介紹,具有一定的參考價(jià)值,需要的小伙伴可以參考一下2022-07-07vuex實(shí)現(xiàn)及簡略解析(小結(jié))
這篇文章主要介紹了vuex實(shí)現(xiàn)及簡略解析(小結(jié)),小編覺得挺不錯(cuò)的,現(xiàn)在分享給大家,也給大家做個(gè)參考。一起跟隨小編過來看看吧2019-03-03Vue3中使用styled-components的實(shí)現(xiàn)
本文主要介紹了Vue3中使用styled-components的實(shí)現(xiàn),文中通過示例代碼介紹的非常詳細(xì),對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價(jià)值,需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧2024-05-05Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法(兩種)
這篇文章主要介紹了Vue路由守衛(wèi)及頁面登錄權(quán)限控制的設(shè)置方法,本文通過實(shí)例代碼通過兩種方法給大家介紹的非常詳細(xì),對大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值,需要的朋友可以參考下2020-03-03