更新记录

1.0.1（2025-06-16） 下载此版本

优化

1.0.0（2025-06-16） 下载此版本

首次提交

平台兼容性

uni-app

其他

nl-time-picker

页内 时分 时间选择器

• 多端兼容

基本使用

<template>
    <view class="form-wrap">
        <view class="form-item dark">
            <view class="label">时间：</view>
            <view class="value">
                <nl-time-picker default-value="8:30" @change="handleTimeChange"></nl-time-picker>
            </view>
        </view>

        <view class="form-item light">
            <view class="label">时间：</view>
            <view class="value">
                <nl-time-picker default-value="8:30" @change="handleTimeChange"></nl-time-picker>
            </view>
        </view>
    </view>
</template>

<script>
    export default {
        methods: {
            handleTimeChange(e) {
                // {hour: '01', minute: '00'}
                console.log('选择的时间:', e)
            },
        },
    }
</script>
<style lang="scss" scoped>
    .form-item {
        display: flex;
        align-items: center;
        height: 600rpx;

        .label {
            width: 200rpx;
            text-align: right;
        }
        .value {
            flex: 0.6;
            padding: 0 100rpx;
        }
    }
    .dark {
        background-color: #191e31;
        color: #fff;
    }
</style>

Props

Methods