element calendar封装样式

最新推荐文章于 2023-11-23 11:41:10 发布

Lucky铂爵

最新推荐文章于 2023-11-23 11:41:10 发布

阅读量285

点赞数 1

文章标签： css3 css 前端

本文链接：https://blog.youkuaiyun.com/weixin_44816309/article/details/121538076

版权

效果
请添加图片描述
html：

             <el-calendar v-model="value" id="calendar">
                  <template slot="dateCell" slot-scope="{data }">
                    <div style="position: relative">
                      {{ data.day.split("-").slice(2)[0] }}
                      <div v-for="item in calendarData" :key="item.id"
                        style="width: 100%;position: absolute;top: 0;left: 0;">
                        <div v-if="data.day.split('-').slice(1)[0] == item.months">
                          <div v-if="item.days.indexOf(data.day.split('-').slice(2).join('-')) != -1 && item.type==0"
                            class='li-00'>
                            {{ data.day.split("-").slice(2)[0]}}
                          </div>
                          <div v-if=" item.days.indexOf(data.day.split('-').slice(2).join('-')) !=-1 && item.type==1"
                            class='li-01'>
                            {{ data.day.split("-").slice(2)[0]}}
                          </div>
                        </div>
                        <div v-else></div>
                      </div>
                    </div>
                  </template>
                </el-calendar>

js：

        value: new Date(),
        calendarData: [{
            id: 1,
            months: ["11"],
            days: ["22"],
            type: 0
          }, {
            id: 1,
            months: ["11"],
            days: ["23"],
            type: 0
          }, {
            id: 1,
            months: ["11"],
            days: ["24"],
            type: 0
          }, {
            id: 1,
            months: ["11"],
            days: ["25"],
            type: 0
          },
          {
            id: 2,
            months: ["11"],
            days: ["27"],
            type: 1
          },
          {
            id: 2,
            months: ["11"],
            days: ["28"],
            type: 1
          },
          {
            id: 2,
            months: ["11"],
            days: ["29"],
            type: 1
          }
        ],

css：

  .li-00 {
    background: #2D9B3E !important;
    color: #f1f5fe;
  }

  .li-01 {
    background: #D83E40 !important;
    color: #f1f5fe;
  }