vue 给指定日期添加小红点

曾经终败给现在 2023-10-09 00:18 32阅读 0赞

## **一、**需求背景 ##

--------------------

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

## **二、代码** ##

**选择单个日期**

**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();
        },

## 三、效果 ##

[Link 1]: https://so.csdn.net/so/search?q=%E9%80%89%E6%8B%A9%E5%99%A8&spm=1001.2101.3001.7020