©2020-2024 ioDraw All rights reserved
因为vant里面只有选择天数的日历没有选择月份的，所以我自己又封装了一个组件。
上代码：
这是封装的子组件：
<template> <div> <div @click="showPopup"> {{ yesr }}-<span v-show="actived <
10 ? true : false">0</span >{{ actived }} </div> <van-popup v-model="show"
position="top" :style="{ height: '50%' }" @click-overlay="close" > <main> <!--
选择年--> <div class="yesr"> <van-icon name="arrow-left" @click="last" /> <span >{{
yesr}}年<span v-show="actived < 10 ? true : false">0</span >{{ actived }}月</span
> <van-icon name="arrow" @click="next" /> </div> <section> <div> <span v-for=
"(item, index) in 12" :key="index" :class="actived === item ? 'spanBGd' : false"
@click="spanmouth(item)" > {{ item }}月 </span> </div> </section> <footer> </
footer> </main> <div class="button" @click="button">确定</div> </van-popup> </div>
</template> <script> import Vue from "vue"; import { Icon } from "vant"; import
{ Popup } from "vant"; Vue.use(Icon); Vue.use(Popup); export default { data() {
return { yesr: 1970, //年 actived: 1, //月 show: false }; }, mounted() { // 设置默认年份
var date = new Date(); this.yesr = date.getFullYear(); this.actived = date.
getMonth() + 1; }, methods: { // 上一年 last() { this.yesr = this.yesr - 1; }, //
下一年 next() { this.yesr = this.yesr + 1; }, //选择月份 spanmouth(item) { this.actived
= item; }, //弹出层 showPopup() { this.show = true; }, //关闭弹出层 close() { // 设置默认年份
var date = new Date(); this.yesr = date.getFullYear(); this.actived = date.
getMonth() + 1; }, //确定 button() { this.show = false; var Datenum=`${this.yesr}
${this.actived}` this.$emit('datebutton',Datenum) console.log(Datenum); } } }; <
/script> <style scoped> main > .yesr { display: flex; justify-content: space-
around; align-items: center; height: 50px; width: 100%; background: #ffc02e; }
section{ width: 100%; height: 150px; display: flex; justify-content: center;
align-items: center; border-bottom: 1px solid rgb(207, 205, 205); } section >
div{ width: 74%; height: 100px; display: flex; justify-content: space-between;
align-items: center; flex-wrap: wrap; } section > div > span { width: 40px;
height: 40px; line-height: 40px; text-align: center; } .spanBGd { background:
#ffc02e; color: #fff; border-radius: 10px; } .button { width: 80%; height: 50px;
margin: 20px auto; line-height: 50px; background: linear-gradient(270deg,
#fec2080%, #ffd337 100%); outline: none; border-radius: 2px; text-align: center;
} </style>
父组件调用：
导入
import datecomponent from "@/views/achievement/components/date.vue";
注册
components: { datecomponent },
标签及事件：
<datecomponent @datebutton="datebutton" /> methods：{ datebutton(Datenum) {
console.log(Datenum) }, }
组件通过this.$emit('datebutton',Datenum)把参数传过去。
最终得到的时间格式：如202011
可以看下效果图：（结果打印在控制台了）