调整ui
This commit is contained in:
232
components/DatePicker/DatePicker.vue
Normal file
232
components/DatePicker/DatePicker.vue
Normal file
@@ -0,0 +1,232 @@
|
||||
<template>
|
||||
<view v-if="visible" class="picker-overlay" @click.stop="close">
|
||||
<view class="picker-container" @click.stop>
|
||||
<view class="picker-header">
|
||||
<text class="cancel" @click="close">取消</text>
|
||||
<text class="title">请选择日期</text>
|
||||
<text class="confirm" @click="confirm">确定</text>
|
||||
</view>
|
||||
|
||||
<view class="picker-columns">
|
||||
<!-- 年 -->
|
||||
<scroll-view
|
||||
class="column"
|
||||
scroll-y
|
||||
:scroll-top="scrollPos[0]"
|
||||
@scroll="onScroll(0,$event)"
|
||||
>
|
||||
<view
|
||||
v-for="(y,i) in years"
|
||||
:key="i"
|
||||
class="item"
|
||||
:class="{active:selected[0]===i}"
|
||||
@click="select(0,i)"
|
||||
>
|
||||
{{y}}年
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 月 -->
|
||||
<scroll-view
|
||||
class="column"
|
||||
scroll-y
|
||||
:scroll-top="scrollPos[1]"
|
||||
@scroll="onScroll(1,$event)"
|
||||
>
|
||||
<view
|
||||
v-for="(m,i) in months"
|
||||
:key="i"
|
||||
class="item"
|
||||
:class="{active:selected[1]===i}"
|
||||
@click="select(1,i)"
|
||||
>
|
||||
{{m}}月
|
||||
</view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 日 -->
|
||||
<scroll-view
|
||||
class="column"
|
||||
scroll-y
|
||||
:scroll-top="scrollPos[2]"
|
||||
@scroll="onScroll(2,$event)"
|
||||
>
|
||||
<view
|
||||
v-for="(d,i) in days"
|
||||
:key="i"
|
||||
class="item"
|
||||
:class="{active:selected[2]===i}"
|
||||
@click="select(2,i)"
|
||||
>
|
||||
{{d}}日
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
</template>
|
||||
|
||||
<script>
|
||||
export default {
|
||||
props: { value: String },
|
||||
data() {
|
||||
return {
|
||||
visible: false,
|
||||
years: [],
|
||||
months: Array.from({ length: 12 }, (_, i) => i + 1),
|
||||
days: [],
|
||||
selected: [0, 0, 0],
|
||||
scrollPos: [0, 0, 0], // 小程序 scroll-view 只能用 scroll-top 来滚动
|
||||
itemH: 40,
|
||||
scrollTimer: null,
|
||||
};
|
||||
},
|
||||
methods: {
|
||||
open(val) {
|
||||
this.visible = true;
|
||||
const currentYear = new Date().getFullYear();
|
||||
this.years = Array.from({ length: currentYear - 1980 + 1 }, (_, i) => 1980 + i);
|
||||
const date = val ? new Date(val) : new Date();
|
||||
const y = date.getFullYear();
|
||||
const m = date.getMonth() + 1;
|
||||
const d = date.getDate();
|
||||
|
||||
this.selected = [
|
||||
this.years.indexOf(y),
|
||||
m - 1,
|
||||
0 // 先占位，待 days 生成后再修正
|
||||
];
|
||||
|
||||
this.updateDays(() => {
|
||||
this.selected[2] = Math.min(d - 1, this.days.length - 1);
|
||||
this.updateScrollPos();
|
||||
});
|
||||
},
|
||||
close() {
|
||||
this.visible = false;
|
||||
},
|
||||
|
||||
confirm() {
|
||||
const y = this.years[this.selected[0]];
|
||||
const m = this.selected[1] + 1;
|
||||
const d = this.selected[2] + 1;
|
||||
const dateStr = `${y}-${String(m).padStart(2,'0')}-${String(d).padStart(2,'0')}`;
|
||||
|
||||
this.$emit("input", dateStr);
|
||||
this.$emit("confirm", dateStr);
|
||||
this.close();
|
||||
},
|
||||
|
||||
// 点击选择项
|
||||
select(col, idx) {
|
||||
this.selected.splice(col, 1, idx);
|
||||
|
||||
if (col === 0 || col === 1) {
|
||||
this.updateDays(() => {
|
||||
if (this.selected[2] >= this.days.length) {
|
||||
this.selected[2] = this.days.length - 1;
|
||||
}
|
||||
this.updateScrollPos();
|
||||
});
|
||||
} else {
|
||||
this.updateScrollPos();
|
||||
}
|
||||
},
|
||||
|
||||
// 滚动事件处理（兼容小程序）
|
||||
onScroll(col, e) {
|
||||
if (!e.detail) return;
|
||||
const top = e.detail.scrollTop;
|
||||
|
||||
if (this.scrollTimer) clearTimeout(this.scrollTimer);
|
||||
|
||||
this.scrollTimer = setTimeout(() => {
|
||||
const idx = Math.round(top / this.itemH);
|
||||
|
||||
this.selected.splice(col, 1, idx);
|
||||
|
||||
if (col === 0 || col === 1) {
|
||||
this.updateDays(() => {
|
||||
if (this.selected[2] >= this.days.length) {
|
||||
this.selected[2] = this.days.length - 1;
|
||||
}
|
||||
this.updateScrollPos();
|
||||
});
|
||||
} else {
|
||||
this.updateScrollPos();
|
||||
}
|
||||
}, 120);
|
||||
},
|
||||
|
||||
// 更新 scroll-top，使选中项居中
|
||||
updateScrollPos() {
|
||||
this.scrollPos = [
|
||||
this.selected[0] * this.itemH,
|
||||
this.selected[1] * this.itemH,
|
||||
this.selected[2] * this.itemH,
|
||||
];
|
||||
},
|
||||
|
||||
updateDays(callback) {
|
||||
const year = this.years[this.selected[0]];
|
||||
const month = this.selected[1] + 1;
|
||||
const max = new Date(year, month, 0).getDate();
|
||||
|
||||
this.days = Array.from({ length: max }, (_, i) => i + 1);
|
||||
|
||||
this.$nextTick(() => {
|
||||
if (callback) callback();
|
||||
});
|
||||
}
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
.picker-overlay {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0,0,0,0.4);
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: flex-end;
|
||||
z-index: 999;
|
||||
}
|
||||
.picker-container {
|
||||
background: #fff;
|
||||
width: 100%;
|
||||
border-radius: 16px 16px 0 0;
|
||||
}
|
||||
.picker-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
padding: 12px 20px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.cancel { color: #999; }
|
||||
.confirm { color:#007aff; }
|
||||
.title { font-weight:bold; }
|
||||
|
||||
.picker-columns {
|
||||
display: flex;
|
||||
height: 200px;
|
||||
}
|
||||
|
||||
.column {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.item {
|
||||
height: 40px;
|
||||
line-height: 40px;
|
||||
text-align: center;
|
||||
color:#666;
|
||||
}
|
||||
|
||||
.item.active {
|
||||
color:#007aff;
|
||||
font-weight:bold;
|
||||
font-size:18px;
|
||||
}
|
||||
</style>
|
||||
Reference in New Issue
Block a user