基于iview月份的区间组件

阳光穿透心脏的1/2处 2023-06-19 02:30 3阅读 0赞

效果图:

![20191204102722114.gif][]

<style lang="less">
    .month-range-class {
        display: flex;
        align-items: center;
        margin-bottom: 12px;
        .monthPanpel {
            display: flex;
            .monthPanpel-left,
            .monthPanpel-right {
                width: 365px;
                display: flex;
                flex: 1;
                padding: 16px;
                flex-wrap: wrap;
                .monthPanpel-left-cell,
                .monthPanpel-right-cell {
                    width: 60px;
                    text-align: center;
                    height: 30px;
                    line-height: 30px;
                    margin-right: 10px;
                    margin-left: 10px;
                    margin-top: 8px;
                    margin-bottom: 8px;
                    border-radius: 10px;
                    &:hover {
                        background: #44bcb7;
                        color: #fff;
                    }
                }
            }
            .monthPanpel-right {
                border-left: 1px solid #ddd;
            }
        }
    }
    </style>
    <template>
        <div class="month-range-class">
            <Poptip placement="bottom-start" v-model="visible" @on-popper-show="popperShowEvent">
                <Input
                    v-model="monthStart"
                    prefix="ios-calendar-outline"
                    readonly
                    placeholder="选择月份"
                    clearable
                    style="width: 225px;margin-bottom:0px;"
                />
                <div class="monthPanpel" slot="content">
                    <div class="monthPanpel-left">
                        <div style="width:100%;display:flex;align-items:center;">
                            <span>
                                <Icon
                                    type="ios-arrow-dropleft"
                                    size="20"
                                    @click="handleYearBefore('left')"
                                    style="cursor:pointer"
                                />
                            </span>
                            <div
                                style="text-align:center;width: 100%;font-size: 16px;"
                            >{
       {`${yearStart}年`}}</div>
                            <span v-if="!rightYearShow">
                                <Icon
                                    type="ios-arrow-dropright"
                                    size="20"
                                    @click="handleYearBefore('right')"
                                    style="cursor:pointer"
                                />
                            </span>
                        </div>
    
                        <div
                            v-for="(item,index) in monthList"
                            class="monthPanpel-left-cell"
                            :key="item.value"
                            @click="handleMonthLeftClick('left',index)"
                            :style="{background:currentBgNum1.indexOf(index)>=0?'#44bcb7':'',color:currentBgNum1.indexOf(index)>=0?'#FFF':''}"
                        >
                            <span>{
       {item.label}}</span>
                        </div>
                    </div>
                    <div class="monthPanpel-right" v-if="rightYearShow">
                        <div style="width:100%;display:flex;align-items:center;">
                            <div
                                style="text-align:center;width: 100%;font-size: 16px;"
                            >{
       {`${yearEnd}年`}}</div>
                            <span>
                                <Icon
                                    type="ios-arrow-dropright"
                                    size="20"
                                    @click="handleYearBefore('right')"
                                    style="cursor:pointer"
                                />
                            </span>
                        </div>
                        <div
                            v-for="(item,index) in monthList"
                            class="monthPanpel-right-cell"
                            :key="item.value"
                            @click="handleMonthLeftClick('right',index)"
                            :style="{background:currentBgNum2.indexOf(index)>=0?'#44bcb7':'',color:currentBgNum2.indexOf(index)>=0?'#FFF':''}"
                        >
                            <span>{
       {item.label}}</span>
                        </div>
                    </div>
                </div>
            </Poptip>
        </div>
    </template>
    <script>
    export default {
        props: {},
        data() {
            return {
                rightYearShow: true,
                visible: false,
                currentBgNum1: [],
                currentBgNum2: [],
                clickNum: 0,
                yearStart: new Date().getFullYear(),
                yearEnd: new Date().getFullYear() + 1,
                monthStart: "",
                startT: [],
                monthList: [
                    {
                        label: "一月",
                        value: "1"
                    },
                    {
                        label: "二月",
                        value: "2"
                    },
                    {
                        label: "三月",
                        value: "3"
                    },
                    {
                        label: "四月",
                        value: "4"
                    },
                    {
                        label: "五月",
                        value: "5"
                    },
                    {
                        label: "六月",
                        value: "6"
                    },
                    {
                        label: "七月",
                        value: "7"
                    },
                    {
                        label: "八月",
                        value: "8"
                    },
                    {
                        label: "九月",
                        value: "9"
                    },
                    {
                        label: "十月",
                        value: "10"
                    },
                    {
                        label: "十一月",
                        value: "11"
                    },
                    {
                        label: "十二月",
                        value: "12"
                    }
                ]
            };
        },
        methods: {
            popperShowEvent() {
                this.currentBgNum1 = [];
                this.currentBgNum2 = [];
                this.startT = [];
            },
            handleMonthLeftClick(type, index) {
                if (type == "left" && this.startT.length < 2) {
                    this.currentBgNum1.push(index);
                    let mon = (index + 1 + "").padStart(2, 0);
                    let startT = `${this.yearStart}-${mon}`;
                    this.startT.push(startT);
                } else if ((type = "right" && this.startT.length < 2)) {
                    this.currentBgNum2.push(index);
                    let mon = (index + 1 + "").padStart(2, 0);
                    let startT = `${this.yearEnd}-${mon}`;
                    this.startT.push(startT);
                }
                if (this.startT.length >= 2) {
                    new Date(this.startT[0]).getTime() >
                    new Date(this.startT[1]).getTime()
                        ? this.startT.reverse()
                        : "";
                    this.monthStart = this.startT.join("~");
                    this.visible = false;
                }
            },
            handleYearBefore(type) {
                if (type == "left") {
                    --this.yearStart;
                    --this.yearEnd;
                } else if (type == "right") {
                    ++this.yearEnd;
                    ++this.yearStart;
                }
                if (this.startT.length == 1) {
                    let acrossM = this.startT[0].split("-")[1];
                    let acrossY = this.startT[0].split("-")[0];
                    if (acrossY == this.yearStart) {
                        this.currentBgNum1 = [Number(acrossM)];
                    } else {
                        this.currentBgNum1 = [];
                    }
                    if (acrossY == this.yearEnd) {
                        this.currentBgNum2 = [Number(acrossM)];
                    } else {
                        this.currentBgNum2 = [];
                    }
                }
            }
        }
    };
    </script>

当做组件直接引用即可使用啦!

[20191204102722114.gif]: https://img-blog.csdnimg.cn/20191204102722114.gif

发表评论取消回复

表情：

评论列表（有 0 条评论，3人围观）

还没有评论，来说两句吧...

相关阅读

相关基于iview月份的区间组件

效果图: ![20191204102722114.gif][] <style lang="less"> .month-range-class {

阳光穿透心脏的1/2处/ 2023年06月19日 02:30/ 0 赞/ 4 阅读

相关 js 获取日期区间内的所有月份

function getMonthBetween (start, end) { //返回月份的数组如 ['2020-07','2020-08']

小咪咪/ 2023年03月02日 14:50/ 0 赞/ 23 阅读

相关 iView树形组件：增删改节点

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMy

曾经终败给现在/ 2022年12月29日 06:59/ 0 赞/ 486 阅读

相关 iview page分页组件的集成

iview page分页组件的集成今天给大家分享一下iview page分页组件与iview table表格的集成,主要是针对前端集成,整

比眉伴天荒/ 2022年06月03日 08:22/ 0 赞/ 729 阅读

相关 java按照月份把一个时间段拆分成多个时间区间

package com.changchong.util; import java.text.ParseException; import ja

曾经终败给现在/ 2022年06月01日 02:07/ 0 赞/ 1018 阅读

相关 vue iview render 子组件通信

使用render进行组件渲染，在子组件中使用$emit想父组件传递数据，在render中这样接收，allocation是子组件，returnselected是子组件中$emit

忘是亡心i/ 2022年05月24日 14:17/ 0 赞/ 147 阅读

相关基于 Vue.js 的 UI 组件库 iView

iView 详细介绍 iView 是一套基于 [Vue.js][] 的 UI 组件库，主要服务于 PC 界面的中后台产品。 ![iView][] 特性高质量

傷城~/ 2022年05月20日 05:19/ 0 赞/ 267 阅读

相关基于 Vue.js 的 UI 组件库 iView

iView 详细介绍 iView 是一套基于 [Vue.js][] 的 UI 组件库，主要服务于 PC 界面的中后台产品。 ![iView][] 特性高质量、功

r囧r小猫/ 2022年05月18日 06:08/ 0 赞/ 336 阅读

相关 iview-admin的组件升级到最新

一、简介使用的iview-admin作为前端UI组件，当时开项目的时候版本是3.1.3，后面在3.2.2的版本的时候修复了一些BUG，故要

素颜马尾好姑娘i/ 2022年04月23日 13:12/ 0 赞/ 308 阅读

相关修改iview中的日期组件

日期组件如下： / 组件中的属性有 type，value,placeholder,placement,options,width 属性值和ivi

待我称王封你为后i/ 2022年03月06日 10:52/ 0 赞/ 461 阅读