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

vue3-js版组件库

import { ref, computed } from 'vue'
import McInput from '../input'
import { fmtValueToDate, fmtOutputValue, existNanInValue } from './common'
import ICON_SEPARATOR from '../../img/icon_separator.svg'
import ICON_CALENDAR from '../../img/icon_calendar.svg'

const Picker = {
    props: {
        data: Array,
        format: String,
        multi: Boolean,
        type: String,
        placeholder: String,
        startPlaceholder: String,
        endPlaceholder: String,
        // form校验
        errorHint: String,
        // range日历结果分离器
        separator: String,
        disabled: Boolean,

        // 外部传入错误状态
        errorStatus: Boolean,

        size: {
            type: String,
            default: 'normal'
        }
    },
    emits: ['change', 'click-picker'],
    setup(props, { emit }) {
        const inputValue = ref('')

        const model = computed({
            get() {
                const arr = props.data?.length ? props.data.map(n => fmtOutputValue(n, props.format)) : []
                return arr.toString()
            },
            set(value) {
                inputValue.value = value
            }
        })

        const rangeResultContentNode = (value, ph) => {
            return value ? <em>{fmtOutputValue(value, props.format)}</em> : <em class="placeholder" title={ph}>{ph}</em>
        }

        const handleEnter = (e) => {
            if(e.keyCode !== 13) return
            if (!inputValue.value) return
            try {
                const str = fmtValueToDate(inputValue.value)
                if (existNanInValue(str)) {
                    inputValue.value = ''
                } else {
                    emit('change', [str])
                }
            } catch (err) {
                inputValue.value = ''
            }
        }

        return () => (
            <div onClick={(e) => emit('click-picker', e)}>
                {
                    props.type === 'range' ? (
                        <div class={[
                            'mc-date__result',
                            'range',
                            {
                                error: Boolean(props.errorHint)
                            }
                        ]}>
                            <div class="mc-date__result--inner">
                                <span class="mc-date__result--content">
                                    {rangeResultContentNode(props.data[0], props.startPlaceholder)}
                                </span>
                                <span class="mc-date__result--separator">{
                                    ICON_SEPARATOR? <img src={ICON_SEPARATOR} /> : props.separator
                                }</span>
                                <span class="mc-date__result--content">
                                    {rangeResultContentNode(props.data[1], props.endPlaceholder)}
                                </span>
                            </div>
                            <i class="mc-date__result--icon"><img src={ICON_CALENDAR} /></i>
                        </div>
                    ) : (
                        <McInput v-model={model.value}
                            disabled={props.disabled}
                            readonly={props.type === 'range' || props.multi}
                            onKeyup={handleEnter}
                            placeholder={props.placeholder}
                            suffixIcon={ICON_CALENDAR}
                            errorStatus={Boolean(props.errorHint) || props.errorStatus}
                            style={props.size === 'small'? 'height: 28px' : ''} />
                    )
                }
            </div>
        )
    }
}

export { Picker, Picker as default }