vant 组件中事件选择器的一些小用法

最新推荐文章于 2024-09-13 17:51:57 发布

丝丝不是土豆丝

最新推荐文章于 2024-09-13 17:51:57 发布

阅读量309

点赞数 1

文章标签： javascript 前端开发语言

本文链接：https://blog.csdn.net/m0_73035846/article/details/141433146

版权

获取当前所在的月份的月初和当天的日期

computed: {
    // 默然展示月初的第一天
    formattedFirstDayOfMonth() {
      const now = new Date();
      const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
      const year = firstDayOfMonth.getFullYear();
      const month = (firstDayOfMonth.getMonth() + 1)
        .toString()
        .padStart(2, "0"); // 月份是从0开始的，所以加1
      const day = firstDayOfMonth.getDate().toString().padStart(2, "0");
      return `${year}年${month}月${day}日`;
    },
    //默认展示今天
    formattedToday() {
      const today = new Date();
      const year = today.getFullYear();
      const month = (today.getMonth() + 1).toString().padStart(2, "0"); // 月份是从0开始的，所以加1
      const day = today.getDate().toString().padStart(2, "0");
      return `${year}年${month}月${day}日`;
    },
  },

我们在写页面的时候经常会遇到事件的选择器象我做H5 的时候，我经常用的组件库就是vant 组件库

举个简单的小例子

就是下面的日期变化时上面框里面的日期也要跟着改变然后点击的时候选择一个区间的范围

<template>
<van-popup
      v-model="dateShow"
      position="bottom"
      round
      :style="{ height: '52%' }"
    >
      <div class="day_box">
        <div class="customize_text">自定义</div>
        <img
          src="../../assets/information/close.png"
          alt=""
          class="close-icon"
          @click="onClose"
        />
      </div>
      <div class="date_Range">
        <div
          class="date_Range_left"
          @click="onClickday(0)"
          :class="{ date_Range_right: currentday == 0 }"
        >
          <div v-if="firstFormatValue == null">
            {{ formattedFirstDayOfMonth }}
          </div>
          <div v-else>{{ firstFormatValue }}</div>
        </div>
        <div class="date_Range_line"></div>
        <div
          class="date_Range_left"
          @click="onClickday(1)"
          :class="{ date_Range_right: currentday == 1 }"
        >
          <div v-if="currentFormatValue == null">{{ formattedToday }}</div>
          <div v-else>{{ currentFormatValue }}</div>
        </div>
      </div>
      <div class="date-currentDate-box">
        <van-datetime-picker
          ref="datetimePicker"
          v-model="currentDate"
          type="date"
          title="选择年月日"
          :min-date="minDate"
          :max-date="maxDate"
          :visible-item-count="3"
          @change="handleChange"
        />
        <div class="btn" @click.stop="onConfirm">确认</div>
      </div>
    </van-popup>


</template>

<script>
export default {
  data() {
    return {
  
      dateShow: false,
      minDate: new Date(2020, 0, 1),
      maxDate: new Date(),
      currentDate: new Date(),
      formattedDate: "", //日期
      currentday: 1,
      firstFormatValue: null,
      currentFormatValue: null,
      addFormatValue: "",
    };
  },
  computed: {
    // 默然展示月初的第一天
    formattedFirstDayOfMonth() {
      const now = new Date();
      const firstDayOfMonth = new Date(now.getFullYear(), now.getMonth(), 1);
      const year = firstDayOfMonth.getFullYear();
      const month = (firstDayOfMonth.getMonth() + 1)
        .toString()
        .padStart(2, "0"); // 月份是从0开始的，所以加1
      const day = firstDayOfMonth.getDate().toString().padStart(2, "0");
      return `${year}年${month}月${day}日`;
    },
    //默认展示今天
    formattedToday() {
      const today = new Date();
      const year = today.getFullYear();
      const month = (today.getMonth() + 1).toString().padStart(2, "0"); // 月份是从0开始的，所以加1
      const day = today.getDate().toString().padStart(2, "0");
      return `${year}年${month}月${day}日`;
    },
  },
  methods: {
    handleChange(pickerInstance) {
      if (this.currentday == 0) {
        this.firstFormatValue =
          pickerInstance.getValues()[0] +
          "年" +
          pickerInstance.getValues()[1] +
          "月" +
          pickerInstance.getValues()[2] +
          "日";
      } else if (this.currentday == 1) {
        this.currentFormatValue =
          pickerInstance.getValues()[0] +
          "年" +
          pickerInstance.getValues()[1] +
          "月" +
          pickerInstance.getValues()[2] +
          "日";
      }
    },
    onConfirm() {
      // const selectedDate = this.$refs.datetimePicker.value;
      // this.formattedDate = `${this.firstFormatValue}-${this.currentFormatValue}`;
      // this.addFormatValue = this.formatDate(selectedDate);
      // console.log(this.addFormatValue);
      // this.dateShow = false;
      const selectedDate = this.$refs.datetimePicker.value;
      // 新增判断
      if (this.firstFormatValue === null || this.currentFormatValue === null) {
        this.addFormatValue = `${this.formattedFirstDayOfMonth}-${this.formattedToday}`;
        console.log(this.addFormatValue);
      } else {
        this.formattedDate = `${this.firstFormatValue}-${this.currentFormatValue}`;
      }

      this.dateShow = false;
    },
    formatDate(date) {
      const year = date.getFullYear();
      const month = (date.getMonth() + 1).toString().padStart(2, "0"); // 月份是从0开始的，所以加1
      const day = date.getDate().toString().padStart(2, "0");
      return `${year}年${month}月${day}日`;
    },
    onCustomShow() {
      this.dateShow = true;
    },
   
  },
};
</script>