vue3封装日期时间组件,默认数据当天

使用dayjs,不懂的可以看一下
vue3使用dayjs以及dayjs日期工具类https://blog.csdn.net/weixin_45128657/article/details/136388537?spm=1001.2014.3001.5502

创建一个datePicker.vue组件

<template>
  <el-date-picker v-model="state.dateTime" type="datetimerange" value-format="x" :range-separator="'至'"
  style="width:355px;margin-right:5px;" :start-placeholder="'开始时间'"  :end-placeholder="'结束时间'" @change="timeChange"/>
  <el-button type="primary" @click="currentDayClick">今日</el-button>
  <el-button type="primary" @click="yesterdayClick">昨日</el-button>
  <el-button type="primary" @click="lastDayClick">上一日</el-button>
  <el-button type="primary" @click="nextDayClick">下一日</el-button>
  <el-button type="primary" @click="currentMonthClick">当月</el-button>
</template>
<script lang="ts" setup>
import dayjs from "dayjs"
const props = defineProps({
// 当天
datePicker: {
  type: Array as any,
  default: () => [],
},
})
const emit = defineEmits(['emitChange'])
const state = reactive({
  dateTime: props.datePicker
})
// 今日
const currentDayClick = ()=>{
  state.dateTime = []
  emit('emitChange',state.dateTime)
}
// 昨日
const yesterdayClick = ()=>{
  state.dateTime =[
    dayjs().add(-1, 'day').startOf('day').valueOf(),
    dayjs().add(-1, 'day').endOf('day').valueOf()
  ]
  emit('emitChange',state.dateTime)
}
// 上一日
const lastDayClick = ()=>{
  state.dateTime =[
    dayjs(state.dateTime[0]).add(-1, 'day').startOf('day').valueOf(),
    dayjs(state.dateTime[0]).add(-1, 'day').endOf('day').valueOf()
  ]
  emit('emitChange',state.dateTime)
}
// 下一日
const nextDayClick = ()=>{
  state.dateTime =[
    dayjs(state.dateTime[1]).add(1, 'day').startOf('day').valueOf(),
    dayjs(state.dateTime[1]).add(1, 'day').endOf('day').valueOf()
  ]
  emit('emitChange',state.dateTime)
}
// 当月
const currentMonthClick = ()=>{
  state.dateTime = [
    dayjs().startOf('month').valueOf(),
    dayjs().endOf('month').valueOf()
  ]
  emit('emitChange',state.dateTime)
}
const timeChange = ()=>{
  emit('emitChange',state.dateTime)
}
</script>

创建一个页面使用

<template>
  <div class="my-layoutM20">
    <el-card shadow="never" :body-style="{ paddingBottom: '10px' }">
      <span class="fl" style="marginRight:10px">
        <DatePicker :datePicker="state.datePicker" @emitChange="emitChange"/>
      </span>
      <el-button size="default" type="primary" @click="onQuery()">查询 </el-button>
    </el-card>
  </div>
</template>
<script lang="ts" setup>
import dayjs from 'dayjs'
const DatePicker = defineAsyncComponent(() => import('/@/components/search/datePicker.vue'))
const state:any = reactive({
  datePicker:[
    dayjs(new Date()).startOf('day').valueOf(),
    dayjs(new Date()).endOf('day').valueOf()
  ],
})
// 时间日期change
const emitChange = (arr:any)=>{
  state.datePicker = arr
}
const onQuery = () => {
  console.log('日期:',state.datePicker)
}
</script>

效果图

在这里插入图片描述

  • 4
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
以下是一个基本的Vue3封装button组件的示例: ```vue <template> <button v-bind="$attrs" class="btn" :class="btnClass" @click="handleClick"> <slot></slot> </button> </template> <script> export default { name: 'MyButton', props: { type: { type: String, default: 'default' }, disabled: Boolean, size: { type: String, default: 'medium' } }, computed: { btnClass() { return [ `btn-${this.type}`, `btn-${this.size}`, { 'is-disabled': this.disabled } ] } }, methods: { handleClick(event) { if (this.disabled) { event.preventDefault() return false } this.$emit('click', event) } } } </script> <style> .btn { display: inline-block; padding: 0.5rem 1rem; font-size: 1rem; line-height: 1.5; border-radius: 0.25rem; text-align: center; white-space: nowrap; vertical-align: middle; cursor: pointer; user-select: none; transition: all 0.3s ease; border: 1px solid #ccc; } .btn-default { color: #333; background-color: #fff; } .btn-primary { color: #fff; background-color: #007bff; border-color: #007bff; } .btn-secondary { color: #fff; background-color: #6c757d; border-color: #6c757d; } .btn-success { color: #fff; background-color: #28a745; border-color: #28a745; } .btn-warning { color: #fff; background-color: #ffc107; border-color: #ffc107; } .btn-danger { color: #fff; background-color: #dc3545; border-color: #dc3545; } .btn-link { color: #007bff; background-color: transparent; border-color: transparent; } .btn-sm { padding: 0.25rem 0.5rem; font-size: 0.875rem; line-height: 1.5; border-radius: 0.2rem; } .btn-lg { padding: 0.75rem 1.5rem; font-size: 1.25rem; line-height: 1.5; border-radius: 0.3rem; } .is-disabled { opacity: 0.65; cursor: not-allowed; } </style> ``` 该组件定义了三个属性:`type`、`disabled`和`size`,用于设置按钮的类型、禁用状态和大小。组件使用了Vue3的`$attrs`特性,以便将所有传递给组件的属性绑定到实际的button元素上。 组件还使用了插槽,以便在按钮中插入自定义内容。在模板中,使用了计算属性`btnClass`,动态设置按钮的class属性,该属性根据属性`type`、`size`和`disabled`的值进行计算。 组件的方法中,使用了`$emit`方法,以便在点击按钮时触发`click`事件,并将事件对象传递给父组件。如果按钮处于禁用状态,该方法将阻止默认行为并返回false。

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值