vue2中年份季度选择器(需要安装element)
调用
<!--父组件调用--><QuarterCom v-model="quart" clearable default-current/>
组件代码
<template><div><span style="margin-right: 10px">{{ label }}</span><markstyle="position:fixed;top:0;bottom:0;left:0;right:0;background:rgba(0,0,0,0);z-index:999;"v-show="showSeason"@click.stop="showSeason=false"></mark><el-input placeholder="请选择季度" :size="size" v-model="showValue" prefix-icon="el-icon-date":style="{width}" @focus="showSeason=true" readonly :clearable="true"><i slot="suffix" class="el-input__icon el-icon-close pointer hover_blue" v-if="showValue && clearable" @click="clearAll"></i></el-input><el-cardclass="box-card"v-show="showSeason"><div slot="header" class="clearfix" style="text-align:center;padding:0"><buttontype="button"aria-label="前一年"class="el-picker-panel__icon-btn el-date-picker__prev-btn el-icon-d-arrow-left pointer"@click="editYear()"></button>
<!-- <span role="button" class="el-date-picker__header-label">{{year}}年</span>--><el-date-pickersize="mini"type="year"v-model="year"format="yyyy"placeholder="选择年"></el-date-picker><buttontype="button"aria-label="后一年"@click="editYear(1)"class="el-picker-panel__icon-btn el-date-picker__next-btn el-icon-d-arrow-right pointer"></button></div><div class="season_box"><divv-for="(item, index) in list":key="index":class="['season_box_one', 'hover_highlight',index === quarter ? 'active_highlight' : '']"@click="quarter = index">{{ item.label }}</div></div></el-card></div>
</template>
<script>
/*** @desc: defaultCurrent可以默认当前年,当前季度* @desc: 返回格式可以自行修改,默认2023年第一季度* @desc: 需要element组件支持* @desc: @dateChange 获取年季度对象数据*/
export default {name: 'QuarterDate',props: {value: String,// 标签label: {default: '季度',type: String},// medium / small / minisize: {default: 'medium',type: String},// medium / small / miniclearable: {default: false,type: Boolean},// 宽度width: {default: '190px',type: String},// 默认当前年当前季度defaultCurrent: {default: false,type: Boolean}},computed: {showText(){return new Date(this.year).getFullYear() + '年' + this.list[this.quarter].text}},data() {return {list: [{label: 'Q1', value: 0, text: '第一季度'},{label: 'Q2', value: 1, text: '第二季度'},{label: 'Q3', value: 2, text: '第三季度'},{label: 'Q4', value: 3, text: '第四季度'}],showSeason: false,year: new Date(), // 年quarter: 0, // 默认季节showValue: this.value,}},watch: {showText(nv){this.showValue = nvthis.$emit('input', nv)this.$emit('dateChange', {year: new Date(this.year).getFullYear(),quarter: this.list[this.quarter]})},showValue: {handler(nv){// 双向绑定数据回显if(this.value !== this.showText){const year = Number(nv.substring(0,4))try {this.list.forEach((item, index) => {if(nv.includes(item.text)) {this.quarter = indexthrow true}})}catch (e) {}if( year > 1970 ) {this.year = new Date(year, 0, 1)} else if(this.defaultCurrent){this.year = new Date()this.quarter = Math.ceil((new Date().getMonth() + 1)/3)}}},immediate: true},},methods: {editYear(years = -1) {this.year = new Date(new Date(this.year).getFullYear() + years, 0, 1)},clearAll(){this.showValue = ''}}
}
</script><style scoped>
.box-card {width:322px;padding: 0 3px 20px;margin-top:10px;z-index:1999;position: absolute;
}.season_box_one {color: #606266;width: 30px;height: 30px;line-height: 30px;text-align: center;cursor: pointer;border-radius: 50%;
}.hover_highlight:hover {background-color: #409dfe;color: white !important;
}
.active_highlight {background-color: #409dfe;color: white !important;position: relative;
}
.active_highlight::before {width: 6px;height: 6px;content: '';background-color: #409dfe;border-radius: 50%;position: absolute;left: calc(50% - 3px);bottom: -12px;
}.season_box {text-align: center;height: 30px;display: grid;width: 100%;grid-template-columns: repeat(4, 30px);gap: 30px;justify-content: center;align-items: center;
}.hover_blue:hover {color: #409dfe;
}.pointer {cursor: pointer;
}
</style>
相关文章:

vue2中年份季度选择器(需要安装element)
调用 <!--父组件调用--><QuarterCom v-model"quart" clearable default-current/> 组件代码 <template><div><span style"margin-right: 10px">{{ label }}</span><markstyle"position:fixed;top:0;bottom:0…...

QT day5
数据库完成登入注册 mainwindow.h #ifndef MAINWINDOW_H #define MAINWINDOW_H #include <QMainWindow> #include<QDebug> #include<QPushButton> #include<QLineEdit> #include<QLabel> #include <QMainWindow> #include<QMessageBo…...

设计模式Java实战
文章目录 一、前置1.1 目的1.2 面向对象1.3 接口和抽象类 二、七大设计原则2.1 单一职责2.2 接口隔离原则2.3 依赖倒转原则2.4 里氏替换原则2.5 开闭原则2.6 不要重复原则2.7 迪米特最少知道法则 三、23种设计模式3.1创建型:创建对象3.1.1 单例模式定义最佳实践场景…...

外国固定资产管理系统功能有哪些
很多公司都在寻找提高自己资产管理效益的方法。为了满足这一要求,国外的固定资产管理系统已经发展成多种形式。以下是国外一些常见的固定资产管理系统的特点:自动化和智能化:许多现代固定资产管理系统采用自动化和数字化技术,以简化流程,减少…...

Postman应用——控制台调试
当你在测试脚本中遇到错误或意外行为时,Postman控制台可以帮助你识别,通过将console.log调试语句与你的测试断言相结合,你可以检查http请求和响应的内容,以及变量之类的。 通常可以使用控制台日志来标记代码执行,有时…...

如何制作思维导图?
思维导图是一种非常有用的工具,可以被广泛应用于不同领域的人群。以下是一些常见的使用人群:学生、教育工作人员、各领域的专业人员,法律、商业、医学等等,创作者、艺术家、个人自我成长管理。 由此可见,思维导图可以做…...

【力扣每日一题】2023.9.21 收集树中金币
目录 题目: 示例: 分析: 代码: 题目: 示例: 分析: 题目给我们一棵树,不过这棵树不是普通的树,而是无向无根树。给我们一个二维数组表示节点之间的连接关系ÿ…...

Python与数据分析--每天绘制Matplotlib库实例图片3张-第1天
目录 1.实例1--Bar color demo 2.实例2--Bar Label Demo 3.实例3--Grouped bar chart with labels 1.实例1--Bar color demo import matplotlib.pyplot as plt # 支持中文 plt.rcParams[font.sans-serif] [SimHei] # 用来正常显示中文标签 plt.rcParams[axes.unicode_minus…...

pycharm 中package, directory, sources root, resources root的区别
【遇到的问题】 导入yolov5中有utils文件,自己的代码中也有utils文件,使得yolov5中的这部分引用出错了。 【解决方案】 单独建立detection文件夹,把检测相关的都放在这里,yolov5是github上拉取的源码,发现yolov5中fr…...

【谢希尔 计算机网络】第2章 物理层
目录 通信基础 基本概念 两个公式lim 奈氏准则 香农定理 奈氏准则 VS 香农定理 编码与调制 编辑 物理层下面的传输媒体 导引型传输媒体 1. 双绞线 2. 同轴电缆 3. 光缆 非导引型传输媒体 无线电微波通信 卫星通信 无线局域网使用的 ISM 频段 信道复用技术 …...
Eclipse工具使用技巧
1、常用快捷键 ctrlshifto 快速导包 CtrlSpace 内容助理 说明:内容助理。提供对方法,变量,参数,javadoc等得提示,应运在多种场合,总之需要提示的时候可先按此快捷键。注:避免输入法的切换设置与此设置冲突 CtrlShiftSpace 变量提示 Ctrl/ 添加/消除//注释 CtrlShift/ 添加…...
python LeetCode 刷题记录 94
题目 给定一个二叉树的根节点 root ,返回 它的 中序 遍历 代码 递归 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.righ…...

滴滴可观测平台 Metrics 指标实时计算如何实现了又准又省?
在滴滴,可观测平台的 Metrics 数据有一些实时计算的需求,承载这些实时计算需求的是一套又一套的 Flink 任务。之所以会有多套 Flink 任务,是因为每个服务按照其业务观测需要不同的指标计算,也就对应了不同数据处理拓扑。我们尽力抽…...

每天几道Java面试题:IO流(第五天)
目录 第五幕 、第一场)街边 友情提醒 背面试题很枯燥,加入一些戏剧场景故事人物来加深记忆。PS:点击文章目录可直接跳转到文章指定位置。 第五幕 、 第一场)街边 【衣衫褴褛老者,保洁阿姨,面试者老王】 衣衫褴褛老…...
js/axios/umi-request 根据后端返回的二进制流下载文件
type ResponseType {data: Blob;headers: {content-disposition?: string;}; }; // 下载 (创建a标签) export const downloadBlob (response: ResponseType) > {const blob response.data; // 获取响应中的 Blob 数据const contentDisposition response.headers[conten…...
软件评测师之流水线
目录 一.概念二.周期三.执行时间的计算 一.概念 程序在执行时多条指令可以层叠并行的技术。 二.周期 取指→分析→执行 指令执行的各个阶段里面,执行时间最长的为流水线的周期。 三.执行时间的计算 n条指令执行的总时间流水线计算公式:单条指令所需…...

Linux系统编程——网络编程的学习
Linux系统编程学习相关博文 Linux系统编程——文件编程的学习Linux系统编程——进程的学习Linux系统编程——进程间通信的学习Linux系统编程——线程的学习 Linux系统编程——网络编程的学习 一、概述1. TCP/UDP2. 端口号3. 字节序4. Sockt服务器和客户端的开发步骤1. 服务器2…...
Vue中的ref 和$refs的使用
ref 和$refs 作用:利用ref 和$refs可以用于获取dom元素,或组件实例 特点:查找范围→当前组件内(更精确稳定,原生的dom在vue子组件中查找最终也会扫描到父组件) 1. 获取dom 目标标签–添加ref 属性 <…...
Hive【非交互式使用、三种参数配置方式】
前言 今天开始学习 Hive,因为毕竟但凡做个项目基本就避不开用 Hive ,争取这学期结束前做个小点的项目。 第一篇博客内容还是比较少的,环境的搭建配置太琐碎没有写。 Hive 常用使用技巧 交互式使用 就是我们正常的进入 hive 命令行下的使用…...
基于Yolov8的工业小目标缺陷检测(1)
目录 1.工业油污数据集介绍 1.1 小目标定义 1.2 难点 1.3 工业缺陷检测算法介绍 1.3.1 YOLOv8...

网络六边形受到攻击
大家读完觉得有帮助记得关注和点赞!!! 抽象 现代智能交通系统 (ITS) 的一个关键要求是能够以安全、可靠和匿名的方式从互联车辆和移动设备收集地理参考数据。Nexagon 协议建立在 IETF 定位器/ID 分离协议 (…...
【根据当天日期输出明天的日期(需对闰年做判定)。】2022-5-15
缘由根据当天日期输出明天的日期(需对闰年做判定)。日期类型结构体如下: struct data{ int year; int month; int day;};-编程语言-CSDN问答 struct mdata{ int year; int month; int day; }mdata; int 天数(int year, int month) {switch (month){case 1: case 3:…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案
问题描述:iview使用table 中type: "index",分页之后 ,索引还是从1开始,试过绑定后台返回数据的id, 这种方法可行,就是后台返回数据的每个页面id都不完全是按照从1开始的升序,因此百度了下,找到了…...
Golang dig框架与GraphQL的完美结合
将 Go 的 Dig 依赖注入框架与 GraphQL 结合使用,可以显著提升应用程序的可维护性、可测试性以及灵活性。 Dig 是一个强大的依赖注入容器,能够帮助开发者更好地管理复杂的依赖关系,而 GraphQL 则是一种用于 API 的查询语言,能够提…...
linux 错误码总结
1,错误码的概念与作用 在Linux系统中,错误码是系统调用或库函数在执行失败时返回的特定数值,用于指示具体的错误类型。这些错误码通过全局变量errno来存储和传递,errno由操作系统维护,保存最近一次发生的错误信息。值得注意的是,errno的值在每次系统调用或函数调用失败时…...
鸿蒙中用HarmonyOS SDK应用服务 HarmonyOS5开发一个医院查看报告小程序
一、开发环境准备 工具安装: 下载安装DevEco Studio 4.0(支持HarmonyOS 5)配置HarmonyOS SDK 5.0确保Node.js版本≥14 项目初始化: ohpm init harmony/hospital-report-app 二、核心功能模块实现 1. 报告列表…...
大学生职业发展与就业创业指导教学评价
这里是引用 作为软工2203/2204班的学生,我们非常感谢您在《大学生职业发展与就业创业指导》课程中的悉心教导。这门课程对我们即将面临实习和就业的工科学生来说至关重要,而您认真负责的教学态度,让课程的每一部分都充满了实用价值。 尤其让我…...
【Java学习笔记】BigInteger 和 BigDecimal 类
BigInteger 和 BigDecimal 类 二者共有的常见方法 方法功能add加subtract减multiply乘divide除 注意点:传参类型必须是类对象 一、BigInteger 1. 作用:适合保存比较大的整型数 2. 使用说明 创建BigInteger对象 传入字符串 3. 代码示例 import j…...

C++使用 new 来创建动态数组
问题: 不能使用变量定义数组大小 原因: 这是因为数组在内存中是连续存储的,编译器需要在编译阶段就确定数组的大小,以便正确地分配内存空间。如果允许使用变量来定义数组的大小,那么编译器就无法在编译时确定数组的大…...

使用LangGraph和LangSmith构建多智能体人工智能系统
现在,通过组合几个较小的子智能体来创建一个强大的人工智能智能体正成为一种趋势。但这也带来了一些挑战,比如减少幻觉、管理对话流程、在测试期间留意智能体的工作方式、允许人工介入以及评估其性能。你需要进行大量的反复试验。 在这篇博客〔原作者&a…...