vue vant Calendar日历定制

calendar文档

<template>
...<Calendar :min-date="start" :max-date="end":title="null" :show-mark="false" :show-subtitle="false" :show-confirm="false" :show-title="true":poppable="false" :round="false"  ><template v-slot:title><div style="background-color: red;height: 100%;display: flex;align-items: center;justify-content: center;"><span @click="preMonth" style="margin-right: 10px">上一月</span>{{dateStr}}<span @click="NextMonth" style="margin-left: 10px">下一月</span></div></template></Calendar>
...
</template>
<script>import { Calendar } from 'vant';export default {components: {Calendar},data(){return{...dateStr:new Date().getFullYear()+"-"+(new Date().getMonth()+1),start:new Date(new Date().getFullYear(), new Date().getMonth(),1),end:new Date(new Date().getFullYear(), new Date().getMonth(),31),...}},methods:{...NextMonth(){console.log("NextMonth")// start:new Date(new Date().getFullYear(), new Date().getMonth(),1),//   end:new Date(new Date().getFullYear(), new Date().getMonth(),31),let start =  this.startlet end =  this.endthis.start = new Date(start.getFullYear(), start.getMonth()+1,1)this.end = new Date(end.getFullYear(), end.getMonth()+1,new Date(start.getFullYear(), start.getMonth()+1,0).getDate())this.dateStr = this.start.getFullYear()+"-"+(this.start.getMonth()+1)},preMonth(){console.log("preMonth")let start =  this.startlet end =  this.endthis.start = new Date(start.getFullYear(), start.getMonth()-1,1)this.end = new Date(end.getFullYear(), end.getMonth()-1,new Date(start.getFullYear(), start.getMonth()-1,0).getDate())this.dateStr = this.start.getFullYear()+"-"+(this.start.getMonth()+1)},}}
</script><style lang="less" scoped>
...
/deep/.van-calendar__month-title{display: none;
}
</style>

效果如图:在这里插入图片描述

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

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

NextJs下浅尝Prisma+Sqlite+逆向生成数据模型

1.安装prisma npm install prisma/client 2.创建schema.prisma npx prisma init 执行完命令后创建文件目录如下&#xff1a; 3.配置数据库连接 generator client {provider "prisma-client-js" }datasource db {provider "sqlite" //数据库类型 这…

大模型入局传统算法,LLMZip基于LLaMA-7B实现1MB文本压缩率90%!

论文链接&#xff1a; https://arxiv.org/abs/2306.04050 随着以ChatGPT、GPT-4为代表的AI大模型逐渐爆火进入公众视野&#xff0c;各行各业都开始思考如何更好的使用和发展自己的大模型&#xff0c;有一些评论甚至认为大模型是以人工智能为标志的第四次产业革命的核心竞争产品…

使用java生成mvt切片的方法

如何使用java生成geoserver的矢量切片供前端&#xff08;mapbox等&#xff09;调用 目录新的想法Java能为切片做什么引入依赖如何转换xyz数据如何查询如何输出mvt格式给前端前端如何调用 目录 好久没发博客了&#xff0c;每日或忙碌、或悠闲、或喜或悲、时怅时朗&#xff0c;或…

如何使用SQL语句创建触发器

&#x1f388;个人主页:&#x1f388; :✨✨✨初阶牛✨✨✨ &#x1f43b;推荐专栏1: &#x1f354;&#x1f35f;&#x1f32f;C语言初阶 &#x1f43b;推荐专栏2: &#x1f354;&#x1f35f;&#x1f32f;C语言进阶 &#x1f511;个人信条: &#x1f335;知行合一 &#x1f…

Spark SQL生产优化经验--任务参数配置模版

大表扫描 特殊case说明&#xff1a;当任务存在扫event_log表时需注意&#xff0c;若对event_log表进行了过滤&#xff0c;且过滤比很高&#xff0c;如下图的case&#xff0c;input为74T&#xff0c;但shuffle write仅为3.5G&#xff0c;那么建议提高单partition的读取数据量&a…

接口测试之测试原则、测试用例、测试流程......

一、接口的介绍 软件测试中&#xff0c;常说的接口有两种&#xff1a;图形用户接口&#xff08;GUI&#xff0c;人与程序的接口&#xff09;、应用程序编程接口&#xff08;API&#xff09;。 接口&#xff08;API&#xff09;是系统与系统之间&#xff0c;模块与模块之间或者…

elasticsearch学习篇:初识ES

一、什么是ES 1、基础概念 是一款非常强大的开源搜索引擎&#xff0c;具备非常多强大功能&#xff0c;可以帮助我们从海量数据中快速找到需要的内容es是elastic stack(ELK)的核心&#xff0c;负责存储、搜索、分析数据。 ELK包括以下内容&#xff1a; ELK被广泛应用在日志数据…

【Web3】认识元宇宙

元宇宙在Web3中扮演着重要的角色&#xff0c;可以带来许多创新和变革。Web3是下一代互联网的概念&#xff0c;强调去中心化、区块链技术和加密货币的应用。 元宇宙在Web3中的几个作用&#xff1a; 去中心化的虚拟世界&#xff1a;元宇宙通过使用区块链技术和去中心化的网络结构…

【MySQL事务】保证数据完整性的利器

1、事务的认识 事务&#xff1a;事务就是将多个SQL给打包在一起&#xff0c;组成一个整体。组成这个整体的各个SQL&#xff0c;要么全部成功&#xff0c;要么全部失败。 举例说明&#xff1a; 情人节到了&#xff0c;滑稽老铁打算给他女朋友小美发给红包&#xff0c;但是他又害…

QWebEngine应用---执行javascript

我们都知道现代前端技术是基于html、css和javascript进行显示交互的&#xff0c;其中html和css属于静态界面显示&#xff0c;辅以javascript使页面交互更丰富。浏览器作为前端页面显示的基石&#xff0c;提供一套显示、交互、调试的东西。QWebEngine同样也提供了这些功能&#…

spring如何使用junit进行测试

第一步maven的pom.xml引入坐标&#xff1a; <dependency><groupId>junit</groupId><artifactId>junit</artifactId><version>4.11</version></dependency> 第二步编写测试方法&#xff1a; 第三步 定义scope类型

ARM实验-ARM主程序调用ARM/C语言子程序

一、实验名称&#xff1a;ARM主程序调用ARM/C语言子程序 二、实验目的&#xff1a; 了解ARM应用程序框架。了解ARM汇编程序函数和C语言程序函数相互调用时&#xff0c;遵循的ATPCS标准&#xff1b;了解和掌握ARM汇编程序调用C语言程序函数的基本方法&#xff1b;了解和掌握AR…