magiccube-vue3/package/components/month-picker/year-cell.js

vue3-js版组件库

import { ref, computed } from 'vue'

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

        const yearChoiceCenter = ref('')

        const yearsList = computed(() => {
            const _y = Number(currentYear.value) || new Date().getFullYear()
            const min = _y - 5
            const max = _y + 4
            const arr = []
            for (let i = min; i < max; i++) {
                arr.push({
                    key: 'year',
                    value: i + 1,
                    string: i + 1,
                })
            }
            return arr
        })

        const currentYear = computed(() => {
            return yearChoiceCenter.value || props.year
        })

        // 年份或月份切换选择函数
        const handleSelect = (e, item) => {
            e.stopPropagation()
            const { key, value } = item
            emit('change', value)
        }

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

        return () => (
            <>
                <div class="mc-month__toolbar">
                    <div class="mc-month__toolbar--child">
                        <span class="mc-month__toolbar--year" onClick={(e) => handleChangeYearList(e, 'prev')}></span>
                    </div>
                    <div class="mc-month__toolbar--child current-date-view">
                    </div>
                    <div class="mc-month__toolbar--child">
                        <span class="mc-month__toolbar--year right" onClick={(e) => handleChangeYearList(e, 'next')}></span>
                    </div>
                </div>
                <div class="mc-month__cube">
                    {yearsList.value.map(n => (
                        <span class="mc-month__cube--cell"
                            onClick={(e) => handleSelect(e, n)}>
                            {n.string}
                        </span>
                    ))}
                </div>
            </>
        )
    }
}

export { YearCell, YearCell as default}