magiccube-vue3/package/components/date-picker/toolbar.js

vue3-js版组件库

import { ref, computed } from 'vue'

const Toolbar = {
    props: {
        type: String,
        forward: String,
        year: [String, Number],
        month: [String, Number],
        endYear: [String, Number],
        endMonth: [String, Number],
    },
    emits: ['change'],
    setup(props, { emit }) {

        const displayYear = ref(0)

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

        /**
         * 切换月份时 计算函数
         */
        const changeMonth = (year, month, number = 0) => {
            const _d = new Date()
            _d.setDate(1)
            _d.setFullYear(year)
            _d.setMonth(month + number)
            return {
                year: _d.getFullYear(),
                month: _d.getMonth() + 1
            }
        }

        const handleChangeView = (e, action) => {
            e.stopPropagation()
            const obj = {}
            switch (action) {
                // 上年
                case 'prev_year': {
                    obj.year = props.year - 1
                    obj.month = props.month
                    obj.type = 'year'
                    break
                }

                // 上月
                case 'prev_month': {
                    const v = changeMonth(props.year, props.month, -2)
                    obj.year = v.year
                    obj.month = v.month
                    obj.type = 'month'
                    break
                }

                // 下年
                case 'next_year': {
                    obj.year = props.year + 1
                    obj.month = props.month
                    obj.type = 'year'
                    break
                }

                // 下月
                case 'next_month': {
                    const v = changeMonth(props.year, props.month)
                    obj.year = v.year
                    obj.month = v.month
                    obj.type = 'month'
                    break
                }

                // 切换到选择年份窗口视图
                case 'change_year': {
                    if (props.type === 'range') return
                    obj.type = 'view'
                    obj.view = 'year'
                    break
                }

                // 切换到选择月份窗口视图
                case 'change_month': {
                    if (props.type === 'range') return
                    obj.type = 'view'
                    obj.view = 'month'
                    break
                }
            }

            emit('change', obj)
        }

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

        return () => (
            <div class="mc-date__toolbar">
                <div class="mc-date__toolbar--child">
                    {
                        props.type !== 'range' || (props.type === 'range' && props.forward === 'left') ? (
                            <>
                                <span class="mc-date__toolbar--year" onClick={(e) => handleChangeView(e, 'prev_year')}></span>
                                <span class="mc-date__toolbar--month" onClick={(e) => handleChangeView(e, 'prev_month')}></span>
                            </>

                        ) : ''
                    }
                </div>
                <div class="mc-date__toolbar--child current-date-view">
                    <span class={[
                        'year',
                        {
                            disabled: props.type === 'range'
                        }
                    ]}
                    onClick={(e) => handleChangeView(e, 'change_year')}>{props.forward === 'right' ? props.endYear : props.year}年</span>
                    <span class={[
                        'month',
                        {
                            disabled: props.type === 'range'
                        }
                    ]}
                    onClick={(e) => handleChangeView(e, 'change_month')}>{props.forward === 'right' ? props.endMonth : props.month}月</span>
                </div>
                <div class="mc-date__toolbar--child">
                    {
                        props.type !== 'range' || (props.type === 'range' && props.forward === 'right') ? (
                            <>
                                <span class="mc-date__toolbar--month right" onClick={(e) => handleChangeView(e, 'next_month')}></span>
                                <span class="mc-date__toolbar--year right" onClick={(e) => handleChangeView(e, 'next_year')}></span>
                            </>

                        ) : ''
                    }
                </div>
            </div>
        )
    }
}

export { Toolbar, Toolbar as default }