最终实现效果:
具体实现方法:
子组件完整代码:
<template>
<div>
<div @click="showPopup">
{{ yesr }}-<span v-show="actived < 10 ? true : false">0</span
>{{ actived }}
</div>
<van-popup
v-model="show"
position="bottom"
@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>
</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)
}
}
};
</script>
<style scoped>
main > .yesr {
display: flex;
justify-content: space-around;
align-items: center;
height: 50px;
width: 100%;
background: #eee;
}
section {
width: 100%;
height: 150px;
display: flex;
justify-content: center;
align-items: center;
}
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: #1989fa;
color: #fff;
border-radius: 10px;
}
.button {
width: 80%;
height: 40px;
margin: 10px auto;
line-height: 40px;
background: linear-gradient(270deg, #1989fa 0%, #1989fa 100%);
outline: none;
border-radius: 50px;
text-align: center;
color: #fff;
}
::v-deep .van-popup{
border-radius: 10px 10px 0 0;
}
</style>
父组件调用
<template>
<SelectMonth @datebutton="datebutton"></SelectMonth>
</template>
<script>
import SelectMonth from "@/views/components/selectMonth";
export default {
components:{
SelectMonth
},
methods:{
datebutton(e) {
console.log(e)
},
}
}
</script>