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>

 

这篇关于vant 组件中事件选择器的一些小用法的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---