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

本文主要是介绍vant 组件中事件选择器的一些小用法，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

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

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开始的，所以加1const 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开始的，所以加1const day = today.getDate().toString().padStart(2, "0");return `${year}年${month}月${day}日`;},},

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

举个简单的小例子

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

<template>
<van-popupv-model="dateShow"position="bottom"round:style="{ height: '52%' }"><div class="day_box"><div class="customize_text">自定义</div><imgsrc="../../assets/information/close.png"alt=""class="close-icon"@click="onClose"/></div><div class="date_Range"><divclass="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><divclass="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-pickerref="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开始的，所以加1const 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开始的，所以加1const 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开始的，所以加1const day = date.getDate().toString().padStart(2, "0");return `${year}年${month}月${day}日`;},onCustomShow() {this.dateShow = true;},},
};
</script>