封装一个Element-UI时间切换组件【箭头加减切换天】【月】【年】

原创

已于 2024-01-08 11:26:10 修改 · 949 阅读

收录于

当前文章被以下社区和专栏收录：

于 2024-01-05 10:30:57 首次发布

一、使用说明

三个示例：选择项** year、month、day**
在这里插入图片描述

三个示例：配置不同组件参数即可在这里插入图片描述

1、安装dayjs、element-ui
2、需要用到时间禁用mixins：链接: 超强element时间禁用mixins.js

二、功能

箭头加减天、箭头加减月、箭头加减年。
时间组件的基本时间选择
不支持未来时间选择（需要自行修改，很简单的）。

2.1 示例图天（截图时间2024-01-05）

点击一下左箭头效果
在这里插入图片描述

2.2 示例图月（截图时间2024-01-05）

点击一下左箭头效果
在这里插入图片描述

2.3 示例图年截图时间2024-01-08）

【年是后面新增功能直接改属性用即可】
在这里插入图片描述

三、父页面使用组件 home.vue

<template>
  <div >
  	<h1>选择天示例</h1>
  	<timecontrol :time="timeA" @timechange="timechangeA" type="day"/>
  	<h1>选择月示例</h1>
  	<timecontrol :time="timeB" @timechange="timechangeB" type="month"/>
  	<h1>选择年示例</h1>
  	<timecontrol :time="timeC" @timechange="timechangeC" type="year"/>
  </div>
</template>
<script>
import  timecontrol  from "@/components/timeControl/index.vue";
export default {
   
   
  components:{
   
    timecontrol  },
  data () {
   
   
    return {
   
   
     	timeA:"", // 日期
        timeB:"", // 月
        timeC:"", // 年
    };
  },
  created(){
   
   
  	 // 初始化时间传入【dayjs请到main.js全局挂载】
     this.timeA = this.$dayjs(new Date(Date.now() - 8.64e7)).format("YYYY-MM-DD");
     this.timeB = this.$dayjs().format("YYYY-MM");
     this.timeC = this.$dayjs().format("YYYY");
   },
  methods: {
   
   
    timechangeA(timeA