資訊專欄INFORMATION COLUMN
一個(gè)vue calendar的npm組件 說(shuō)明：
地址
1.增加value-format指定返回值的格式
2.增加頭部插槽自定義頭部
{{ slotProps.todo}} todo="{"yearLabel":"年","month":"月","event":[prevYear,prevMonth,nextYear,nextMonth]}" event為切換年月是調(diào)用事件
3.增加日期多選 :selectionMode=""dates""，事件select返回選擇日期及節(jié)點(diǎn)
4.增加語(yǔ)言切換 :lang=""en""
5.抽離css方便自定義樣式 import "ele-calendar/dist/vue-calendar.css" //引入css
注釋：需要配置了jsx依賴
使用方法：npm install ele-calendar
例如：在需要使用的vue頁(yè)面中：
例如：
renderContent(h,parmas) { //設(shè)置lunarcalendar=true,parmas返回值包含農(nóng)歷
const loop = data =>{
return (
data.defvalue.value ? ({data.defvalue.text}
備選項(xiàng)
) : {data.defvalue.text}
)
}
return (
{loop(parmas)}
);
},
parmas返回當(dāng)前日期和傳入data對(duì)應(yīng)內(nèi)容
Calendar Attributes
| 參數(shù) | 說(shuō)明 | 類型 | 可選值 | 默認(rèn)值 |
|---|---|---|---|---|
| data | 顯示的數(shù)據(jù) | array | — | — |
| prop | 對(duì)應(yīng)日期字段名 | string | — | — |
| lang | 語(yǔ)言切換 | string | en | zh-CN |
| value-format | 綁定值的格式。不指定則綁定值為 Date 對(duì)象 | string | yyyy-MM-dd | — |
| selectionMode | 日歷模式 | string | dates | day |
| highlight | 是否要高亮對(duì)應(yīng)日期 | boolean | — | false |
| currentmonth | 高亮選中日期 | boolean | — | false |
| disabledDate | 設(shè)置禁用狀態(tài)，參數(shù)為當(dāng)前日期，要求返回 Boolean | Function | — | — |
| border | 是否帶有邊框 | boolean | — | false |
| lunarcalendar | 是否需要農(nóng)歷 | boolean | — | false |
| defaultValue | 默認(rèn)展示某月 | Date | — | — |
| render-content | 內(nèi)容區(qū)的渲染 Function | Function(h, parmas) | — | — |
| 事件名 | 說(shuō)明 | 參數(shù) |
|---|---|---|
| date-change | 切換日歷年、月 | data |
| select | 選擇日期的數(shù)組及節(jié)點(diǎn) | val,selectDom |
| pick | 點(diǎn)擊日歷 | 返回當(dāng)前點(diǎn)擊時(shí)間data、event、row、dome |
| name | 說(shuō)明 |
|---|---|
| — | 自定義頭的內(nèi)容，參數(shù)為 {"yearLabel":"年","month":"月","event":[prevYear,prevMonth,nextYear,nextMonth]} |
文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/95677.html
摘要：改進(jìn)原控件無(wú)法切換語(yǔ)言的，支持和。日歷面板增加一個(gè)位置選項(xiàng)，允許讓面板右對(duì)齊，只需要即可。原事件只有在時(shí)才生效，現(xiàn)改為一直有效，這樣當(dāng)用戶點(diǎn)擊日歷面板上的日期后就可以觸發(fā)該事件。一，前言 我是剛學(xué)Vue的菜鳥，在使用過(guò)程中需要用到日歷控件，由于項(xiàng)目中原來(lái)是用jQuery寫的，因此用了bootstarp的日歷控件，但是配合Vue實(shí)在有點(diǎn)蛋疼，不夠優(yōu)雅…… 于是網(wǎng)上搜...
摘要：基于開發(fā)的輕量，高性能日歷組件占用內(nèi)存小，性能好，樣式好看，可擴(kuò)展性強(qiáng)原生開發(fā)，沒(méi)引入第三方庫(kù)上很多點(diǎn)擊彈出日歷選擇某個(gè)時(shí)間的組件，卻沒(méi)有找到單純展示日歷并且能點(diǎn)擊獲取時(shí)間的組件少部分日歷組件的占用內(nèi)存過(guò)于大，對(duì)于日歷這樣簡(jiǎn)單的功能來(lái)說(shuō) vue-calendar-component 基于 vue 2.0 開發(fā)的輕量，高性能日歷組件 占用內(nèi)存小，性能好，樣式好看，可擴(kuò)展性強(qiáng) 原生 js...
摘要：基于開發(fā)的輕量，高性能日歷組件占用內(nèi)存小，性能好，樣式好看，可擴(kuò)展性強(qiáng)原生開發(fā)，沒(méi)引入第三方庫(kù)上很多點(diǎn)擊彈出日歷選擇某個(gè)時(shí)間的組件，卻沒(méi)有找到單純展示日歷并且能點(diǎn)擊獲取時(shí)間的組件少部分日歷組件的占用內(nèi)存過(guò)于大，對(duì)于日歷這樣簡(jiǎn)單的功能來(lái)說(shuō) vue-calendar-component 基于 vue 2.0 開發(fā)的輕量，高性能日歷組件 占用內(nèi)存小，性能好，樣式好看，可擴(kuò)展性強(qiáng) 原生 js...
摘要：今天要說(shuō)的是在做這個(gè)項(xiàng)目的過(guò)程中，自己想加一個(gè)日歷功能，但是找遍很多插件，沒(méi)有多少是合我心意，于是就想說(shuō)自己寫一個(gè)，但是想象太美好，技術(shù)能力不夠，寫不出，此處省略一萬(wàn)字。 最近一直閑來(lái)無(wú)事，便尋思著做一下自己的個(gè)人項(xiàng)目，也想說(shuō)能使用現(xiàn)在比較流行的一些mvvm框架來(lái)做，于是就選用了這樣的一個(gè)技術(shù)棧vue2.0+vue-router+vuex+webpack來(lái)做，做得也是多頁(yè)面應(yīng)用，使用v...
閱讀 1698·2019-08-29 13:53
閱讀 3344·2019-08-29 13:50
閱讀 941·2019-08-27 10:51
閱讀 672·2019-08-26 18:36
閱讀 2004·2019-08-26 11:00
閱讀 699·2019-08-26 10:36
閱讀 3304·2019-08-23 17:58
閱讀 2102·2019-08-23 15:17
