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>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/138498.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

路由器ip地址设置

当你使用路由器时&#xff0c;你可以按照以下步骤设置路由器的IP地址。这样可以确保你的网络连接正常并允许其他设备连接到你的路由器。 **步骤一&#xff1a;登录路由器管理界面** 首先&#xff0c;你需要登录到路由器的管理界面。打开你的浏览器&#xff0c;并输入路由器的…

本地Docker Registry远程连接,为你带来高效便捷的镜像管理体验!

Linux 本地 Docker Registry本地镜像仓库远程连接 文章目录 Linux 本地 Docker Registry本地镜像仓库远程连接1. 部署Docker Registry2. 本地测试推送镜像3. Linux 安装cpolar4. 配置Docker Registry公网访问地址5. 公网远程推送Docker Registry6. 固定Docker Registry公网地址…

ChatGLM Pytorch从0编写Transformer算法

预备工作 # !pip install http://download.pytorch.org/whl/cu80/torch-0.3.0.post4-cp36-cp36m-linux_x86_64.whl numpy matplotlib spacy torchtext seaborn import numpy as np import torch import torch.nn as nn import torch.nn.functional as F import math, copy, tim…

【漏洞复现】企望制造 ERP命令执行

漏洞描述 由于企望制造 ERP comboxstore.action接口权限设置不当&#xff0c;默认的配置可执行任意SQL语句&#xff0c;利用xp_cmdshell函数可远程执行命令&#xff0c;未经认证的攻击者可通过该漏洞获取服务器权限。 免责声明 技术文章仅供参考&#xff0c;任何个人和组织…

golang入门笔记——pprof性能分析

文章目录 简介runtime/pprof的使用命令行交互网络服务性能分析pprof与性能测试结合压测工具go-wrk 简介 golang性能分析工具pprof的8个指标 1.性能分析的5个方面&#xff1a;CPU、内存、I/O、goroutine&#xff08;协程使用情况和泄漏检查&#xff09;、死锁检测以及数据竟态…

ETHERCAT转MODBUS TCP/IP协议网关

产品介绍 JM-ECT-TCPIP是自主研发的一款EtherCAT从站功能的通讯网关。该产品主要功能是将EtherCAT网络和 TCP/IP 网络连接起来。 本网关连接到EtherCAT总线中做为从站使用&#xff0c;连接到 TCP/IP 网络中做为服务器或客户端使用。 产品参数 技术参数 u 网关做为EtherCAT网…

淘天集团联合爱橙科技开源大模型训练框架Megatron-LLaMA

9月12日&#xff0c;淘天集团联合爱橙科技正式对外开源大模型训练框架——Megatron-LLaMA&#xff0c;旨在让技术开发者们能够更方便地提升大语言模型训练性能&#xff0c;降低训练成本&#xff0c;并保持和LLaMA社区的兼容性。测试显示&#xff0c;在32卡训练上&#xff0c;相…

八、数据类型转换

数据类型转换 1.数据类型转换1.1.隐式类型转换1.2.显式类型转换1.3.训练11.4.训练2 —————————————————————————————————————————————————— 1.数据类型转换 类型转换是将一个值从一种类型更改为另一种类型的过程。例如&…

Haproxy负载均衡群集

HAproxy搭建Web群集一、Web集群调度器1、常见的Web集群调度器2、常用集群调度器的优缺点&#xff08;LVS ,Nginx,Haproxy)2.1 Nginx2.2 LVS2.3 Haproxy 3、LVS、Nginx、HAproxy的区别 二、Haproxy1、简介2、Haproxy应用分析3、HAProxy的主要特性4、Haproxy调度算法&#xff08;…

有了Spring为什么还需要SpringBoot呢

目录 一、Spring缺点分析 二、什么是Spring Boot 三、Spring Boot的核心功能 3.1 起步依赖 3.2 自动装配 一、Spring缺点分析 1. 配置文件和依赖太多了&#xff01;&#xff01;&#xff01; spring是一个非常优秀的轻量级框架&#xff0c;以IOC&#xff08;控制反转&…

命令提示符cmd查询IP地址ipconfig, linux 系统中查看ip地址ifconfig

1.windowR 2.输入cmd----》确定 3.在命令行中输入ipconfig然后按回车。IPv4地址就是电脑的IP地址。 linux系统中查看ip地址 &#xff1a; ifconfig

vue内置组件Transition的详解

1. Transition定义 Vue 提供了两个内置组件&#xff0c;可以帮助你制作基于状态变化的过渡和动画&#xff1a; <Transition>会在一个元素或组件进入和离开 DOM 时应用动画。 <TransitionGroup> 会在一个 v-for 列表中的元素或组件被插入&#xff0c;移动&#xff0…

使用企业订货系统的原因和考虑|网上APP订单管理软件

使用企业订货系统的原因和考虑|网上APP订单管理软件 企业要用订货系统主要如下原因&#xff1a; 第一、在线订货系统能让销售即时看到商品信息。商品售价多少&#xff0c;进货价多少&#xff0c;上次跟客户的成交价是多少&#xff0c;最低可以卖多少钱&#xff0c;用个本子记录…

计算机操作系统 (王道考研)笔记(二)

重点知识点 1 内存1.1 内存的基础知识1.1.1 内存定义、作用1.1.2 指令的工作原理1.1.3 三种装入策略1.1.4 从写程序到程序运行1.1.5 链接的三种方式1.1.6 总结 1.2 内存管理1.2.1 内存空间的分配与回收a&#xff09; 连续分配管理b&#xff09; 非连续分配管理1&#xff09; 基…

线性代数的本质(六)——线性空间

文章目录 线性空间线性空间子空间坐标与同构线性变换与矩阵基变换与坐标变换 线性空间 线性空间 Grant: 普适的代价是抽象。 仔细分析就会发现&#xff0c;关于向量空间的一切概念及有关定理都不依赖于向量的具体表现形式(有序数组)&#xff0c;也不依赖于向量加法、数乘的具体…

notepad++编辑多个位置

在notepad设置多次点击不同的位置&#xff0c;然后同时操作这多个位置的方法&#xff1a; 1、选择编辑&#xff0c;首选项&#xff1a; 2、选择多点编辑&#xff1a;

数据结构学习笔记—— 排序算法总结【ヾ(≧▽≦*)o所有的排序算法考点看这一篇你就懂啦!!!】

目录 一、排序算法总结&#xff08;一&#xff09;排序算法分类&#xff08;二&#xff09;表格比较 二、详细分析&#xff08;最重要考点&#xff01;&#xff01;&#xff01;&#xff09;&#xff08;一&#xff09;稳定性&#xff08;二&#xff09;时间复杂度&#xff08;…

MapRdeuce工作原理

hadoop - (三)通俗易懂地理解MapReduce的工作原理 - 个人文章 - SegmentFault 思否 MapReduce架构 MapReduce执行过程 Map和Reduce工作流程 (input) ->map-> ->combine-> ->reduce-> (output) Map&#xff1a; Reduce

通讯协议介绍CoAP 协议解析

目录 1 通讯协议 2 TCP/IP 网络模型 2.1 TCP协议 2.1.1 TCP 连接过程 2.1.2 TCP 断开连接 2.1.3 TCP协议特点 2.2 UDP协议 2.2.1 UDP 协议特点 3 应用层协议简介 3.1 HTTP 协议 3.2 CoAP 协议 3.3 MQTT 协议 4 CoAP 协议详解 4.1 REST 风格 4.2 CoAP 首部分析 4…

Python 判断三位水仙花数

"""判断是否为三位水仙花数知识点&#xff1a;0、水仙花满足条件&#xff1a;(1 ** 3) (5 ** 3) (3 ** 3) 1531、字符串索引&#xff0c;例如&#xff1a;name zhouhua name[0] z2、变量类型转换函数3、双目运算符幂**,例如&#xff1a;3 ** 2 3 * 3 94、…