饿了么日期选择器增加标记功能

这次在使用饿了么的日期选择器功能中，需要在日期底下加入一些信息是动态配置的。通过查找资料记录一下此次解决方发

一下是实现的效果

一、给特定日期添加样式

        在<el-data-picker>里添加：picker-options属性用来添特定的样式，可以在computed里添加方法用来判断是否为特定日期。在data中添加customDateArr 为你需要标记的特殊日期

<el-date-picker
   v-model="value2"
   type="datetimerange"
   :picker-options="customPickerOptions"
   popper-class="el-date-picker-custom"
   @focus="initCustomDate"
   range-separator="至"
   start-placeholder="开始日期"
   end-placeholder="结束日期"
   align="right">
</el-date-picker>

customPickerOptions () {
      let that = this
      return {
        cellClassName (Date) {
          if (that.customDateArr.includes(moment(Date).format('YYYY-MM-DD'))) {
          // 自定义的类名, 自行确保这个类型的唯一性,以免覆盖样式
            return 'custom_date_class'
          }
        }
      }
    }

        不要忘记添加css样式代码，这里再app.vue中全局修改样式

<style lang="scss">
.custom_date_class {
  span {
    background: #ea6151;
    color: red;
    border-radius: 50%;
    color: #fff !important;
    &:hover {
      background-color: #409eff;
    }
  }
  &::after {
    content: "录像";
    display: inline-block;
    position: absolute;
    width: 100%;
    font-size: 12px;
    color: red;
    bottom: -15px;
    left: 0;
    text-align: center;
    white-space: nowrap;
  }
}
.el-date-picker-custom {
// 用了/deep/后不兼容ie,所以还是不要随便加上样式穿透,vue-cli3以上也不支持/deep/  
// /deep/ 
.el-date-table td {
    padding: 10px 0;
  }
}

</style>

        同时还要处理特殊的日期在<el-data-picker>中添加@focus事件。

 initCustomDate () {
      this.customDateArr = [] //你需要标记的日期，格式是‘yyyy-mm-dd’
     },

        到这一步时间选择器已经能正常标记一些日期了，但是想每一个标记都显示不同的数量，这就需要操作伪类元素。

二、操作伪类元素

        通过查找资料了解到可以通过设置”data-xxxx“属性来传递你需要显示的文字，伪类元素中则使用content:attr(data-xxx)来接收。一下为代码，为图方便就继续写在initcustomdate里了

initCustomDate () {
    let numarr = [10,59,22] //需要传递的文字
    numarr = numarr.concat(numarr)//!重点
      
      var element = document.querySelectorAll('.custom_date_class')
      for(var i=0;i<element.length;i++){
        element[i].setAttribute("data-after",`录像${numarr[i]}`)
      }

     },

不要忘记修改css

<style lang="scss">
.custom_date_class {
  span {
    background: #ea6151;
    color: red;
    border-radius: 50%;
    color: #fff !important;
    &:hover {
      background-color: #409eff;
    }
  }
  &::after {
	content:attr(data-after);  //!这里修改了
    display: inline-block;
    position: absolute;
    width: 100%;
    font-size: 12px;
    color: red;
    bottom: -15px;
    left: 0;
    text-align: center;
    white-space: nowrap;
  }
}
.el-date-picker-custom {
// 用了/deep/后不兼容ie,所以还是不要随便加上样式穿透,vue-cli3以上也不支持/deep/  
// /deep/ 
.el-date-table td {
    padding: 10px 0;
  }
}

这里因为时间选择器会显示两个月的时间所以我用concat拼接了一下数组，大家也可以注意一下。一下就是大功告成了！本人前端小白，如有更高效的方法和见解欢迎留言