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