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
可以看下效果图:(结果打印在控制台了)
支付宝智慧前端学习交流群