vue 组件的赋值

需求是这样，一个页面引用了日期组件。要求给初始化的开始结束日期。

vue文件:

<date-time v-bind:timeShow="true" :pickerValue="pickerValue" timeType="daterange"></date-time>

实现初始化的两个属性就是pickerValue timeType,这里加了冒号是指从data()里取数。

js文件中引用这个组件的是:

import DateTime from '@/frame/components/ComDatePicker.vue'



export default {
    data() {
        return {
            pickerValue:getPickerValue()
        }
    },
    components: {
        DateTime
    }
}

function getPickerValue(){
  var pickerValue=[];
  const start = new Date()

  let year1, month1, day1;

  [year1, month1, day1] = [start.getFullYear(), start.getMonth(), start.getDate()]

  const date1 = new Date(year1, month1, day1, 7)

  pickerValue.push(date1)

  const end = new Date()

  let year2, month2, day2

  end.setTime(end.getTime() - 24 * 60 * 60 * 1000 * 6);

  [year2, month2, day2] = [end.getFullYear(), end.getMonth(), end.getDate()]

  const date2 = new Date(year2, month2, day2, 7)

  pickerValue.unshift(date2)
  return pickerValue;
}

ComDatePicker.vue文件

<template>
    <div class="ComDatePicker" ref="focusInput">
         <el-date-picker
                v-if='timeShow'
                :append-to-body="false"
                :class="pickerTextColor"
                v-model="pickerValue"
                :value-format="dateym"
                @change="selectTimeChange"
                :type="timeType"
                unlink-panels
                range-separator="至"
                placeholder="选择日期"
                start-placeholder="开始日期"
                end-placeholder="结束日期"
                @blur="dateControlBlur"
                :picker-options="pickerOptions"
        ></el-date-picker>
    </div>
</template>

<script>

export default {
    props:{
        timeType:{
            default : 'date',
            type : String
        },
        pickerValue:{
            default: '',
            type: String
        }
    },
    data() {
        return {
            timeShow: true,
            //pickerValue: '',
            //pickerValue: '2013-01-01 至 2022-01-01',
            pickerValue: this.pickerValue,
            allTime: ['', '', '', []],
            dateym: "yyyy-MM-dd",
            //timeType: "date", //时间控件改变
            //timeType:"daterange",
            timeType: this.timeType,
            pickerOptions: {
                shortcuts: [{
                    text: '年',
                    onClick: (picker) => {
                        picker.$emit('pick', '');
                        this.timeType = "year"
                        this.dateym = "yyyy";
                        setTimeout(() => {
                            this.$refs.focusInput.querySelector('input').focus()
                        }, 0)
                        this.pickerValue = this.allTime[0];
                    }
                }, {
                    text: '月',
                    onClick: (picker) => {
                        picker.$emit('pick', '');
                        this.timeType = "month"
                        this.dateym = "yyyy-MM";
                        setTimeout(() => {
                            this.$refs.focusInput.querySelector('input').focus()
                        }, 0)
                        this.pickerValue = this.allTime[1];
                    }
                }, {
                    text: '日',
                    onClick: (picker) => {
                        picker.$emit('pick', '');
                        this.timeType = "date";
                        this.dateym = "yyyy-MM-dd";
                        setTimeout(() => {
                            this.$refs.focusInput.querySelector('input').focus()
                        }, 0)
                        this.pickerValue = this.allTime[2];
                    }
                }, {
                    text: '时间段',
                    onClick: (picker) => {
                        picker.$emit('pick', '');
                        this.timeType = "daterange"
                        this.dateym = "yyyy-MM-dd";
                        setTimeout(() => {
                            this.$refs.focusInput.querySelector('input').focus()
                        }, 0)
                        this.pickerValue = this.allTime[3];
                    }
                }
             ]
            }
        }
    },
    methods: {
        // 选中切换时间
        selectTimeChange() {
            this.$emit("pickerValue", this.pickerValue);
            this.allTime[this.timeType === 'year' ? 0 : this.timeType === "month" ? 1 : this.timeType === 'date' ? 2 : 3] = this.pickerValue;
        },
         // 日期控件失去焦点时
        dateControlBlur() {
            this.timeShow = false;
            this.$nextTick(() => {
                this.timeShow = true; 
            })
        },
    },
    // 计算属性根据class来切换字体选中颜色
    computed:{
        pickerTextColor:function(){
            return this.timeType === 'year' ? 'ComDatePicker-yearColor' : this.timeType === 'month' ? 'ComDatePicker-monthColor' : this.timeType === 'date' ? 'ComDatePicker-dateColor' : 'ComDatePicker-daterangeColor';
        }
    }
}
</script>

<style lang='less' scoped>
.ComDatePicker{
    /deep/ .el-date-editor{
        width: 380px;
    }
    &-yearColor{
        /deep/  .el-picker-panel__shortcut:nth-child(1){
            color: #409EFF;
        }
    }
    &-monthColor{
        /deep/  .el-picker-panel__shortcut:nth-child(2){
            color: #409EFF;
        }
    }
    &-dateColor{
        /deep/  .el-picker-panel__shortcut:nth-child(3){
            color: #409EFF;
        }
    }
    &-daterangeColor{
        /deep/  .el-picker-panel__shortcut:nth-child(4){
            color: #409EFF;
        }
    }
}
</style>