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

ThridTianFuStreet小貂蝉

已于 2024-01-08 11:26:10 修改

阅读量455

点赞数 6

分类专栏： Vue与ElementUI 文章标签： elementui vue.js

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

本文链接：https://blog.csdn.net/Blues_han/article/details/135402232

版权

Vue与ElementUI 专栏收录该内容

9 篇文章 0 订阅

订阅专栏

一、使用说明

三个示例：选择项** 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){ // 获取到天
      console.log("改变日",timeA)
    },
    timechangeB(timeB){ // 获取到月
       console.log("改变月",timeB)
    },
    timechangeB(timeB){ // 获取到年
       console.log("改变年",timeC)
    }
  }
};
</script>

四、组件代码 timecontrol.vue

<template>
    <div class="timer">
        <i class="icon el-icon-caret-left" @click="timeControl(1)"></i>
        <el-date-picker  
        style="width:80px;"
        prefix-icon="none"
        size="mini" 
        :picker-options="chooseDatePicker(null,2,false)"
        v-model="inputTime"
        :type="dateType" 
        :value-format="format"  
        :format="format"  
        placeholder="请选择日期" 
        @change="timeChange" 
        :clearable="false"/>
        <i v-show="showAdd" class="icon el-icon-caret-right" @click="timeControl(2)"></i>
    </div>
</template>

<script>
import  disabledDate  from "@/mixins/disabledDate";  // 文件位置请参考 文档上面链接【时间禁用mixins】
export default {
    name:"timecontrol",
    mixins:[disabledDate],
    props:{
        time:{
            type:String,
            default:()=>{
               return this.$dayjs(new Date(Date.now())).format("YYYY-MM-DD");
            }
        },
        type:{
            type:String,
            default:'day'
        }
    },
    data(){
        return{
            inputTime:""
        }
    },
    watch:{
        time(newValue){
            this.inputTime = newValue;
        }
    },
    mounted(){
        this.inputTime = this.time;
    },
    // 是否展示加号：需要用计算属性来计算
    computed:{
        dateType(){
            switch(this.type){
                case "day": return 'date';
                case "month": return 'month';
                case "year": return 'year';
            }
        },
        showAdd(){ 
            if(this.type=="day"){ // 天：大于昨天不显示加号
                let yesterdayEnd = this.$dayjs().subtract(2,"day").format("YYYY-MM-DD 23:59:59")
                return this.$dayjs(this.time) < this.$dayjs(yesterdayEnd);
            }else  if(this.type=="month"){ // 可选当前月
                let timeMonth = this.$dayjs(this.time).format("YYYY-MM");
                let thisMonthEnd = this.$dayjs().format("YYYY-MM")
                return this.$dayjs(timeMonth) < this.$dayjs(thisMonthEnd);
            }else if(this.type=="year"){
                let timeYear = this.$dayjs(this.time).format("YYYY");
                let thisYearEnd = this.$dayjs().format("YYYY")
                return this.$dayjs(timeYear) < this.$dayjs(thisYearEnd);
            }
        },
        format(){
            switch(this.type){
                case "day": return 'yyyy-MM-dd';
                case "month": return 'yyyy-MM';
                case "year": return 'yyyy';
            }
        }
    },
    methods:{
        // 减- 加  限制超过今天  1减 2 加
        timeControl(type){
            let time;
            if(this.type == 'day'){
                let num = type == 1? -86400000: 86400000; // 判断 + -
                let curTimeStr = new Date(this.time); // 选中时间
                let fixedNum = new Date(curTimeStr).getTime() + num; // 加减计算结果
                time = this.$dayjs(fixedNum).format("YYYY-MM-DD");
            }else if(this.type == 'month'){
                let added = this.$dayjs(new Date(this.time)).add(1,'month');
                let subtracted = this.$dayjs(new Date(this.time)).subtract(1,'month');
                time = type == 1?this.$dayjs(subtracted).format("YYYY-MM"):this.$dayjs(added).format("YYYY-MM");
            }else if(this.type == 'year'){
                let added = this.$dayjs(new Date(this.time)).add(1,'year');
                let subtracted = this.$dayjs(new Date(this.time)).subtract(1,'year');
                time = type == 1?this.$dayjs(subtracted).format("YYYY"):this.$dayjs(added).format("YYYY");
            }
            this.inputTime = time;
            this.$emit("timechange",time);
        },
        // 自己不用选了
        timeChange(time){ 
            this.inputTime = time;
            this.$emit("timechange",time);
        },
    }
}
</script>

<style lang="scss" scoped>
.timer{
  display:flex;
  align-items: center;
padding-bottom: 2px;
width: 100%;
  i{
    font-size: 28px;
    line-height: 28px;
    color:#7C8295;
    cursor: pointer;
  }
}
/deep/.el-input__inner{
    padding:5px;
    text-align: center;
}
</style>