因为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

可以看下效果图:(结果打印在控制台了)

技术
今日推荐
阅读数 20
阅读数 13
阅读数 10
阅读数 9
友情链接
码工具
Toolsou
API参考文档
云服务器优惠
阿里云优惠券
腾讯云优惠券
华为云优惠券
站点信息
问题反馈
邮箱:ixiaoyang8@qq.com
QQ群:766591547
关注微信