一個vue的日歷組件

liuhh 發布于2019-08-22 18:16 / 3082人閱讀

一個vue calendar的npm組件 說明：

1.基于element-ui開發的vue日歷組件。

地址

更新:

1.增加value-format指定返回值的格式
2.增加頭部插槽自定義頭部


 

todo="{"yearLabel":"年","month":"月","event":[prevYear,prevMonth,nextYear,nextMonth]}"
event為切換年月是調用事件

3.增加日期多選 :selectionMode=""dates""，事件select返回選擇日期及節點
4.增加語言切換 :lang=""en""
5.抽離css方便自定義樣式 import "ele-calendar/dist/vue-calendar.css" //引入css

注釋：需要配置了jsx依賴

使用方法：

1.下載npm包:

你的VUE項目的根目錄底下運行：

    npm install ele-calendar

2.引入本npm包并注冊為vue的組件：

例如：在需要使用的vue頁面中：

3.通過render-content的渲染Function 自定義日歷顯示內容

例如：

    renderContent(h,parmas) { //設置lunarcalendar=true,parmas返回值包含農歷
                const loop = data =>{
                  return (
                    data.defvalue.value ? ({data.defvalue.text} 
                    備選項
                    
) : {data.defvalue.text}
                  )
               }
               return (
                
                 {loop(parmas)}
                
                );
             },
       parmas返回當前日期和傳入data對應內容

Calendar Attributes

參數	說明	類型	可選值	默認值
data	顯示的數據	array	—	—
prop	對應日期字段名	string	—	—
lang	語言切換	string	en	zh-CN
value-format	綁定值的格式。不指定則綁定值為 Date 對象	string	yyyy-MM-dd	—
selectionMode	日歷模式	string	dates	day
highlight	是否要高亮對應日期	boolean	—	false
currentmonth	高亮選中日期	boolean	—	false
disabledDate	設置禁用狀態，參數為當前日期，要求返回 Boolean	Function	—	—
border	是否帶有邊框	boolean	—	false
lunarcalendar	是否需要農歷	boolean	—	false
defaultValue	默認展示某月	Date	—	—
render-content	內容區的渲染 Function	Function(h, parmas)	—	—

Calendar Events

事件名	說明	參數
date-change	切換日歷年、月	data
select	選擇日期的數組及節點	val,selectDom
pick	點擊日歷	返回當前點擊時間data、event、row、dome

Scoped Slot

name	說明
—	自定義頭的內容，參數為 {"yearLabel":"年","month":"月","event":[prevYear,prevMonth,nextYear,nextMonth]}

云服務器 GPU云服務器日歷組件 vue.js日歷控件 vue組件 vue組件開發

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/95677.html

基于Vue2-Calendar改進的日歷組件（含中文使用說明）

摘要：改進原控件無法切換語言的，支持和。日歷面板增加一個位置選項，允許讓面板右對齊，只需要即可。原事件只有在時才生效，現改為一直有效，這樣當用戶點擊日歷面板上的日期后就可以觸發該事件。一，前言我是剛學Vue的菜鳥，在使用過程中需要用到日歷控件，由于項目中原來是用jQuery寫的，因此用了bootstarp的日歷控件，但是配合Vue實在有點蛋疼，不夠優雅…… 于是網上搜...

番茄西紅柿 2019-04-23 11:41 評論0 收藏0
vue-calendar 基于 vue 2.0 開發的輕量，高性能日歷組件

摘要：基于開發的輕量，高性能日歷組件占用內存小，性能好，樣式好看，可擴展性強原生開發，沒引入第三方庫上很多點擊彈出日歷選擇某個時間的組件，卻沒有找到單純展示日歷并且能點擊獲取時間的組件少部分日歷組件的占用內存過于大，對于日歷這樣簡單的功能來說 vue-calendar-component 基于 vue 2.0 開發的輕量，高性能日歷組件占用內存小，性能好，樣式好看，可擴展性強原生 js...

vvpale 2019-08-22 11:16 評論0 收藏0
vue-calendar 基于 vue 2.0 開發的輕量，高性能日歷組件

摘要：基于開發的輕量，高性能日歷組件占用內存小，性能好，樣式好看，可擴展性強原生開發，沒引入第三方庫上很多點擊彈出日歷選擇某個時間的組件，卻沒有找到單純展示日歷并且能點擊獲取時間的組件少部分日歷組件的占用內存過于大，對于日歷這樣簡單的功能來說 vue-calendar-component 基于 vue 2.0 開發的輕量，高性能日歷組件占用內存小，性能好，樣式好看，可擴展性強原生 js...

megatron 2019-08-29 14:00 評論0 收藏0
vue2.0項目－calendar.js(日歷組件封裝)

摘要：今天要說的是在做這個項目的過程中，自己想加一個日歷功能，但是找遍很多插件，沒有多少是合我心意，于是就想說自己寫一個，但是想象太美好，技術能力不夠，寫不出，此處省略一萬字。最近一直閑來無事，便尋思著做一下自己的個人項目，也想說能使用現在比較流行的一些mvvm框架來做，于是就選用了這樣的一個技術棧vue2.0+vue-router+vuex+webpack來做，做得也是多頁面應用，使用v...

cod7ce 2019-08-21 15:29 評論0 收藏0