image.png
首先是实现之后的效果图以及简单介绍一下功能
- 支持标记时间
- 支持自定义时间段
- 支持传入class style 点击事件 是否禁用 是否展示
实现理念
因为该组件只是简单展示作用, 所以数据维护我们可以放到外面去做,里面只做状态管理
第一步定义moment的基础方法, 通过这几个方法我们可以拿到准确的日期以及对应的星期
// 获取日期
getDate(time) {
return moment(time).format('MM-DD')
},
// 获取星期
getWeek(time) {
return moment(time).format('dddd')
},
// 获取两个日期的时间差
getDiffDate(startTime, endTime) {
return moment(endTime).diff(moment(startTime)) / (1000 * 60) / 60 / 24
},
// 获取时间戳
getUx(time) {
return moment(time).valueOf()
}
第二步初始化props参数, 在这里我们计划接收4个参数 且这四个参数都不是必传的
props: {
DateRange: {
type: Array,
default: () => []
},
times: {
type: Object,
default: () => { }
},
empty: {
type: String
},
slotRender: {
type: Boolean,
default: () => false
}
}
第一个参数DateRange 日期范围 如果不传则startTime为当天, endTime为 add 1 个月, 对应代码如下
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])
}
第二个参数times, 展示的是每天的各个时间点, 如果不传则渲染默认时间点.
针对默认时间点我们如果需要去动态的设置它的时间标识(右上红点), 是否禁用则需要通过ref调用组件方法
image.png
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
}
}
组件方法如下图 这个方法会接收一个keys values 的对象, 也可以是一个数组对象
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)
}
我们通过传入对应时间点, 和 动态的方法判断方法就可以了
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)
}
}})
第三个参数 empty 空文本的内容 字符串
如果传了这个参数 则内容将会被屏蔽掉 效果如下, 暂时未考虑不同日期,展示不同内容,如下图 6 - 24 展示空文本, 点击 6- 25 展示正常的时间选择的情况
image.png
第四个参数 slotRender slot 开关 打开后可以传一个slot内容
image.png
<calendar :slotRender="true" ref="calendar" @handClick="handClick">
<slot>
<el-badge is-dot class="item">数据查询</el-badge>
</slot>
</calendar>
Times 参数
times是动态绑定的地方 ,所有参数都可以通过function的方式返回, 返回的参数是当前的item, 以及当前选中的tabs
// 默认参数
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)
},
image.png
比如我们现在在每个周四的8:30绑定了一个时间标识, 需要点亮点则我们需要传入
this.$refs.calendar.addTimes({
keys: '8:30',
values: {
dot: (item, time) => {
if (time.week === '星期四') {
return true
}
return false
}
}
})
也可以在初始化的时候传入
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)
}
}
