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

2024-08-23 10:52

本文主要是介绍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 组件中事件选择器的一些小用法的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!


原文地址:
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.chinasem.cn/article/1099176

相关文章

mapstruct中的@Mapper注解的基本用法

《mapstruct中的@Mapper注解的基本用法》在MapStruct中,@Mapper注解是核心注解之一,用于标记一个接口或抽象类为MapStruct的映射器(Mapper),本文给大家介绍ma... 目录1. 基本用法2. 常用属性3. 高级用法4. 注意事项5. 总结6. 编译异常处理在MapSt

java中long的一些常见用法

《java中long的一些常见用法》在Java中,long是一种基本数据类型,用于表示长整型数值,接下来通过本文给大家介绍java中long的一些常见用法,感兴趣的朋友一起看看吧... 在Java中,long是一种基本数据类型,用于表示长整型数值。它的取值范围比int更大,从-922337203685477

MyBatis ResultMap 的基本用法示例详解

《MyBatisResultMap的基本用法示例详解》在MyBatis中,resultMap用于定义数据库查询结果到Java对象属性的映射关系,本文给大家介绍MyBatisResultMap的基本... 目录MyBATis 中的 resultMap1. resultMap 的基本语法2. 简单的 resul

Python主动抛出异常的各种用法和场景分析

《Python主动抛出异常的各种用法和场景分析》在Python中,我们不仅可以捕获和处理异常,还可以主动抛出异常,也就是以类的方式自定义错误的类型和提示信息,这在编程中非常有用,下面我将详细解释主动抛... 目录一、为什么要主动抛出异常?二、基本语法:raise关键字基本示例三、raise的多种用法1. 抛

java中Optional的核心用法和最佳实践

《java中Optional的核心用法和最佳实践》Java8中Optional用于处理可能为null的值,减少空指针异常,:本文主要介绍java中Optional核心用法和最佳实践的相关资料,文中... 目录前言1. 创建 Optional 对象1.1 常规创建方式2. 访问 Optional 中的值2.1

Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析

《Spring组件实例化扩展点之InstantiationAwareBeanPostProcessor使用场景解析》InstantiationAwareBeanPostProcessor是Spring... 目录一、什么是InstantiationAwareBeanPostProcessor?二、核心方法解

git stash命令基本用法详解

《gitstash命令基本用法详解》gitstash是Git中一个非常有用的命令,它可以临时保存当前工作区的修改,让你可以切换到其他分支或者处理其他任务,而不需要提交这些还未完成的修改,这篇文章主要... 目录一、基本用法1. 保存当前修改(包括暂存区和工作区的内容)2. 查看保存了哪些 stash3. 恢

Python struct.unpack() 用法及常见错误详解

《Pythonstruct.unpack()用法及常见错误详解》struct.unpack()是Python中用于将二进制数据(字节序列)解析为Python数据类型的函数,通常与struct.pa... 目录一、函数语法二、格式字符串详解三、使用示例示例 1:解析整数和浮点数示例 2:解析字符串示例 3:解

C++/类与对象/默认成员函数@构造函数的用法

《C++/类与对象/默认成员函数@构造函数的用法》:本文主要介绍C++/类与对象/默认成员函数@构造函数的用法,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录名词概念默认成员函数构造函数概念函数特征显示构造函数隐式构造函数总结名词概念默认构造函数:不用传参就可以

C++ RabbitMq消息队列组件详解

《C++RabbitMq消息队列组件详解》:本文主要介绍C++RabbitMq消息队列组件的相关知识,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录1. RabbitMq介绍2. 安装RabbitMQ3. 安装 RabbitMQ 的 C++客户端库4. A