年至年的选择仿elementui的样式

在这里插入图片描述

组件:
<!--* @Author: liuyu liuyu@xizhengtech.com* @Date: 2023-02-01 16:57:27* @LastEditors: wangping wangping@xizhengtech.com* @LastEditTime: 2023-06-30 17:25:14* @Description: 时间选择年 --->
<template><div class="yearPicker" ref="yearPicker" :width="width"><input class="_inner" :style="bindInputStyle" ref="inputLeft" v-model="startShowYear" @focus="onFocus" @blur="onBlur" type="text" name="yearInput" @keyup="checkStartInput($event)" placeholder="开始年份" /><span>{{ sp }}</span><input class="_inner" :style="bindInputStyle" ref="inputRight" v-model="endShowYear" @focus="onFocus" @blur="onBlur" type="text" name="yearInput" @keyup="checkEndInput($event)" placeholder="结束年份" /><!-- <i class="dateIcon el-icon-date"></i> 按照自己标准库里面的图标设置--><!-- <span class="_inner labelText"></span> --><i class="_inner labelText el-icon-date"></i><div class="_inner floatPanel" v-if="showPanel"><div class="_inner leftPanel"><div class="_inner panelHead"><i class="_inner el-icon-d-arrow-left" @click="onClickLeft"></i>{{ leftYearList[0] + " - " + leftYearList[9] }}</div><div class="_inner panelContent"><div :class="{oneSelected: item === startYear && oneSelected,startSelected: item === startYear,endSelected: item === endYear,betweenSelected: item > startYear && item < endYear,}" v-for="item in leftYearList" :key="item"><a :class="{cell: true,_inner: true,selected: item === startYear || item === endYear,}" @click="onClickItem(item)" @mouseover="onHoverItem(item)">{{ item }}</a></div></div></div><div class="line"></div><div class="_inner rightPanel"><div class="_inner panelHead"><i class="_inner el-icon-d-arrow-right" @click="onClickRight"></i>{{ rightYearList[0] + " - " + rightYearList[9] }}</div><div class="_inner panelContent"><div :class="{startSelected: item === startYear,endSelected: item === endYear,betweenSelected: item > startYear && item < endYear,}" v-for="item in rightYearList" :key="item"><a :class="{cell: true,_inner: true,selected: item === endYear || item === startYear,}" @click="onClickItem(item)" @mouseover="onHoverItem(item)">{{ item }}</a></div></div></div></div></div>
</template><script>
import moment from "moment";
const SELECT_STATE = {unselect: 0,selecting: 1,selected: 2,
};
export default {name: "yearPicker",computed: {bindInputStyle() {return {"--placeholderColor": "#c0c4cc",};},oneSelected() {return (this.curState === SELECT_STATE.selecting &&(this.startYear === this.endYear || this.endYear == null));},startDate() {return this.startYear;},leftYearList() {return this.yearList.slice(0, 10);},rightYearList() {return this.yearList.slice(10, 20);},startYearFormat() {if (this._.isNil(this.startYear)) {return null;}return moment(this.startYear).startOf("year").format("yyyy");},endYearFormat() {if (this._.isNil(this.endYear)) {return null;}return moment(this.endYear).endOf("year").format("yyyy");},},props: {width: {default: 200,},labelWidth: {default: 40,},sp: {default: "-",},initYear: {default: null,},},data() {return {itemBg: {},startShowYear: null,endShowYear: null,yearList: [],showPanel: false,startYear: null,endYear: null,curYear: 0,curSelectedYear: 0,curState: SELECT_STATE.unselect,};},methods: {checkStartInput(event) {if (isNaN(this.startShowYear)) {this.startShowYear = this.startYear;} else {this.startYear = this.startShowYear * 1;this.changeYear();}},checkEndInput() {if (isNaN(this.endShowYear)) {this.endShowYear = this.endYear;} else {this.endYear = this.endShowYear * 1;this.changeYear();}},changeYear() {if (this.startYear > this.endYear) {let tmp = this.endYear;this.endYear = this.startYear;this.startYear = tmp;this.startShowYear = this.startYear;this.endShowYear = this.endYear;}if (this.startYear && this.endYear) {this.$emit("updateTimeRange", {startYear: moment(this.startYear + "").startOf("year").valueOf(),endYear:moment(this.endYear + "").endOf("year").valueOf() + 1,});} else {console.warn("WARN:年份不合法", this.startYear, this.endYear);}},onHoverItem(iYear) {if (this.curState === SELECT_STATE.selecting) {let tmpStart = this.curSelectedYear;this.endYear = Math.max(tmpStart, iYear);this.startYear = Math.min(tmpStart, iYear);}},onClickItem(iYear) {if (this.curState === SELECT_STATE.unselect ||this.curState === SELECT_STATE.selected) {this.startYear = iYear;this.curSelectedYear = iYear;this.endYear = null;this.curState = SELECT_STATE.selecting;} else if (this.curState === SELECT_STATE.selecting) {this.endShowYear = this.endYear;this.startShowYear = this.startYear;this.curState = SELECT_STATE.selected;this.$emit("updateTimeRange", {startYear: moment(this.startYear + "").startOf("year").valueOf(),endYear:moment(this.endYear + "").endOf("year").valueOf() + 1,});setTimeout(() => {//为动画留的时间,可优化this.showPanel = false;}, 300);}},onFocus() {this.$nextTick(() => {this.showPanel = true;});},onBlur() {//   this.showPanel = false;},updateYearList() {let iStart = Math.floor(this.curYear / 10) * 10 - 10;iStart = iStart < 0 ? 0 : iStart;this.yearList = [];for (let index = 0; index < 20; index++) {this.yearList.push(iStart + index);}},closePanel(e) {if (!this.showPanel) {return;}if (typeof e.target.className !== "string") {this.$nextTick(() => {this.showPanel = false;});return;}if (e.target.className.indexOf("_inner") === -1 ||(e.target.name === "yearInput" &&e.target !== this.$refs.inputLeft &&e.target !== this.$refs.inputRight)) {this.$nextTick(() => {this.showPanel = false;});}e.stopPropagation();return false;},onClickLeft() {this.curYear = this.curYear * 1 - 10;this.updateYearList();},onClickRight() {this.curYear = this.curYear * 1 + 10;this.updateYearList();},//------------------对外接口------------------------//直接传时间戳setYear(startYearStamp, endYearStamp) {if (!isNaN(startYearStamp) && !isNaN(endYearStamp)) {let startYear = moment(startYearStamp).format("yyyy");let endYear = moment(endYearStamp).format("yyyy");this.startYear = startYear * 1;this.endYear = endYear * 1;this.endShowYear = endYear * 1;this.startShowYear = startYear * 1;}},},created() {this.curYear = moment().format("yyyy");this.updateYearList();},beforeUnmount() {document.removeEventListener("click", this.closePanel.bind(this));},mounted() {this.$refs.yearPicker.style = "padding-left:" + this.labelWidth + "px";document.addEventListener("click", this.closePanel.bind(this));},
};
</script>
<style lang="scss" scoped>
.yearPicker {font-size: 14px;display: flex;position: relative;transition: all 0.3s;input {&::placeholder {color: var(--placeholderColor); // 动态值}}input:first-child {text-align: center;}.labelText {position: absolute;left: 10px;top: 10px;color: #c4c6d1;}background-color: #fff;span {padding: 0 8px;height: 36px;line-height: 36px;}border: 1px solid #eff1f3;height: 36px;line-height: 36px;border-radius: 4px;padding: 0 28px 0 8px;box-sizing: border-box;.floatPanel {> div {width: 50%;}// padding: 16px;position: absolute;display: flex;background-color: #fff;z-index: 9999 !important;border-radius: 4px;// width: 650px;height: 252px;top: 50px;left: 0px;box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);border: 1px solid #dfe4ed;.panelContent {display: grid;grid-template-columns: 25% 25% 25% 25%;// flex-wrap: wrap;width: 100%;height: calc(100% - 15px);margin-top: 8px;.oneSelected {border-top-right-radius: 24px;border-bottom-right-radius: 24px;}.startSelected {background-color: #f2f6fc;border-top-left-radius: 24px;border-bottom-left-radius: 24px;}.endSelected {background-color: #f2f6fc;border-top-right-radius: 24px;border-bottom-right-radius: 24px;}.betweenSelected {background-color: #f2f6fc;}> div {width: 75px;height: 48px;line-height: 48px;margin: 6px 0;// border-radius: 24px;text-align: center;a {display: inline-block;width: 60px;height: 36px;cursor: pointer;line-height: 36px;border-radius: 18px;color: #606266;}.selected {background-color: #1890ff;color: #fff;}}}.panelHead {height: 38px;line-height: 38px;position: relative;text-align: center;font-size: 16px;border-bottom: 1px solid #dfe4ed;i {position: absolute;cursor: pointer;&:hover {color: #1890ff;}}}.rightPanel {// padding-left: 8px;margin: 16px;display: flex;flex-direction: column;}.line {width: 1px;height: 100%;background: #dfe4ed;}.leftPanel {margin: 16px;display: flex;flex-direction: column;}.leftPanel .panelHead i {left: 0px;top: 10px;font-size: 14px;color: #717273;}.rightPanel .panelHead i {right: 0px;top: 8px;}.leftPanel .panelHead i:hover,.rightPanel .panelHead i:hover {cursor: pointer;}}.floatPanel::before {content: "";border-bottom: 6.5px solid #797979;border-left: 6.5px solid transparent;border-right: 6.5px solid transparent;position: absolute;left: 44px;-webkit-transform: translateX(-50%);transform: translateX(-50%);top: -5.5px;border-radius: 5px;}.floatPanel::after {content: "";border-bottom: 8px solid #fff;border-left: 8px solid transparent;border-right: 8px solid transparent;position: absolute;left: 44px;-webkit-transform: translateX(-50%);transform: translateX(-50%);top: -5px;border-radius: 5px;}
}
input {width: 100px;border: none;height: 37px;line-height: 37px;box-sizing: border-box;background-color: transparent;text-align: center;color: #606266;
}
input:focus {outline: none;background-color: transparent;
}
.yearPicker:hover {border-color: #1890ff;
}
.dateIcon {position: absolute;right: 16px;top: 9px;color: #adb2bc;
}
</style>
使用:
<YearYear1 style="width:300px" :initYear="dateValue2" @updateTimeRange="updateStatisticYear" />dateValue2: [],updateStatisticYear(val) {console.log("年", val);
},

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

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

相关文章

Smart HTML Elements 16.1 Crack

Smart HTML Elements 是一个现代 Vanilla JS 和 ES6 库以及下一代前端框架。企业级 Web 组件包括辅助功能&#xff08;WAI-ARIA、第 508 节/WCAG 合规性&#xff09;、本地化、从右到左键盘导航和主题。与 Angular、ReactJS、Vue.js、Bootstrap、Meteor 和任何其他框架集成。 智…

九、多态(2)

本章概要 构造器和多态 构造器调用顺序继承和清理构造器内部多态方法的行为 协变返回类型使用继承设计 替代 vs 扩展向下转型与运行时类型信息 构造器和多态 通常&#xff0c;构造器不同于其他类型的方法。在涉及多态时也是如此。尽管构造器不具有多态性&#xff08;事实上…

【JavaScript】new 的原理以及实现

网道 - new 命令的原理 使用new命令时&#xff0c;它后面的函数依次执行下面的步骤。 创建一个空对象&#xff0c;作为将要返回的对象实例。将这个空对象的原型&#xff0c;指向构造函数的prototype属性。将这个空对象赋值给函数内部的this关键字。如果构造函数返回了一个对象…

在Visual Studio上,使用OpenCV实现人脸识别

1. 环境与说明 本文介绍了如何在Visual Studio上&#xff0c;使用OpenCV来实现人脸识别的功能 环境说明 : 操作系统 : windows 10 64位Visual Studio版本 : Visual Studio Community 2022 (社区版)OpenCV版本 : OpenCV-4.8.0 (2023年7月最新版) 实现效果如图所示&#xff0…

Linux命令200例:adduser用于创建新用户

&#x1f3c6;作者简介&#xff0c;黑夜开发者&#xff0c;全栈领域新星创作者✌。CSDN专家博主&#xff0c;阿里云社区专家博主&#xff0c;2023年6月csdn上海赛道top4。 &#x1f3c6;数年电商行业从业经验&#xff0c;历任核心研发工程师&#xff0c;项目技术负责人。 &…

代理模式【Proxy Pattern】

什么是代理模式呢&#xff1f;我很忙&#xff0c;忙的没空理你&#xff0c;那你要找我呢就先找我的代理人吧&#xff0c;那代理人总要知道 被代理人能做哪些事情不能做哪些事情吧&#xff0c;那就是两个人具备同一个接口&#xff0c;代理人虽然不能干活&#xff0c;但是被 代…

解决 Mac 上使用 Electron Updater 更新 App 不成功的问题!!!

文章目录 1. 现象2. 分析并如何解决3. 后续 1. 现象 在Mac电脑上&#xff0c;使用Electron Updater对程序进行更新&#xff0c;但是一直不成功&#xff0c;也不报错。具体表现是这样的&#xff1a;当前我的程序版本是3.11版本&#xff0c;点击更新之后&#xff0c;也下载了&am…

微PE工具箱实现U盘重装Windows系统

教程来源 U盘重装Windows系统&#xff08;微PE工具箱&#xff09;_哔哩哔哩_bilibili 加上自己的一丢丢理解&#xff0c;如果你觉得长视频看了犯困&#xff0c;不如看看我的理解文章说不定能够帮助到你 准备工作 到这个网站使用迅雷下载免费无插件的官方镜像MSDN, 我告诉你…

JVM笔记 —— 出现内存溢出错误时时如何排查

一、出现内存溢出的几种情况 内存溢出错误分为StackOverflowError和OutOfMemoryError&#xff0c;前者是栈中出现溢出&#xff0c;后者一般是堆或方法区出现溢出&#xff0c;简称OOM 1. 栈溢出 StackOverflowError 栈溢出一般都是因为没有正确的结束递归导致的&#xff0c;无…

python安装第三方包时报错:...\lib\site-packages\pip\_vendor\urllib3\response.py...

安装redis第三方包&#xff1a; pip install redis报错现象&#xff1a; 解决方法&#xff1a;使用以下命令可成功安装 pip install redis -i http://pypi.douban.com/simple --trusted-host pypi.douban.com

关于网络入侵检测领域使用Spark/Flink等计算框架做分布式

关于网络入侵检测领域使用Spark/Flink等计算框架做分布式 0、引言1 基于LightGBM的网络入侵检测研究2 基于互信息法的智能化运维系统入侵检测Spark实现3 基于Spark的车联网分布式组合深度学习入侵检测方法4 基于Flink的分布式在线集成学习框架研究5 基于Flink的分布式并行逻辑回…

【Spring】-Spring的IoC和DI

作者&#xff1a;学Java的冬瓜 博客主页&#xff1a;☀冬瓜的主页&#x1f319; 专栏&#xff1a;【Framework】 主要内容&#xff1a;什么是spring&#xff1f;IoC容器是什么&#xff1f;如何使代码解耦合&#xff1f;IoC的核心原理&#xff0c;IoC的优点。依赖注入/对象装配/…

Linux下在qtcreator中创建qt程序

目录 1、新建项目 2、单工程项目创建 3、多工程项目创建 4、添加子工程&#xff08;基于多工程目录结构&#xff09; 5、 .pro文件 1、新建项目 切换到“编辑”界面&#xff0c;点击菜单栏中的“文件”-“新建文件或项目” 2、单工程项目创建 只有一个工程的项目&#…

Axure RP移动端高保真CRM办公客户管理系统原型模板及元件库

Axure RP移动端高保真CRM办公客户管理系统原型模板及元件库&#xff0c;一套典型的移动端办公工具型APP Axure RP原型模板&#xff0c;可根据实际的产品需求进行扩展&#xff0c;也可以作为移动端原型设计的参考案例。为提升本作品参考价值&#xff0c;在模板设计过程中尽量追求…

chatGPT应用于房地产行业

作为 2023 年的房地产专业人士&#xff0c;您无疑认识到技术对行业的重大影响。近年来&#xff0c;一项技术进步席卷了世界——人工智能。人工智能彻底改变了房地产业务的各个方面&#xff0c;从简化管理任务到增强客户互动。 在本文中&#xff0c;我们将探讨几种巧妙的人工智…

zabbix自动注册服务器以及部署代理服务器

文章目录 Zabbix自动注册服务器及部署代理服务器一.zabbix自动注册1.什么是自动注册2.环境准备3.zabbix客户端配置4.在 Web 页面配置自动注册5.验证自动注册 二.部署 zabbix 代理服务器1.分布式监控的作用&#xff1a;2.环境部署3.代理服务器配置4.客户端配置5.web页面配置5.1 …

分类预测 | MATLAB实现GWO-BiLSTM-Attention多输入分类预测

分类预测 | MATLAB实现GWO-BiLSTM-Attention多输入分类预测 目录 分类预测 | MATLAB实现GWO-BiLSTM-Attention多输入分类预测预测效果基本介绍程序设计参考资料 预测效果 基本介绍 1.GWO-BiLSTM-Attention 数据分类预测程序 2.代码说明&#xff1a;基于灰狼优化算法&#xff08…

微信小程序(原生)搜索功能实现

一、效果图 二、代码 wxml <van-searchvalue"{{ keyword }}"shape"round"background"#000"placeholder"请输入关键词"use-action-slotbind:change"onChange"bind:search"onSearch"bind:clear"onClear&q…

实践-CNN卷积层

实践-CNN卷积层 1 卷积层构造2 整体流程3 BatchNormalization效果4 参数对比5 测试效果 1 卷积层构造 2 整体流程 根据网络结构来写就可以了。 池化 拉平 训练一个网络需要2-3天的时间。用经典网络来&#xff0c;一些细节没有必要去扣。 损失函数&#xff1a; fit模型&…

运维监控学习笔记1

1、监控对象&#xff1a; 1、监控对象的理解&#xff1b;CPU是怎么工作的&#xff1b; 2、监控对象的指标&#xff1a;CPU使用率&#xff1b;上下文切换&#xff1b; 3、确定性能基准线&#xff1a;CPU负载多少才算高&#xff1b; 2、监控范围&#xff1a; 1、硬件监控&#x…