封装ant design vue季度组件

1.在components 里新建组件文件

2、组件代码 

<template>

    <a-form>

        <a-form-item>

        <a-mark class="_mark" v-show="showSeason" @click.stop="showSeason = false">

        </a-mark>

        <a-input placeholder="请选择季度" v-model="showValue" style="width:100%;" @focus="showSeason = true">

<i slot="prefix"></i></a-input>

        <div class="box-card" v-show="showSeason">

            <div class="yearBtn">

            <a-button type="text" class="btnBorder" @click="prev">《</a-button>

            <a-span class="year">{{ year }}年</a-span>

            <a-button type="text" class="btnBorder" @click="next">》</a-button>

            </div>

            <a-divider />

            <div class="item">

            <a-button :type="showValue.split('-')[1] == 'Q1' ? 'primary' : 'text'" class="btnBorder" @click="selectSeason(0)">Q1</a-button>

            <a-button :type="showValue.split('-')[1] == 'Q2' ? 'primary' : 'text'" class="btnBorder" @click="selectSeason(1)">Q2</a-button>

            <a-button :type="showValue.split('-')[1] == 'Q3' ? 'primary' : 'text'" class="btnBorder" @click="selectSeason(2)">Q3</a-button>

            <a-button :type="showValue.split('-')[1] == 'Q4' ? 'primary' : 'text'" class="btnBorder" @click="selectSeason(3)">Q4</a-button>

            </div>

        </div>

        </a-form-item>

    </a-form>

</template>

<script>

export default {

    props: {

        valueArr: {

        default: () => {

            return ["01-03", "04-06", "07-09", "10-12"];

            },

            type: Array,

        },

        getValue: {

        default: () => { },

        type: Function,

        },

        defaultValue: {

        default: "",

        type: String,

        },

    },

   

    data() {

        return {

        showSeason: false,

        season: "",

        year: new Date().getFullYear(),

        showValue: "",

        };

    },

   

    created() {

   

        if (this.defaultValue) {

        let value = this.defaultValue;

        let arr = value.split("-");

        this.year = arr[0].slice(0, 4);

        let str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);

        let arrAll = this.valueArr;

        this.showValue = `${this.year}"-Q"${arrAll.indexOf(str) + 1}`;

        }

    },

   

    watch: {

        defaultValue: function (value) {

        let arr = value.split("-");

        this.year = arr[0].slice(0, 4);

        let str = arr[0].slice(4, 6) + "-" + arr[1].slice(4, 6);

        let arrAll = this.valueArr;

        // if(arrAll.indexOf(str)==0){

        //   this.showValue  = `${this.year}年第一季度`;

        // }

        this.showValue = `${this.year}"-Q"${arrAll.indexOf(str) + 1}`;

            },

    },

   

    methods: {

        one() {

        this.showSeason = false;

        },

        prev() {

        this.year = this.year * 1 - 1;

        },

        next() {

        this.year = this.year * 1 + 1;

        },

        reast() {

        this.showValue = ''

        },

        selectSeason(i) {

        let that = this;

        that.season = i + 1;

        let arr = that.valueArr[i].split("-");

        that.getValue(that.year + arr[0] + "-" + that.year + arr[1]);

        that.showSeason = false;

        if (this.season == 1) {

                            this.showValue = `${this.year}-Q1`;

        } else if (this.season == 2) {

                            this.showValue = `${this.year}-Q2`;

        }

        else if (this.season == 3) {

                            this.showValue = `${this.year}-Q3`;

        }

        else if (this.season == 4) {

                            this.showValue = `${this.year}-Q4`;

        }

        // this.showValue = `${this.year}年${this.season}季度`;

        that.sendMsg()

        console.log(this.showValue.split('-')[1])

        },

        getLastDay(year, month) {

        var new_year = year; //取当前的年份

        var new_month = month++; //取下一个月的第一天，方便计算（最后一天不固定）

        if (month > 12) {

                            new_month -= 12; //月份减

                            new_year++; //年份增

        }

        var new_date = new Date(new_year, new_month, 1); //取当年当月中的第一天

        return new Date(new_date.getTime() - 1000 * 60 * 60 * 24).getDate(); //获取当月最后一天日期

   

        },

        sendMsg() {

        this.$emit("ok", this.showValue);

        },

   

    },

};                

</script>

 <style lang="less" scoped>

    ._mark {

        position: fixed;

        top: 0;

        bottom: 0;

        left: 0;

        right: 0;

        background: rgba(0, 0, 0, 0);

        z-index: 999;

    }

    .box-card {

        width: 436px;

        position: fixed;

        z-index: 9999;

        background-color: #fff;

        border: 1px solid #e8e8e8;

    }

   

    .yearBtn {

        display: flex;

        flex-direction: row;

        justify-content: space-between;

        text-align: center;

        margin: 10px 0 0 5px;

    }

.year{

        color: #000;

        font-weight: bold;

    }

    .year:hover{

         color: #1890ff;    

         font-weight: bold;

    }

    .item {

        padding: 0px 5px 10px 5px;

        display: flex;

        flex-direction: row;

        justify-content: space-between;

    }

    .btnBorder{

        border-color:transparent;

    }

.btnBorder:hover{

        background-color: #e8e8e8;

    }

    /deep/ .ant-divider-horizontal {

        margin: 10px 0 !important;

    }

    /deep/ .ant-input-affix-wrapper .ant-input:not(:first-child){

        padding-left: 10px !important;

    }

</style>          

3、引用的页面

上边代码直接复制到自己的代码就可以，低版本中没有季度组件，高版本现在已出可参考官网。