日期切换

在这里插入图片描述

组件:
<template><div class="time-picker"><el-radio-group size="small" v-model="timeType" @change="changePickerType"><el-radio-button label="hour" v-if="isShow"></el-radio-button><el-radio-button label="day"></el-radio-button><el-radio-button label="month"></el-radio-button><el-radio-button label="quarter"></el-radio-button><el-radio-button label="year"></el-radio-button></el-radio-group><el-date-picker v-if="timeType != 'year' && timeType != 'quarter'" v-model="timeList" :type="pickerType[timeType].type" range-separator="-" start-placeholder="开始日期" end-placeholder="结束日期" size="small" style="width: 300px" value-format="timestamp" :clearable="false" :format="pickerType[timeType].format" @change="changeDatePicker" class="select-time" popper-class="time-popper" :default-time="['00:00:00', '23:00:00']"></el-date-picker><YearYear1 v-if="timeType == 'year'" style="width:300px" :initYear="dateValue2" @updateTimeRange="updateStatisticYear" /><QuarterTime v-if="timeType == 'quarter'" @getQuarter="getQuarter"></QuarterTime></div>
</template><script>
import YearYear1 from "@/components/YearYear1";
import QuarterTime from "@/components/QuarterTime";
export default {model: {prop: "times",event: "updatetimes",},props: {times: {type: Array,},isShow: {type: Boolean,default: true,},},components: {YearYear1,QuarterTime,},data() {return {timeType: "hour",timeList: [],yearTime: [],dateValue2: [],pickerType: {hour: {type: "datetimerange",format: "yyyy-MM-dd HH时",},day: {type: "daterange",},month: {type: "monthrange",},quarter: {type: "quarter",},year: {type: "year",},},};},methods: {changePickerType(type) {let dayType = {month: {type: "years",count: 1,},day: {type: "days",count: 3,},hour: {type: "days",count: 3,},quarter: {type: "quarter",count: 1,},year: {type: "years",count: 2,},};//   var moment = require("moment");//   const startDay = moment()//     .subtract(dayType[type].count, dayType[type].type)//     .format("YYYY-MM-DD HH:00:00");//   const endDay = moment().format("YYYY-MM-DD HH:00:00");//   this.timeList = [//     new Date(startDay).getTime(),//     new Date(endDay).getTime(),//   ];this.timeList = [];this.yearTime = this.timeList;//   this.$emit("updatetimes", this.timeList);},isNull(value) {if (value) {return false;}return true;},//获取季度子组件传回的数据getQuarter(val) {console.log("季节:", val);},// 选择年updateStatisticYear(val) {console.log("年", val);},changeDatePicker(e) {console.log("选择:", e);this.$emit("updatetimes", e);},},
};
</script><style lang="scss" scoped>
.time-picker {display: flex;
}.time-popper {.el-time-spinner {display: flex;justify-content: center;& > :nth-child(2) {display: none;}}.el-picker-panel__footer {& > :first-child {display: none;}}
}
.el-radio-group {margin-right: 10px;
}
.year-picker {line-height: 28px;
}
::v-deep .el-radio-button--small .el-radio-button__inner {height: 36px;line-height: 18px;
}
::v-deep .el-range-editor--small.el-input__inner {height: 36px;line-height: 18px;
}
::v-deep .el-range-editor--small .el-range__icon {line-height: 30px;
}
</style>
里面的年(YearYear1)和季度(QuarterTime)组件是前面分享的文章:
标题:年至年的选择仿elementui的样式、仿真elementUI的时间选择的季度选择
引入即可
使用:
<SelectTimePicker :isShow="false" @updatetimes="updatetimes"></SelectTimePicker>import SelectTimePicker from "@/components/SelectTimePicker/index.vue";
components: { SelectTimePicker },updatetimes(val) {console.log("点击:", val);
},

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

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

相关文章

Vue [Day7] 综合案例

核心概念回顾 state&#xff1a;提供数据 getters&#xff1a;提供与state相关的计算属性 mutations&#xff1a;提供方法&#xff0c;用于修改state actions&#xff1a;存放异步操作 modules&#xff1a;存模块 功能分析 https://www.npmjs.com/package/json-server#ge…

如何学习大数据

文章目录 每日一句正能量前言一、什么是大数据二、大数据的应用领域三、社会对大数据的人才需求四、大数据的学习路线后记 每日一句正能量 多数人认为&#xff0c;一旦达到某个目标&#xff0c;人们就会感到身心舒畅。但问题是你可能永远达不到目标。把快乐建立在还不曾拥有的事…

OpenCV实例(八)车牌字符识别技术(二)字符识别

车牌字符识别技术&#xff08;二&#xff09;字符识别 1.字符识别原理及其发展阶段2.字符识别方法3.英文、数字识别4.车牌定位实例 1.字符识别原理及其发展阶段 匹配判别是字符识别的基本思想&#xff0c;与其他模式识别的应用非常类似。字符识别的基本原理就是对字符图像进行…

JavaScript 操作历史记录api怎样使用 JavaScript

JavaScript 操作历史记录api怎样使用 JavaScript History 是 window 对象中的一个 JavaScript 对象&#xff0c;它包含了关于浏览器会话历史的详细信息。你所访问过的 URL 列表将被像堆栈一样存储起来。浏览器上的返回和前进按钮使用的就是 history 的信息。 History 对象包含…

构造函数——初始化列表

初始化列表的引入。 #include<iostream> using namespace std;//栈类 typedef int DataType; class Stack { public://默认构造&#xff1a;Stack(size_t capacity ){cout << "Stack()" << endl;_array (DataType*)malloc(sizeof(DataType) * ca…

【golang】怎样判断一个变量的类型?

怎样判断一个变量的类型&#xff1f; package mainimport "fmt"var container []string{"zero", "one", "two"} func main() {container : map[int]string{0: "zero", 1: "one", 2: "two"}fmt.Printf…

享元模式(C++)

定义 运用共享技术有效地支持大量细粒度的对象。 使用场景 在软件系统采用纯粹对象方案的问题在于大量细粒度的对象会很快充斥在系统中&#xff0c;从而带来很高的运行时代价——主要指内存需求方面的代价。如何在避免大量细粒度对象问题的同时&#xff0c;让外部客户程序仍…

128.【Maven】

Maven仓库 (一)、Maven 简介1.传统项目管理的缺点2.Maven是什么3.Maven的作用 (二)、Maven 的下载与安装1.下载与认识目录2.配置Maven的全局环境 (三)、Maven 的基础概念1.Maven 仓库(1).仓库分类 2. Maven 坐标3.Maven 本地仓库配置(1).改变默认的仓库地址(2).改变远程仓库地址…

mac电脑 node 基本操作命令

1. 查看node的版本 node -v2. 查看可安装的node版本 sudo npm view node versions3. 安装指定版本的node sudo n 18.9.04. 安装最新版本node sudo n latest5. 安装最新稳定版 sudo n stable6. 清楚node缓存 sudo npm cache clean -f7. 列举已经安装的node版本 n ls 8. 在…

【并发编程】无锁环形队列Disruptor并发框架使用

Disruptor 是苹国外厂本易公司LMAX开发的一个高件能列&#xff0c;研发的初夷是解决内存队列的延识问顾在性能测试中发现竟然与10操作处于同样的数量级)&#xff0c;基于Disruptor开发的系统单线程能支撑每秒600万订单&#xff0c;2010年在QCn演讲后&#xff0c;获得了业界关注…

c++11-14-17_内存管理(RAII)_多线程

文章目录 前言&#xff1a;什么是RAII&#xff1f;指针/智能指针&#xff1a;使用智能指针管理内存资源&#xff1a;unique_ptr的使用&#xff1a;自定义删除器&#xff1a; shared_ptr的使用&#xff1a;shared_ptr指向同一个对象的不同成员&#xff1a;自定义删除函数&#x…

期权定价模型系列【2】—期权的希腊字母计算及应用

本篇文章旨在介绍期权常见希腊字母的计算及应用 本专栏更多侧重于理论及文字方面的展示&#xff0c;文章具体的代码可以参考我的另一个专栏【期权量化】。 【期权量化】专栏有同名文章&#xff0c;并且给出了文章的具体代码。 专栏地址&#xff1a; http://t.csdn.cn/Y30Hk…

谈谈Java开发语言

目录 1.概念 2.特点 3.应用领域 4.就业情况 1.概念 Java是一种面向对象的编程语言&#xff0c;它由James Gosling和他的团队在1995年于Sun Microsystems&#xff08;现在是Oracle Corporation&#xff09;开发出来。Java的设计目标是让开发者能够编写一次代码&#xff0c;在…

Arcgis中POI找到建筑面内距离最近的标准地址通过模型构建器来实现

背景 之前写过一篇文章 Arcgis通过矢量建筑面找到POI对应的标准地址 这里面的大致思路跟本篇文章是类似的&#xff0c;不过上一篇文章有部分有瑕疵&#xff0c;就是在POI去找建筑面内的标准地址时&#xff0c;找到的虽然是建筑面内的&#xff0c;但是不一定是距离最近的&#…

登录界面中图片验证码的生成和校验

一、用pillpw生成图片验证码 1、安装pillow pip install pip install pillow2、下载字体 比如&#xff1a;Monaco.ttf 3、实现生成验证码的方法 该方法返回一个img ,可以把这个img图片保存到内存中&#xff0c;也可以以文件形式保存到磁盘&#xff0c;还返回了验证码的文字…

走出象牙塔:李郓梁的区块链实践之路丨对话MVP

如何从科研走向实践&#xff1f;李郓梁在社区找到了答案。 作为西安工业大学的硕士研究生&#xff0c;李郓梁从学校的实验室接触区块链技术。通过研读大量论文&#xff0c;李郓梁为区块链多中心化、不可篡改等前沿理论深深着迷&#xff0c;并选择将区块链作为主要研究方向&…

使用gewe框架进行微信群组管理(一)

友情链接&#xff1a;geweapi.com 点击访问即可。 管理员操作 小提示&#xff1a; 添加、删除、转让多个wxid时仅限于添加/删除管理员&#xff0c;1添加 2删除 3转让 请求URL&#xff1a; http://域名地址/api/group/admin 请求方式&#xff1a; POST 请求头&#xff1a…

C++实现一键关闭桌面

方法一&#xff1a; C关闭桌面,explorer.exe #include<Windows.h> #include <TlHelp32.h> #include"resource.h" #pragma warning(disable:4996) void taskkill(const char * name) {HANDLE info_handle CreateToolhelp32Snapshot(TH32CS_SNAPPROCESS,…

Jmeter —— jmeter设置HTTP信息头管理器模拟请求头

HTTP信息头管理器 HTTP信息头管理器是在有需要模拟请求头部的时候进行设置的&#xff0c;添加方式 是 右击线程组 -- 配置元件 -- HTTP信息头管理器 可以通过抓包工具或者F12获取http请求的header头部信息&#xff1b;如下图&#xff1a; 复制并点击jmeter中的从剪贴板添加&am…

element-plus里,设置Message消息提示框组件显示的位置,垂直居中

element-plus里的 Message 组件&#xff0c;默认展示的位置在最顶部&#xff0c;依次往下叠加&#xff0c;如图所示 想要解决它显示的位置&#xff0c;可以使用组件里的 offset属性&#xff0c;设置 Message 距离窗口顶部的偏移量,想要垂直居中&#xff0c;可以这么设置&#…