记录vue+elment ui 项目中的日历控件

1. 对el-Calendar组件进行内容自定义展示

• 首先引入 中国农历（阴阳历）和西元阳历即公历互转 JavaScript 库 或者自己写的转换js文件， 注意引入上面的js文件中，要在这个js文件中暴露出calendar
• 利用el-calendar 中的插槽进行自定义内容展示，样式修改

import calendar from '../../utils/calendar'

      <el-calendar>
        <template slot="dateCell" slot-scope="{ date, data }">
          <p style="white-space: pre-line;">
            {{ solarDate2lunar(data.day) }}
          </p>
        </template>
      </el-calendar>

    // 农历显示
    solarDate2lunar(solarDate) {
      var solar = solarDate.split('-')
      var lunar = calendar.solar2lunar(solar[0], solar[1], solar[2])
      // return solar[1] + '-' + solar[2] + '\n' + lunar.IMonthCn + lunar.IDayCn
      return solar[2] + '\n' + lunar.IMonthCn + lunar.IDayCn
    

• 初步效果