vue 给指定日期添加小红点

一、需求背景

---

        今天在项目开发中有一个需求，要求日期选择器中，指定的日期显示标注，标识该日期有待处理的内容。

二、代码

选择单个日期

redPoint.vue

<template>
    <el-form-item prop="value">
        <el-date-picker
            v-model="value"
            type="date"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="sendMsg($event)"
            :placeholder="holder">
        </el-date-picker>
    </el-form-item>
</template>

<script>
export default {
    name: "redPointDate",
    props: {
        dataList: {
            type: Array,
            required: []
        },
        holderText: {
            type: String,
            required: '选择日期'
        },
    },
    data() {
        return{
            value:undefined,
        }
    },
    computed:{
        pickerOptions(){
            let that = this
            return {
                cellClassName(time){
                    if(that.dataList.includes(that.DateToformatDate(time))){
                        return 'red';
                    }
                }
            }
        },
        holder(){
            return this.holderText
        }
    },
    methods: {
        // 日期格式化
        DateToformatDate(date) {
            var d = new Date(date);
            var year = d.getFullYear();
            var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
            var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
            // var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
            // var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
            // var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
            return ( year + '-' + month + '-' + day );
        },
        sendMsg(val){
            //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
            this.$emit('func',val)
        }
    }
}
</script>

<style>
  .red::after{
      content: '';
      width: 4px;
      height: 4px;
      background-color: #f00;
      border-radius:50%;
      display: inline-block;
      position: absolute;
      left: 30px;
      bottom: 25px;
  } 
</style>

页面引用

<redPoint@func="getReturnDate" :dataList="datas" ></redPoint>

getReturnDate回调函数

选择日期范围

redPointDateRange.vue

<template>
    <el-form-item prop="value">
        <el-date-picker
            v-model="value"
            type="daterange"
            format="yyyy-MM-dd"
            value-format="yyyy-MM-dd"
            :picker-options="pickerOptions"
            @change="sendMsg($event)"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期">
        </el-date-picker>
    </el-form-item>
</template>

<script>
export default {
    name: "redPointDateRange",
    props: {
        dataList: {
            type: Array,
            required: []
        },
    },
    data() {
        return{
            value:[],
        }
    },
    computed:{
        pickerOptions(){
            let that = this
            return {
                cellClassName(time){
                    if(that.dataList.includes(that.DateToformatDate(time))){
                        return 'red';
                    }
                }
            }
        },
    },
    methods: {
        // 日期格式化
        DateToformatDate(date) {
            var d = new Date(date);
            var year = d.getFullYear();
            var month = d.getMonth() < 9 ? "0" + (d.getMonth() + 1) : "" + (d.getMonth() + 1);
            var day = d.getDate() < 10 ? "0" + d.getDate() : "" + d.getDate();
            // var hour = d.getHours() < 10 ? "0" + d.getHours() : "" + d.getHours();
            // var minutes = d.getMinutes() < 10 ? "0" + d.getMinutes() : "" + d.getMinutes();
            // var seconds = d.getSeconds() < 10 ? "0" + d.getSeconds() : "" + d.getSeconds();
            return ( year + '-' + month + '-' + day );
        },
        sendMsg(val){
            //func: 是父组件指定的传数据绑定的函数，this.msg:子组件给父组件传递的数据
            this.$emit('func',val)
        }
    }
}
</script>

<style> 
.red::after{
    content: '';
    width: 4px;
    height: 4px;
    background-color: #f00;
    border-radius:50%;
    display: inline-block;
    position: absolute;
    left: 30px;
    bottom: 25px;
}
</style>

页面引用

import redPointDateRange from '../../dashboard/dataRedPoint/redPointDateRange';

components: {
    redPointDateRange
  },

<redPointDateRange @func="getReturnDate" :dataList="datas" ></redPointDateRange>

//日期控件回调函数
    getReturnDate(data){
      // this.queryParams.searchDate = data
      if(data === null){
        this.dateRange = []
      }else{
        this.dateRange = data
      }
      this.getList();
    },

三、效果