vue展示日历 考勤展示_vue实现日历组件

1、当前组件说明

一个用vue实现的简单日历组件，可以手动设置日历的宽高，未设置时，有默认宽高，设置后，其中的每个日期项的宽高可以根据设定的宽高自适应、可以设置当前选中日期，可以设置时间可用范围，可以通过左右箭头进行日期切换。(第一次使用简书，代码格式比较丑，而且换行很高，也不知道怎么调整，大家见谅)

2、组件效果展示

3、组件实现代码

{ {vdpYear + '年' + vdpMonth + '月'}}

{ {item}}

:style="itemStyles"

v-for="(item, i) in dateList" :key="i" @click="toSelect(item)"

:class="(item.disabled === false && item.actived ? 'actived' :'grey') + (item.checked ? ' checked' : '') + (item.today ? ' today' : '') + (item.disabled ? ' disabled' : '')">

{ {item.day}}

export default {

name: 'cDatePicker',

props: {

// 要求传入的值 必须为 yyyy-MM-dd 格式数据

value: {

type: String

},

// 日历显示的宽度，默认300px

width: {

type: Number,

default: 300

},

// 日历显示的高度，默认300px

height: {

type: Number,

default: 300

},

// 日历工具栏的显示高度，默认32px

toolHeight: {

type: Number,

default: 32

},

// 日历中每个时间项的行高

lineHeight: {

type: Number

},

margin: {

type: Number,

default: 2

},

// 日历可选范围-开始时间

start: {

type: String,

default: ''

},

// 日历可选范围-结束时间

end: {

type: String,

default: ''

}

},

watch: {

// 监听 外部插入的value值变化

// value (n, l) {

//   this.init()

// }

},

data () {

return {

xqList: ['日', '一', '二', '三', '四', '五', '六'],

vdpYear: