magiccube-vue3/package/components/date-picker/year-view.js

vue3-js版组件库

import { ref, computed } from 'vue'

const YearView = {
    props: {
        year: [String, Number],
    },
    emits: ['change'],
    setup(props, { emit }) {

        const displayYear = ref(0)

        const model = computed({
            get() {
                return displayYear.value || Number(props.year)
            },
            set(value) {
                displayYear.value = Number(value)
            }
        })

        const years = computed(() => {
            const arr = []
            for (let i = model.value - 5, max = model.value + 4; i < max; i++) {
                arr.push({
                    key: 'year',
                    value: i + 1,
                    string: i + 1,
                })
            }
            return arr
        })

        // 在年份选择视图中 切换年份列表
        const handleChangeYearList = (e, type) => {
            e.stopPropagation()
            model.value = type === 'prev' ? model.value - 9 : model.value + 9
        }

        const handleClick = (e, item) => {
            e.stopPropagation()
            emit('change', item.value)
        }

        return () => (
            <>
                <div class="mc-date__toolbar">
                    <div class="mc-date__toolbar--child">
                        <span class="mc-date__toolbar--year" onClick={(e) => handleChangeYearList(e, 'prev')}></span>
                    </div>
                    <div class="mc-date__toolbar--child current-date-view">
                    </div>
                    <div class="mc-date__toolbar--child">
                        <span class="mc-date__toolbar--year right" onClick={(e) => handleChangeYearList(e, 'next')}></span>
                    </div>
                </div>
                <div class="mc-date__cube">
                    {years.value.map((item) => (
                        <span class={[
                            'mc-date__cube--child',
                            {
                                active: item.value === Number(props.month)
                            }
                        ]}
                        onClick={(e) => handleClick(e, item)}>{item.string}</span>
                    ))}
                </div>
            </>
        )
    }
}

export { YearView, YearView as default }