vue vue3 日期选择的组件,封装组件

一、背景

基于element日期选择组件,自行封装了一个组件。

以下是达到的效果:

1.选择年,日期选择组件默认填充是:当时的年;

2.选择月,日期选择组件默认填充的是:当时的年月;

3.选择日,日期选择组件默认填充的是:当时的年月日;

备注:

1.自行封装的组件,涉及到把所选的值暴露给其它“单页面组件”,通过vue3的defineExpose(),vue2需要修改一下;

2.自行封装的组件,涉及到传参,根据接口要求,传参了属性dataType;

3.自行封装的组件,涉及到判断条件,所选不能超过30天。

二、实现效果

三、代码

自行封装的组件,vue3 setup写法:

<script setup>
import { nextTick, onMounted, reactive, ref } from "vue";
import { getDatePiker } from "@/utils/cabinData";
import {timeLimits} from "@/utils"
const timeRange = 1 * 24 * 60 * 60 * 1000; // 1天时间戳
const timeToTimestamp = (time) => {
    let timestamp = Date.parse(new Date(time).toString());
    return timestamp;
  };
export const timeLimits=(times,message,intervalTime=7)=>{
    const minTime = timeToTimestamp(times[0]);
      const maxTime = timeToTimestamp(times[1]);
      const isOver7 = maxTime - minTime > timeRange * intervalTime;
      if (isOver7) {
        ElMessage({
          type: "warning",
          message: message===undefined?`历史记录查询时间不能超过7天`:message,
        });
        return false;
      }else{
        return true;
      }
}
const timeTypeList = reactive([
  {
    name: "年",
    dateType: "2",
    type: "year",
    valueFormat: "YYYY",
    getDatePikerformat: "yyyy",
    range: false,
  },
  {
    name: "月",
    dateType: "1",
    type: "month",
    valueFormat: "YYYY-MM",
    getDatePikerformat: "yyyy-MM",
    range: false,
  },
  {
    name: "自定义",
    dateType: "3",
    type: "daterange",
    valueFormat: "YYYY-MM-DD",
    range: true,
  },
]);

const Selected = ref(2);
const data = reactive({
  time: null,
});

const changeSelected = (_index) => {
  Selected.value = _index;
  if (timeTypeList[_index].range) {
    nextTick(() => {
      data.time = getDatePiker(30);
    });
  } else {
    data.time = getDatePiker(30, timeTypeList[_index].getDatePikerformat)[1];
    // console.log(timeTypeList[_index].valueFormat);
  }
};

onMounted(() => {
  data.time = getDatePiker(30);
});

const getTimeParams = () => {
  if (!timeTypeList[Selected.value].range) {
    return {
      dateType: timeTypeList[Selected.value].dateType,
      dateTime: data.time,
    };
  } else {
    if(timeLimits(data.time,'历史记录查询或者导出不能超过30天',30)){
      return false
    }else{
    return {
      dateType: timeTypeList[Selected.value].dateType,
      startTime: data.time[0],
      endTime: data.time[1],
    };
  }
  }
};

defineExpose({
  getTimeParams,
});
</script>

<template>
  <div class="time_change">
    <div
      class="time_type"
      v-for="(item, index) in timeTypeList"
      :key="index"
      :class="Selected === index ? 'time_type_selected' : ''"
      @click="changeSelected(index)"
    >
      {{ item.name }}
    </div>
    <el-form :model="data" class="search-box2">
      <el-form-item
        label="时间范围"
        class="search-input search-input4"
        prop="time"
      >
        <el-date-picker
          v-model="data.time"
          :type="timeTypeList[Selected].type"
          :value-format="timeTypeList[Selected].valueFormat"
          range-separator="至"
          start-placeholder="开始时间"
          end-placeholder="结束时间"
          :unlink-panels="true"
          :clearable="false"
        />
      </el-form-item>
    </el-form>
  </div>
</template>

<style lang="less" scoped>
.time_change {
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .time_type {
    height: 36px;
    line-height: 36px;
    padding: 0 10px;
    background: #ebf0f5;
    border-radius: 4px 4px 4px 4px;
    border: 1px solid #ffffff;
    color: #4279ca;
    cursor: pointer;
  }
  .time_type_selected {
    background: #4279ca;
    color: #ffffff;
  }
  .search-box2 {
    width: 423px;
    height: 36px;
    line-height: 36px;
    :deep(.el-form-item) {
      .el-form-item__label {
        padding-left: 0.57292vw;
        background-color: #dae5f2 !important;
        color: #4279ca;
        font-size: calc(100vw * 16 / 1920);
        height: 2.1875vw;
        text-align: center;
        line-height: 2.1875vw;
        justify-content: flex-start;
      }
      .el-date-editor .el-range-input{
        font-size: calc(100vw * 18 / 1920);
      }
      .el-input__inner{
        font-size: calc(100vw * 18 / 1920);
      }
    }

    .el-form-item {
      width: 100%;
      height: 100%;
      box-sizing: border-box;
      margin: 0;
      border: none;
      line-height: inherit;
      background: #f0f5fa;
      border-radius: 4px 4px 4px 4px;
      border: 1px solid #ffffff;
      :deep(.el-form-item__label) {
        height: 100%;
        border-radius: 4px;
        line-height: inherit;
      }
      :deep(.el-form-item__content) {
        flex: 1;
        
        .el-input {
          height: 100%;
          
        }
        .el-input__wrapper {
          box-shadow: none;
          background: none;
          height: 100%;
        }
      }
    }
  }
}
</style>

四、其它

1.组件默认填充时间,默认填充最近30天;

eg:

getDatePiker(30);

/**
 * 时间选择器默认选中,最近多少天
 */
export const getDatePiker = (dates,dateType='yyyy-MM-dd') => {
    let valueTwoTimer = []
    let newData = new Date();
    let nowMonth = frontOneHour(newData, dateType);
    const front12Hour = new Date(newData - 1000 * 60 * 60 * 24 * (dates-1));;
    let beforeMonth = frontOneHour(front12Hour, dateType);
    valueTwoTimer.push(beforeMonth);
    valueTwoTimer.push(nowMonth);
    return valueTwoTimer
};

 2.不能超过30天数,当不传参的时候默认不超过7天;

eg:

timeLimits(data.time, "历史记录查询或者导出不能超过30天", 30)

// 
const timeRange = 1 * 24 * 60 * 60 * 1000; // 1天时间戳
const timeToTimestamp = (time) => {
    let timestamp = Date.parse(new Date(time).toString());
    return timestamp;
  };
export const timeLimits=(times,message,intervalTime=7)=>{
      const minTime = timeToTimestamp(times[0]);
      const maxTime = timeToTimestamp(times[1]);
      //判断是否超过7天,或者30天。接收传参intervalTime
      const isOver7 = maxTime - minTime > timeRange * intervalTime;
      if (isOver7) {
        //超过7天,进行显示提示信息。并打断,给调用的语句返回一个false
        //外层调用根据返回的“false”,进行打断处理,详见如下写在后面。
        ElMessage({
          type: "warning",
          message: message===undefined?`历史记录查询时间不能超过7天`:message,
        });
        return false;
      }else{
        return true;
      }
}

2.写在最后

外层调用timeLimits()

//暴露此方法
//如果超过30天,返回false;否则返回开始时间和结束时间,以及dateType(接口参数)
const getTimeParams = () => {
  if (!timeTypeList[Selected.value].range) {
    return {
      dateType: timeTypeList[Selected.value].dateType,
      dateTime: data.time,
    };
  } else {
    if (!timeLimits(data.time, "历史记录查询或者导出不能超过30天", 30)) {
      return false;
    } else {
      return {
        dateType: timeTypeList[Selected.value].dateType,
        startTime: data.time[0],
        endTime: data.time[1],
      };
    }
  }
};

defineExpose({
  getTimeParams,
});

五、年月日分别解释

1.选择年,日期选择组件默认填充是:当时的年;

 

 2.选择月,日期选择组件默认填充的是:当时的年月;

 

 3.选择日,日期选择组件默认填充的是:当时的年月日;

默认填充最近30天。

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

Redis监控方案以及相关黄金指标提升稳定性和可靠性

Redis监控方案以及相关黄金指标提升稳定性和可靠性 1. 需要了解的词2. 「基准性能」相关指标2.1 Latency2.2 最大响应延迟2.3 平均响应延迟2.4 OPS(instantaneous_ops_per_sec)2.5 Hit Rate 3. 「内存」相关指标3.1 内存使用量(used_memory)3.2 内存碎片率(mem_fragmentation_r…

商业银行布局AI大模型的“三大路径”

随着人工智能技术的迅猛发展&#xff0c;AI创新应用模式持续涌现&#xff0c;2022年11月OpenAI推出的对话式通用人工智能工具ChatGPT正式上线&#xff0c;标志着人工智能技术的发展迈入了全新阶段。随着ChatGPT的蹿红&#xff0c;一时间&#xff0c;人工智能大模型技术迅速成为…

区块链相关概念

区块链是什么&#xff0c;就算是做计算机技术开发的程序员&#xff0c;100个当中都没有几个能把这个概念理解明白&#xff0c;更不要说讲清楚了。那对于普通人来说&#xff0c;就更扯了。 除了“挖矿”表面意思似乎比较好理解外&#xff0c;其他的基础概念真TMD绕。 去中心化、…

OpenHarmony应用启动流程分析——ApplicationAbility初始化

作者&#xff1a;汪语 一、引言 本文基于OpenAtom OpenHarmony&#xff08;以下简称“OpenHarmony”&#xff09; 4.0 Release版本的源码&#xff0c;对应用进程初始化后MainThread初始化及调用AttachApplication、LaunchApplication、LaunchAbility的过程做了分析和总结&…

HarmonyOS-数据请求(http / axios)

一、http数据请求 步骤&#xff1a; 1.在module.json5中申请ohos.permission.INTERNET权限 "module": {"requestPermissions": [{ "name": "ohos.permission.INTERNET" }],...} 2.在xxx.ets页面中导入&#xff1a;import http fro…

Jenkins结合gitlab自动化持续集成

最近在公司有负责搭建自动化测试环境&#xff0c;自动化脚本写好后&#xff0c;毋庸置疑是需要将自动化脚本进行持续集成测试&#xff0c;能够根据企业的定制化需求&#xff0c;通过Jenkins触发执行构建任务&#xff0c;定时执行自动化脚本等&#xff0c;今天就给大家介绍一下J…

Mybatis一级缓存

一级缓存简介 在常见的应用系统中&#xff0c;数据库是比较珍贵的资源&#xff0c;很容易成为整个系统的瓶颈。在设计和护系统时&#xff0c;会进行多方面的权衡&#xff0c;并且利用多种优化手段&#xff0c;减少对数据库的直接访问。使用缓存是一种比较有效的优化手段&#x…

干货分享 | 在TSMaster中加载基于DotNet平台的SeedKey

在UDS诊断过程中&#xff0c;会涉及到安全访问的问题&#xff0c;也就是所谓的Seed&Key。TSMaster 诊断模块支持通过.dll文件载入 Seed&Key 算法用于安全访问解锁。在最近发布的TSMaster 2024.03版本中不仅支持了C/C&#xff0c;Delphi等语言封装的DLL文件&#xff0c;…

【CVE复现计划】CVE-2024-0195

CVE-2024-0195 简介&#xff1a; SpiderFlow是新一代开源爬虫平台&#xff0c;以图形化方式定义爬虫流程&#xff0c;不写代码即可完成爬虫。基于springbootlayui开发的前后端不分离,也可以进行二次开发。该系统/function/save接口存在RCE漏洞&#xff0c;攻击者可以构造恶意命…

蓝帕控制阀门将莅临2024年第13届生物发酵展

参展企业介绍 感谢你正在或即将使用蓝帕控制阀门(江苏)有限公司系列产品&#xff0c;感谢你关注蓝帕控制阀门(江苏)有限公司&#xff01; 蓝帕控制阀门(江苏)有限公司&#xff0c;流体控制领域的国际品牌之一&#xff0c;总部位于意大利米兰&#xff0c;成立多年以来&#xf…

流式密集视频字幕

流式密集视频字幕 摘要1 IntroductionRelated Work3 Streaming Dense Video Captioning Streaming Dense Video Captioning 摘要 对于一个密集视频字幕生成模型&#xff0c;预测在视频中时间上定位的字幕&#xff0c;理想情况下应该能够处理长的输入视频&#xff0c;预测丰富、…

Rust 标准库 API 文件和文件夹操作 File,读取/创建/修改/追加/删除/重命名文件等

File::create 使用File的关联函数&#xff08;类似Java中的静态方法&#xff09;create&#xff0c;创建文件&#xff0c;如果存在&#xff0c;则覆盖。 use std::fs::{File, Metadata};fn main() -> std::io::Result<()> {let file: File File::create("foo.…

C++ 学习笔记

文章目录 【 字符串相关 】C 输入输出流strcpy_s() 字符串复制输出乱码 【 STL 】各个 STL 支持的常见方法 ? : 运算符switch case 运算符 switch(expression) {case constant-expression :statement(s);break; // 可选的case constant-expression :statement(s);break; //…

基于arcgis /envi PCA(主成分分析)实现过程

基于arcgis /envi PCA(主成分分析)实现过程 1 提取研究范围 2对研究范围进行重采样 &#xff08;根据数据情况进行选做&#xff0c;如数据较大建议进行该步骤操作&#xff09; 3 对研究范围内数据进行归一化处理 4 将空值替换为0 5 对同期不同要素数据进行波段合成 对波段…

如何本地部署JumpServer堡垒机并结合内网穿透实现远程访问

文章目录 前言1. 安装Jump server2. 本地访问jump server3. 安装 cpolar内网穿透软件4. 配置Jump server公网访问地址5. 公网远程访问Jump server6. 固定Jump server公网地址 前言 JumpServer 是广受欢迎的开源堡垒机&#xff0c;是符合 4A 规范的专业运维安全审计系统。JumpS…

云南省气象探空业务升级为北斗探空观测系统

云南省气象探空业务升级为北斗探空观测系统 近日&#xff0c;云南省首套北斗探空观测系统在普洱市思茅区高空气象观测站建成并调试成功&#xff0c;这意味着云南省气象探空业务将从L波段雷达探测升级到北斗探空观测系统。 &#xff08;图片来源于网络&#xff09; 北斗探空观…

距离度量方法——欧氏距离、曼哈顿距离、切比雪夫距离、闵可夫斯基距离

目录 一、 欧氏距离&#xff08;Euclidean Distance&#xff09; 1、简介 2、代码实现 二、曼哈顿距离&#xff08;Manhattan Distance&#xff09; 1、简介 2、代码实现 三、切比雪夫距离&#xff08;Chebyshev Distance&#xff09; 1、简介 2、代码实现 四、闵可夫…

CSS实现热门创作者排行榜(毛玻璃效果)

CSS实现热门创作者排行榜&#xff08;毛玻璃效果&#xff09; 效果展示 CSS 知识点 CSS 基础知识回顾filter 属性运用回顾 整体页面布局实现 <div class"container"><h3>Popular Creator Rank List</h3><!-- 用户列表容器 --><div cl…

基于SpringBoot+Vue的健身教练预约管理系统(源码+文档+部署+讲解)

一.系统概述 私人健身与教练预约管理系统&#xff0c;可以摆脱传统手写记录的管理模式。利用计算机系统&#xff0c;进行用户信息、管理员信息的管理&#xff0c;其中包含首页&#xff0c;个人中心&#xff0c;用户管理&#xff0c;教练管理&#xff0c;健身项目管理&#xff0…

【个人使用推荐】联机不卡顿 小白一键部署 大厂云服务器选购指南 16G低至26 幻兽帕鲁最大更新来袭

更新日期&#xff1a;4月8日&#xff08;半年档 价格回调&#xff0c;京东云采购季持续进行&#xff09; 本文纯原创&#xff0c;侵权必究 《最新对比表》已更新在文章头部—腾讯云文档&#xff0c;文章具有时效性&#xff0c;请以腾讯文档为准&#xff01; 【腾讯文档实时更…