首先是實(shí)現(xiàn)之后的效果圖以及簡(jiǎn)單介紹一下功能
- 支持標(biāo)記時(shí)間
- 支持自定義時(shí)間段
- 支持傳入class style 點(diǎn)擊事件 是否禁用 是否展示
實(shí)現(xiàn)理念
因?yàn)樵摻M件只是簡(jiǎn)單展示作用, 所以數(shù)據(jù)維護(hù)我們可以放到外面去做,里面只做狀態(tài)管理
第一步定義moment的基礎(chǔ)方法, 通過這幾個(gè)方法我們可以拿到準(zhǔn)確的日期以及對(duì)應(yīng)的星期
// 獲取日期
getDate(time) {
return moment(time).format('MM-DD')
},
// 獲取星期
getWeek(time) {
return moment(time).format('dddd')
},
// 獲取兩個(gè)日期的時(shí)間差
getDiffDate(startTime, endTime) {
return moment(endTime).diff(moment(startTime)) / (1000 * 60) / 60 / 24
},
// 獲取時(shí)間戳
getUx(time) {
return moment(time).valueOf()
}
第二步初始化props參數(shù), 在這里我們計(jì)劃接收4個(gè)參數(shù) 且這四個(gè)參數(shù)都不是必傳的
props: {
DateRange: {
type: Array,
default: () => []
},
times: {
type: Object,
default: () => { }
},
empty: {
type: String
},
slotRender: {
type: Boolean,
default: () => false
}
}
第一個(gè)參數(shù)DateRange 日期范圍 如果不傳則startTime為當(dāng)天, endTime為 add 1 個(gè)月, 對(duì)應(yīng)代碼如下
if (!this.DateRange.length) {
this.startTime = this.getUx(moment().format('YYYY-MM-DD'))
this.endTime = this.getUx(moment().add(1, 'months').format('YYYY-MM-DD'))
} else {
this.startTime = this.getUx(this.DateRange[0])
this.endTime = this.getUx(this.DateRange[1])
}
第二個(gè)參數(shù)times, 展示的是每天的各個(gè)時(shí)間點(diǎn), 如果不傳則渲染默認(rèn)時(shí)間點(diǎn).
針對(duì)默認(rèn)時(shí)間點(diǎn)我們?nèi)绻枰?dòng)態(tài)的設(shè)置它的時(shí)間標(biāo)識(shí)(右上紅點(diǎn)), 是否禁用則需要通過ref調(diào)用組件方法
initTimes() {
const i = {}
const t = ['8:30', '9:00', '9:30', '10:00', '10:30', '11:00', '11:30', '13:00', '13:30', '14:00', '14:30', '15:00', '15:30', '16:00', '16:30']
t.forEach(v => {
i[v] = {
style: {},
class: '',
show: true,
disabled: false,
label: v
}
})
if (!this.times) {
this.timeButtons = i
return
} else {
Object.keys(this.times).forEach(k => {
this.times[k] = Object.assign({
style: {},
class: '',
show: true,
disabled: false,
label: ''
}, this.times[k])
})
this.timeButtons = this.times
}
}
組件方法如下圖 這個(gè)方法會(huì)接收一個(gè)keys values 的對(duì)象, 也可以是一個(gè)數(shù)組對(duì)象
addTimes(item) {
if (Array.isArray(item)) {
item.forEach(v => {
const as = Object.assign(this.timeButtons[v.keys], v.values)
this.$set(this.timeButtons, v.keys, as)
})
return
}
const as = Object.assign(this.timeButtons[item.keys], item.values)
this.$set(this.timeButtons, item.keys, as)
}
我們通過傳入對(duì)應(yīng)時(shí)間點(diǎn), 和 動(dòng)態(tài)的方法判斷方法就可以了
this.$refs.calendar.addTimes({
keys: '8:30',
values: {
disabled: (item, time) => {
if (time.week === '星期四') {
return true
}
return false
},
dot: (item, time) => {
if (time.week === '星期四') {
return true
}
return false
},
label: '8:30',
func: (item, time) => {
console.log(item, time)
}
}})
第三個(gè)參數(shù) empty 空文本的內(nèi)容 字符串
如果傳了這個(gè)參數(shù) 則內(nèi)容將會(huì)被屏蔽掉 效果如下, 暫時(shí)未考慮不同日期,展示不同內(nèi)容,如下圖 6 - 24 展示空文本, 點(diǎn)擊 6- 25 展示正常的時(shí)間選擇的情況
第四個(gè)參數(shù) slotRender slot 開關(guān) 打開后可以傳一個(gè)slot內(nèi)容
<calendar :slotRender="true" ref="calendar" @handClick="handClick">
<slot>
<el-badge is-dot class="item">數(shù)據(jù)查詢</el-badge>
</slot>
</calendar>
Times 參數(shù)
times是動(dòng)態(tài)綁定的地方 ,所有參數(shù)都可以通過function的方式返回, 返回的參數(shù)是當(dāng)前的item, 以及當(dāng)前選中的tabs
// 默認(rèn)參數(shù)
style: {},
class: '',
show: true,
disabled: false,
dot: false,
label: ''
handStyle(item) {
if (typeof item.style === 'function') {
return item.style(item, this.activeTabs)
}
return item.style
},
handClass(item) {
if (typeof item.class === 'function') {
return item.class(item, this.activeTabs)
}
return item.class
},
handShow(item) {
if (typeof item.show === 'function') {
return item.show(item, this.activeTabs)
}
return item.show
},
handDisabled(item) {
if (typeof item.disabled === 'function') {
return item.disabled(item, this.activeTabs)
}
return item.disabled
},
handClickDot(item) {
if (typeof item.dot === 'function') {
return item.dot(item, this.activeTabs)
}
return item.dot
},
handClick(item) {
if (typeof item.func === 'function') {
return item.func(item, this.activeTabs)
}
this.$emit('handClick', item, this.activeTabs)
},
比如我們現(xiàn)在在每個(gè)周四的8:30綁定了一個(gè)時(shí)間標(biāo)識(shí), 需要點(diǎn)亮點(diǎn)則我們需要傳入
this.$refs.calendar.addTimes({
keys: '8:30',
values: {
dot: (item, time) => {
if (time.week === '星期四') {
return true
}
return false
}
}
})
也可以在初始化的時(shí)候傳入
times: {
'8:30': {
disabled: (item, time) => {
if (time.week === '星期四') {
return true
}
return false
},
dot: (item, time) => {
if (time.week === '星期四') {
return true
}
return false
},
label: '8:30',
func: (item, time) => {
console.log(item, time)
}
}
