vue H5项目：利用vant ui二次封装的选择月份的日历组件

因为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, #fec208 0%, #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

可以看下效果图：（结果打印在控制台了）

谷歌研发技术团队 高级软件工程师 前端技术博客专家 CSDN技术博主 提供于互联网搜索、云计算、广告技术，开发并提供大量基于互联网的产品与服务，开发线上软件、应用软件，及移动设备的Android操作系统以及操作系统谷歌ChromeOS操作系统的开发。