88 lines
2.2 KiB
Vue
88 lines
2.2 KiB
Vue
|
<template>
|
|||
|
|
<picker-view
|
|||
|
|
class="picker-body"
|
|||
|
|
:value="timeIndex"
|
|||
|
|
@change="handleTimeChange"
|
|||
|
|
>
|
|||
|
|
<!-- 分钟列 -->
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view
|
|||
|
|
v-for="min in minutes"
|
|||
|
|
:key="min"
|
|||
|
|
class="item"
|
|||
|
|
:class="{ active: timeIndex[0] === minutes.indexOf(min) }"
|
|||
|
|
>{{ min }}分</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
|
|||
|
|
<!-- 秒数列 -->
|
|||
|
|
<picker-view-column>
|
|||
|
|
<view
|
|||
|
|
v-for="sec in seconds"
|
|||
|
|
:key="sec"
|
|||
|
|
class="item"
|
|||
|
|
:class="{ active: timeIndex[1] === seconds.indexOf(sec) }"
|
|||
|
|
>{{ sec }}秒</view>
|
|||
|
|
</picker-view-column>
|
|||
|
|
</picker-view>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script>
|
|||
|
|
export default {
|
|||
|
|
name: "TimePicker",
|
|||
|
|
props: {
|
|||
|
|
// 初始时间（格式：{ minutes: '02', seconds: '30' }）
|
|||
|
|
defaultTime: {
|
|||
|
|
type: Object,
|
|||
|
|
default: () => ({ minutes: '00', seconds: '00' })
|
|||
|
|
}
|
|||
|
|
},
|
|||
|
|
data() {
|
|||
|
|
return {
|
|||
|
|
minutes: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
|
|||
|
|
seconds: Array.from({ length: 60 }, (_, i) => i.toString().padStart(2, '0')), // 00-59
|
|||
|
|
timeIndex: [0, 0], // 当前选中索引
|
|||
|
|
selectedTime: { minutes: '00', seconds: '00' } // 当前选择的时间
|
|||
|
|
};
|
|||
|
|
},
|
|||
|
|
created() {
|
|||
|
|
// 初始化默认时间
|
|||
|
|
const minIndex = this.minutes.indexOf(this.defaultTime.minutes);
|
|||
|
|
const secIndex = this.seconds.indexOf(this.defaultTime.seconds);
|
|||
|
|
this.timeIndex = [minIndex, secIndex];
|
|||
|
|
this.selectedTime = { ...this.defaultTime };
|
|||
|
|
},
|
|||
|
|
methods: {
|
|||
|
|
// 时间变化时更新选中值
|
|||
|
|
handleTimeChange(e) {
|
|||
|
|
this.timeIndex = e.detail.value;
|
|||
|
|
const [minIdx, secIdx] = this.timeIndex;
|
|||
|
|
this.selectedTime = {
|
|||
|
|
minutes: this.minutes[minIdx],
|
|||
|
|
seconds: this.seconds[secIdx]
|
|||
|
|
};
|
|||
|
|
this.$emit("change", this.selectedTime); // 实时通知父组件
|
|||
|
|
},
|
|||
|
|
|
|||
|
|
// 提供给父组件的方法：获取当前时间
|
|||
|
|
getCurrentTime() {
|
|||
|
|
return this.selectedTime;
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
};
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<style scoped>
|
|||
|
|
.picker-body {
|
|||
|
|
height: 180px;
|
|||
|
|
background: #3A3A3A;
|
|||
|
|
border-radius: 10px;
|
|||
|
|
}
|
|||
|
|
.item {
|
|||
|
|
color: rgba(255, 255, 255, 0.7);
|
|||
|
|
text-align: center;
|
|||
|
|
padding: 10px 0;
|
|||
|
|
}
|
|||
|
|
.item.active {
|
|||
|
|
color: #A3FF00; /* 选中项高亮 */
|
|||
|
|
}
|
|||
|
|
</style>
|