vant calendar 组件增加时间清除功能

最新推荐文章于 2024-12-16 13:47:36 发布

jings_1171

最新推荐文章于 2024-12-16 13:47:36 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript

本文链接：https://blog.csdn.net/qq_35001542/article/details/128618807

文章介绍了如何在Vue组件中利用footer插槽添加清除和确认功能。通过绑定点击事件，实现了时间的重置和设置初始数据。同时，详细展示了van-button和van-calendar组件的用法，包括日期选择范围的确认和格式化，以及监听showCalendar变化来滚动到当前时间。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用footer插槽进行清除功能添加

<template slot="footer">
            <div class="btns">
              <van-button @click="clearTimeAll" type="danger" class="cancel-btn"
                >清除时间</van-button
              >
              <van-button
                @click="onConfirmAll"
                type="primary"
                class="order-btn-order"
                :disabled="isCanConfirm"
                >确认</van-button
              >
            </div>

清除功能添加事件对默认时间重置及设置初始数据

clearTimeAll () {
      this.startTime = '开始时间'
      this.endTime = '结束时间'
      this.earlyDate = undefined
      this.lateDate = undefined
      this.selectDate = []
      this.$refs.alltime.defaultDate = null
      this.$refs.alltime.reset()

    },

确认功能调整

 <van-calendar
          v-model="showCalendar"
          ref="alltime"
          type="range"
          allow-same-day
          :min-date="minDate"
          :max-date="maxDate"
          color="#1989fa"
          :default-date="null"
          @confirm="onConfirm"
          @select="select"
          :show-confirm="false"
        >

// 日期取值
    onConfirm (val) {
      console.log('val', val);
      let [startTime, endTime] = val
      this.startTime = moment(startTime).format('YYYY-MM-DD')
      this.endTime = moment(endTime).format('YYYY-MM-DD')
    },
// 确认
    onConfirmAll () {
      this.showCalendar = false;
      this.$emit('confirm', this.unit, this.projectId, this.objectId, params)
    },

取消默认时间，并滚动到当前时间位置

watch: {
    showCalendar (val) {
      if (val) {
        this.$refs.alltime.scrollToDate(new Date())
      }

    },