年至年的选择仿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 16.1 Crack

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

九、多态（2）

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

【JavaScript】new 的原理以及实现

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

版本动态 | SolidUI 0.2.0 版本发布

SolidUI 一句话生成任何图形 背景 随着文本生成图像的语言模型兴起&#xff0c;SolidUI想帮人们快速构建可视化工具&#xff0c;可视化内容包括2D,3D,3D场景&#xff0c;从而快速构三维数据演示场景。SolidUI 是一个创新的项目&#xff0c;旨在将自然语言处理&#xff08;NLP&…
阅读更多...
[SpringCloud] 组件性能优化技巧

[SpringCloud] 组件性能优化技巧

Feign 配置优化hystrix配置 优化ribbon 优化Servlet 容器 优化Zuul配置 优化 文章目录 1.Servlet 容器 优化2.Feign 配置优化3.Zuul配置 优化4.hystrix配置 优化5.ribbon 优化 1.Servlet 容器 优化 默认情况下, Spring Boot 使用 Tomcat 来作为内嵌的 Servlet 容器, 可以将 We…
阅读更多...
在Visual Studio上，使用OpenCV实现人脸识别

在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用于创建新用户

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

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

代理模式【Proxy Pattern】

什么是代理模式呢&#xff1f;我很忙&#xff0c;忙的没空理你&#xff0c;那你要找我呢就先找我的代理人吧&#xff0c;那代理人总要知道 被代理人能做哪些事情不能做哪些事情吧&#xff0c;那就是两个人具备同一个接口&#xff0c;代理人虽然不能干活&#xff0c;但是被 代…
阅读更多...
解决 Mac 上使用 Electron Updater 更新 App 不成功的问题！！！

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

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

11 迭代器|生成器|协程

文章目录 迭代器可迭代对象可迭代对象的本质iter()函数与 next()函数迭代器 Iterator样例 for...in...循环的本质使用的场景--斐波那契数列list和tuple也可以接收可迭代对象 生成器简介创建生成器方法一方法二总结 使用 send 唤醒 协程协程和线程差异简单实现协程greenletgeven…
阅读更多...
微PE工具箱实现U盘重装Windows系统

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

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

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

一、出现内存溢出的几种情况 内存溢出错误分为StackOverflowError和OutOfMemoryError&#xff0c;前者是栈中出现溢出&#xff0c;后者一般是堆或方法区出现溢出&#xff0c;简称OOM 1. 栈溢出 StackOverflowError 栈溢出一般都是因为没有正确的结束递归导致的&#xff0c;无…
阅读更多...
Linux中安装MySQL8版本，安装MySQL步骤，MySQL8离线安装

Linux中安装MySQL8版本，安装MySQL步骤，MySQL8离线安装

Linux中安装MySQL8版本的步骤如下&#xff1a; 1.检查下libaio.so.1的位置 [roottdx ]# whereis libaio.so.1 libaio.so: /usr/lib64/libaio.so.1 如果没有找到该文件 (1).在线安装 [roottdx ]# yum install -y libaio (2).离线安装&#xff1a; 上传之后执行命令安装&#…
阅读更多...
pymysql 库 - python 操作 mysql

pymysql 库 - python 操作 mysql

环境&#xff1a; Win10 x64 Python 3.7 PyMySQL 1.0.2 MySQL 8.0.27 1 安装 pip install pymysql 2 地址 https://pypi.org/project/pymysql/ 3.1 数据库版本查询 (search_version.py) import pymysql# 打开数据库连接 try:db pymysql.connect(hostlocalhost, userr…
阅读更多...
python安装第三方包时报错：...\lib\site-packages\pip\_vendor\urllib3\response.py...

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等计算框架做分布式

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

mongodb基础

mongodb语法 参考文档&#xff1a;https://docs.mongodb.com/manual/reference/ BSON Types BSON Type有2种标识符&#xff0c;整形和字符串 类型数值字符串说明Double1“double”String2“string”Object3“object”Array4“array”Binary data5“binData”Undefined6“un…
阅读更多...
8.9黄金最新行情走势分析及短线交易策略

8.9黄金最新行情走势分析及短线交易策略

近期有哪些消息面影响黄金走势&#xff1f;黄金多空该如何研判&#xff1f; ​黄金消息面解析&#xff1a;周三&#xff08;8月9日&#xff09;现货黄金维持震荡&#xff0c;目前交投于1930美元附近&#xff0c;隔日现货黄金盘中震荡下行&#xff0c;失守1930关口并在美盘时段…
阅读更多...
【Spring】-Spring的IoC和DI

【Spring】-Spring的IoC和DI

作者&#xff1a;学Java的冬瓜 博客主页&#xff1a;☀冬瓜的主页&#x1f319; 专栏&#xff1a;【Framework】 主要内容&#xff1a;什么是spring&#xff1f;IoC容器是什么&#xff1f;如何使代码解耦合&#xff1f;IoC的核心原理&#xff0c;IoC的优点。依赖注入/对象装配/…
阅读更多...
【ARM 嵌入式 编译系列 10 -- GCC 编译缩减可执行文件 elf 文件大小】

【ARM 嵌入式 编译系列 10 -- GCC 编译缩减可执行文件 elf 文件大小】

文章目录 GCC 如何缩减可执行文件size测试代码 上篇文章&#xff1a;ARM 嵌入式 编译系列 9-- GCC 编译符号表&#xff08;Symbol Table&#xff09;的详细介绍 下篇文章&#xff1a;ARM 嵌入式 编译系列 10.1 – GCC 编译缩减可执行文件 elf 文件大小 GCC 如何缩减可执行文件s…
阅读更多...
最新文章

Copyright @ 2022~2023