当前位置: 首页 > news >正文

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创建型&#xff1a;创建对象3.1.1 单例模式定义最佳实践场景…...

外国固定资产管理系统功能有哪些

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

Postman应用——控制台调试

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

如何制作思维导图?

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

【力扣每日一题】2023.9.21 收集树中金币

目录 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 代码&#xff1a; 题目&#xff1a; 示例&#xff1a; 分析&#xff1a; 题目给我们一棵树&#xff0c;不过这棵树不是普通的树&#xff0c;而是无向无根树。给我们一个二维数组表示节点之间的连接关系&#xff…...

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文件&#xff0c;自己的代码中也有utils文件&#xff0c;使得yolov5中的这部分引用出错了。 【解决方案】 单独建立detection文件夹&#xff0c;把检测相关的都放在这里&#xff0c;yolov5是github上拉取的源码&#xff0c;发现yolov5中fr…...

【谢希尔 计算机网络】第2章 物理层

目录 通信基础 基本概念 两个公式lim 奈氏准则 香农定理 奈氏准则 VS 香农定理 编码与调制 ​编辑 物理层下面的传输媒体 导引型传输媒体 1. 双绞线 2. 同轴电缆 3. 光缆 非导引型传输媒体 无线电微波通信 卫星通信 无线局域网使用的 ISM 频段 信道复用技术 …...

Eclipse工具使用技巧

1、常用快捷键 ctrlshifto 快速导包 CtrlSpace 内容助理 说明:内容助理。提供对方法,变量,参数,javadoc等得提示,应运在多种场合,总之需要提示的时候可先按此快捷键。注:避免输入法的切换设置与此设置冲突 CtrlShiftSpace 变量提示 Ctrl/ 添加/消除//注释 CtrlShift/ 添加…...

python LeetCode 刷题记录 94

题目 给定一个二叉树的根节点 root &#xff0c;返回 它的 中序 遍历 代码 递归 # Definition for a binary tree node. # class TreeNode: # def __init__(self, val0, leftNone, rightNone): # self.val val # self.left left # self.righ…...

滴滴可观测平台 Metrics 指标实时计算如何实现了又准又省?

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

每天几道Java面试题:IO流(第五天)

目录 第五幕 、第一场&#xff09;街边 友情提醒 背面试题很枯燥&#xff0c;加入一些戏剧场景故事人物来加深记忆。PS:点击文章目录可直接跳转到文章指定位置。 第五幕 、 第一场&#xff09;街边 【衣衫褴褛老者&#xff0c;保洁阿姨&#xff0c;面试者老王】 衣衫褴褛老…...

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…...

软件评测师之流水线

目录 一.概念二.周期三.执行时间的计算 一.概念 程序在执行时多条指令可以层叠并行的技术。 二.周期 取指→分析→执行 指令执行的各个阶段里面&#xff0c;执行时间最长的为流水线的周期。 三.执行时间的计算 n条指令执行的总时间流水线计算公式&#xff1a;单条指令所需…...

Linux系统编程——网络编程的学习

Linux系统编程学习相关博文 Linux系统编程——文件编程的学习Linux系统编程——进程的学习Linux系统编程——进程间通信的学习Linux系统编程——线程的学习 Linux系统编程——网络编程的学习 一、概述1. TCP/UDP2. 端口号3. 字节序4. Sockt服务器和客户端的开发步骤1. 服务器2…...

Vue中的ref 和$refs的使用

ref 和$refs 作用&#xff1a;利用ref 和$refs可以用于获取dom元素&#xff0c;或组件实例 特点&#xff1a;查找范围→当前组件内&#xff08;更精确稳定&#xff0c;原生的dom在vue子组件中查找最终也会扫描到父组件&#xff09; 1. 获取dom 目标标签–添加ref 属性 <…...

Hive【非交互式使用、三种参数配置方式】

前言 今天开始学习 Hive&#xff0c;因为毕竟但凡做个项目基本就避不开用 Hive &#xff0c;争取这学期结束前做个小点的项目。 第一篇博客内容还是比较少的&#xff0c;环境的搭建配置太琐碎没有写。 Hive 常用使用技巧 交互式使用 就是我们正常的进入 hive 命令行下的使用…...

基于Yolov8的工业小目标缺陷检测(1)

目录 1.工业油污数据集介绍 1.1 小目标定义 1.2 难点 1.3 工业缺陷检测算法介绍 1.3.1 YOLOv8...

Nodejs后端服务如何稳定调用Claude并避免封号风险

&#x1f680; 告别海外账号与网络限制&#xff01;稳定直连全球优质大模型&#xff0c;限时半价接入中。 &#x1f449; 点击领取海量免费额度 Nodejs后端服务如何稳定调用Claude并避免封号风险 1. 后端集成Claude的常见挑战 在Node.js后端服务中集成Claude模型&#xff0c;…...

告别启动盘识别难题:手把手教你搞定CentOS 7在SR650上的UEFI启动与自定义分区(含/dev/sdX查找技巧)

告别启动盘识别难题&#xff1a;手把手教你搞定CentOS 7在SR650上的UEFI启动与自定义分区&#xff08;含/dev/sdX查找技巧&#xff09; 在服务器运维领域&#xff0c;系统安装看似基础却暗藏玄机。特别是当面对企业级硬件如Lenovo SR650时&#xff0c;UEFI启动模式与传统BIOS的…...

Codex入门09-Git工作流(小白入门:不会写commit信息?AI帮你自动生成规范提交)

🎯 本文目标 学会用 Codex 自动化 Git 操作:提交、冲突解决、PR 描述生成。 😰 Git 新手的典型痛点 你的提交记录是不是这样的: git log --oneline a3f4b2c fix 9d1e8c4 update 4c7b91f 修改了一些东西 f0a2d3e 。。。 b5c8e7a 又改了这就是"屎山提交记录"—…...

FPGA单粒子翻转(SEU)原理、影响与防护策略全解析

1. 是什么在“骚扰”我的FPGA&#xff1f;——深入解析单粒子翻转作为一名在电子设计领域摸爬滚打了十几年的工程师&#xff0c;我经手过不少高可靠性的项目&#xff0c;从地面通信基站到近地轨道的载荷设备都有涉及。在这些项目中&#xff0c;有一个幽灵般的问题总是如影随形&…...

信息学奥赛刷题必备:最长平台问题三种解法详解(附C++代码)

信息学奥赛刷题进阶&#xff1a;最长平台问题的多维解法与竞赛实战 在信息学奥赛的备战过程中&#xff0c;"最长平台"问题作为数组统计类题目的经典代表&#xff0c;频繁出现在各大OJ平台的题库中。这道题目看似简单&#xff0c;却蕴含着丰富的解题思路和优化技巧。对…...

策略梯度定理实战解析:从蒙特卡洛回报到PyTorch梯度实现

1. 这不是数学课&#xff0c;是写给实战者的政策梯度定理手记你打开这篇文字的时候&#xff0c;大概率正卡在某个强化学习项目里&#xff1a;模型跑不通、梯度爆炸、训练曲线像心电图一样乱跳&#xff0c;或者更糟——明明代码和论文一模一样&#xff0c;但 reward 就是上不去。…...

Steam SDK上传游戏包体避坑指南:路径、验证码与BuildID那些事儿

Steam SDK上传游戏包体避坑指南&#xff1a;路径、验证码与BuildID那些事儿 第一次通过Steam SDK上传游戏包体时&#xff0c;开发者往往会遇到各种意料之外的"坑"。这些看似小问题却可能导致数小时的无效排查。本文将从实战角度&#xff0c;分享那些官方文档没细说但…...

为AI智能体构建持久化记忆系统:基于RAG与向量检索的实践

1. 项目概述&#xff1a;为AI智能体构建持久化记忆系统在AI智能体&#xff08;AI Agent&#xff09;的开发浪潮中&#xff0c;一个核心的痛点日益凸显&#xff1a;如何让智能体拥有持续、可靠的记忆能力&#xff1f;无论是基于Claude API、GPTs还是其他大语言模型构建的对话机器…...

Tailark部署指南:从开发到生产环境的完整流程

Tailark部署指南&#xff1a;从开发到生产环境的完整流程 【免费下载链接】cnblocks Shadcn marketing blocks 项目地址: https://gitcode.com/gh_mirrors/cn/cnblocks Tailark是一个专为现代营销网站打造的响应式组件库&#xff0c;基于shadcn/ui、Tailwind CSS和Next.…...

别再只点灯了!用ESP32和WebServer库做个智能家居控制面板原型(附完整代码)

用ESP32打造智能家居控制面板&#xff1a;从网页控制到硬件交互实战 想象一下&#xff0c;清晨醒来无需下床&#xff0c;轻点手机就能打开窗帘、调节灯光&#xff1b;离家时一键关闭所有电器&#xff0c;还能实时查看家中温湿度——这些看似未来的场景&#xff0c;如今用一块ES…...