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

vue3-js版组件库

import { computed } from 'vue'

const MonthView = {
    props: {
        month: [String, Number]
    },
    emits: ['change'],
    setup(props, { emit }) {
        const months = computed(() => {
            const arr = []
            for (let i = 0; i < 12; i++) {
                arr.push({
                    value: i + 1,
                    string: i + 1 + '月',
                })
            }
            return arr
        })

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

        return () => (
            <div class="mc-date__cube">
                {months.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 { MonthView, MonthView as default }