标签：button ref cfile 定义 type rto index 第一个 一个
element组件calendar目前不支持农历日历，故引用中国农历（阴阳历）和西元阳历即公历互转JavaScript库。
自定义该组件主要为了实现多选日期 和 高亮显示节假日的功能。
1、为了能用简单的html实现样例程序，将calendar.js的export去掉，通过JS引用的方式实现。
<!--vue引入 --> <script src="https://cdn.staticfile.org/vue/2.5.2/vue.min.js"></script> <!--element-ui引入组件 --> <script src="https://unpkg.com/element-ui/lib/index.js"></script> <!--calendar引入 --> <script src="calendar.js"></script>
<!-- element-ui引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
2、添加el-calendar组件。通过设置名为 dateCell 的 scoped-slot 来自定义日历单元格中显示的内容。在 scoped-slot 可以获取到 date（当前单元格的日期）, data（包括 type，isSelected，day 属性）。
<div id="app"> <el-calendar v-model="value" style="width: 820px"> <template slot="dateCell" slot-scope="{date, data}"> <div :class="{ selected : isSelected(date, data) }"> <div class="solar">{{ data.day.split(‘-‘)[2] }}</div> <div class="lunar" :class="{ festival : isFestival(date, data) }">{{ solarToLunar(date, data) }}</div> </div> </template> </el-calendar> </div>
3、JavaScript实现是否选中、自定义日历显示内容的功能
var Main = {
data() {
return {
// 设置value，会自动显示value对应月份，可以设置为selectedDates的第一个日期
value: ‘2020-04-12‘,
// 根据selectedDates设置选中日期
selectedDates: [‘2020-04-12‘,‘2020-04-15‘,‘2020-04-24‘]
}
},
methods: {
// 是否选中日期
isSelected : function(slotDate, slotData) {
return this.selectedDates.includes(slotData.day)
},
// 是否节假日
isFestival(slotDate, slotData) {
let solarDayArr = slotData.day.split(‘-‘);
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
// 公历节日\农历节日\农历节气
let festAndTerm = [];
festAndTerm.push(lunarDay.festival == null ? ‘‘ : ‘ ‘ + lunarDay.festival)
festAndTerm.push(lunarDay.lunarFestival == null ? ‘‘ : ‘‘ + lunarDay.lunarFestival)
festAndTerm.push(lunarDay.Term == null ? ‘‘ : ‘‘ + lunarDay.Term)
festAndTerm = festAndTerm.join(‘‘)
return festAndTerm != ‘‘
},
// 公历转农历
solarToLunar(slotDate, slotData) {
let solarDayArr = slotData.day.split(‘-‘);
let lunarDay = calendar.solar2lunar(solarDayArr[0], solarDayArr[1], solarDayArr[2])
// 农历日期
let lunarMD = lunarDay.IMonthCn + lunarDay.IDayCn
// 公历节日\农历节日\农历节气
let festAndTerm = [];
festAndTerm.push(lunarDay.festival == null ? ‘‘ : ‘ ‘ + lunarDay.festival)
festAndTerm.push(lunarDay.lunarFestival == null ? ‘‘ : ‘‘ + lunarDay.lunarFestival)
festAndTerm.push(lunarDay.Term == null ? ‘‘ : ‘‘ + lunarDay.Term)
festAndTerm = festAndTerm.join(‘‘)
return festAndTerm == ‘‘ ? lunarMD : festAndTerm
}
}
}
var Ctor = Vue.extend(Main)
new Ctor().$mount(‘#app‘)
4、CSS实现自定义显示效果
/**隐藏上一月、本月、下一月*/
.el-calendar__button-group {
display: none;
}
/**月份居中*/
.el-calendar__title {
width: 100%;
text-align: center;
}
/**日期div的样式*/
.el-calendar-table tr td:first-child {
border-left: 0px;
}
.el-calendar-table td {
min-height: 110px;
min-width: 110px;
border-right: 0px;
}
.el-calendar-table td.is-selected {
background-color: white;
}
.el-calendar-table .el-calendar-day {
height: 100%;
padding: 0px;
text-align: center;
}
.el-calendar-table .el-calendar-day > div {
height: 104px;
}
/**日期div的样式-公历*/
.el-calendar-table .el-calendar-day > div .solar {
padding-top: 30px;
}
/**日期div的样式-农历*/
.el-calendar-table .el-calendar-day > div .lunar {
padding-top: 10px;
}
/**日期div的样式-选中*/
.el-calendar-table .el-calendar-day > div.selected {
background-color: #fef2f2;
border: 3px solid #fb0;
border-radius: 20px;
}
/**本月周末设置为红色*/
.el-calendar-table .current:nth-last-child(-n+2) .solar {
color: red;
}
/**本月农历设置为灰色*/
.el-calendar-table .current .lunar {
color: #606266;
}
/**本月农历节日设置为红色*/
.el-calendar-table .current .lunar.festival {
color: red;
}
/**禁用点击效果*/
/*.el-calendar-table td {*/
/*pointer-events: none;*/
/*}*/
5、最终显示效果
标签：button ref cfile 定义 type rto index 第一个 一个
原文地址：https://www.cnblogs.com/no6bky/p/12764495.html
