122 lines
2.6 KiB
Vue
122 lines
2.6 KiB
Vue
<template>
|
|
<u-popup :show="MonthDayShow" :round="10" mode="bottom" closeOnClickOverlay @close="cancel">
|
|
<view style="width: 100%;height: 500rpx;">
|
|
<view class="btn">
|
|
<view class="cancel" @click="cancel">
|
|
取消
|
|
</view>
|
|
<view class="confirm" @click="confirm">
|
|
确认
|
|
</view>
|
|
</view>
|
|
<picker-view :indicator-style="indicatorStyle" :value="value" class="picker-view"
|
|
@change="bindChange">
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in months" :key="index">{{item}}月</view>
|
|
</picker-view-column>
|
|
<picker-view-column>
|
|
<view class="item" v-for="(item,index) in days" :key="index">{{item}}日</view>
|
|
</picker-view-column>
|
|
</picker-view>
|
|
</view>
|
|
</u-popup>
|
|
</template>
|
|
|
|
<script>
|
|
function repair(t){
|
|
if(t <= 9){
|
|
return `0${t}`
|
|
}else{
|
|
return t
|
|
}
|
|
|
|
}
|
|
export default {
|
|
name: "Month-Day-picker",
|
|
props:{
|
|
show:{
|
|
type:Boolean,
|
|
default:false,
|
|
}
|
|
},
|
|
data() {
|
|
// 当前月
|
|
const month = new Date().getMonth() + 1;
|
|
// 当前月的数组
|
|
const months = [];
|
|
// 当前月一共几天
|
|
const day = new Date(new Date().getFullYear(), new Date().getMonth() + 1, 0).getDate();
|
|
// 当前月每一天的数组
|
|
const days = [];
|
|
// 当天月的当前天
|
|
let cday = new Date().getDate();
|
|
for (let i = 1; i <= 12; i++) {
|
|
months.push(i)
|
|
}
|
|
for (let i = 1; i <= day; i++) {
|
|
days.push(i)
|
|
}
|
|
return {
|
|
month,
|
|
cday,
|
|
months,
|
|
days,
|
|
indicatorStyle: `height: 50px;`,
|
|
value:[month-1,cday-1],
|
|
valuelist:[month,cday]
|
|
};
|
|
},
|
|
computed:{
|
|
MonthDayShow(){
|
|
return this['show']
|
|
}
|
|
},
|
|
methods:{
|
|
// 取消点击事件
|
|
cancel(){
|
|
this.$emit('cancel')
|
|
},
|
|
// 确认点击事件
|
|
confirm(){
|
|
this['valuelist'] = [new Date().getFullYear(),repair(this['value'][0]+1),repair(this['value'][1]+1)];
|
|
this.$emit('confirm',this['valuelist'])
|
|
},
|
|
// 月日选择器值改变
|
|
bindChange(value){
|
|
this['value'] = [value['detail']['value'][0],value['detail']['value'][1]];
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss">
|
|
.btn {
|
|
height: 100rpx;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
font-size: 24rpx;
|
|
padding: 0 32rpx;
|
|
.cancel,.confirm{
|
|
padding: 32rpx;
|
|
}
|
|
.confirm {
|
|
color: #FF4F04;
|
|
}
|
|
}
|
|
|
|
.picker-view {
|
|
width: 100%;
|
|
height: 400rpx;
|
|
margin-top: 20rpx;
|
|
}
|
|
|
|
.item {
|
|
height: 50px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
text-align: center;
|
|
}
|
|
</style>
|