picker-view.uvue

<template>
    <view>
        <page-head :title="title"></page-head>
        <view class="uni-padding-wrap">
            <view class="uni-title">
                日期：{{year}}年{{month}}月{{day}}日
            </view>
        </view>
        <picker-view class="picker-view" :indicator-style="indicatorStyle" :value="value" @change="bindChange"
            :mask-top-style="maskTopStyle" :mask-bottom-style="maskBottomStyle">
            <picker-view-column class="picker-view-column">
                <view class="item" v-for="(item,index) in years" :key="index"><text class="text">{{item}}年</text></view>
            </picker-view-column>
            <picker-view-column class="picker-view-column">
                <view class="item" v-for="(item,index) in months" :key="index"><text class="text">{{item}}月</text>
                </view>
            </picker-view-column>
            <picker-view-column class="picker-view-column">
                <view class="item" v-for="(item,index) in days" :key="index"><text class="text">{{item}}日</text></view>
            </picker-view-column>
        </picker-view>
    </view>
</template>

<script lang="uts">
    export default {
        data() {
            const date = new Date()
            const _years : number[] = []
            const _year = date.getFullYear()
            const _months : number[] = []
            const _month : number = date.getMonth() + 1
            const _days : number[] = []
            const _day = date.getDate()
            for (let i = 2000; i <= _year; i++) {
                _years.push(i)
            }
            for (let i = 1; i <= 12; i++) {
                _months.push(i)
            }
            for (let i = 1; i <= 31; i++) {
                _days.push(i)
            }
            return {
                title: 'picker-view',
                years: _years as number[],
                year: _year as number,
                months: _months as number[],
                month: _month as number,
                days: _days as number[],
                day: _day as number,
                value: [_year - 2000, _month - 1, _day - 1] as number[],
                result: [] as number[],
                indicatorStyle: 'height: 50px;',
                maskTopStyle: '',
                maskBottomStyle: ''
            }
        },
        methods: {
			clickView() {
				
			},
            bindChange(e : PickerViewChangeEvent) {
                const val = e.detail.value
                this.result = val
                this.year = this.years[val[0]]
                this.month = this.months[val[1]]
                this.day = this.days[val[2]]
            },
            setValue() {
                this.value = [0, 0, 0] as number[]
            },
            setValue1() {
                this.value = [10, 10, 10] as number[]
            },
        }
    }
</script>

<style>
    .picker-view {
        width: 100%;
        height: 320px;
        margin-top: 10px;
    }

    .item {
        height: 50px;
    }

    .text {
        line-height: 50px;
        text-align: center;
    }
</style>