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

vue3-js版组件库

import { ref, computed } from 'vue'
import * as utils from '../../utils/common'

import ICON_SEPARATOR from '../../img/icon_separator.svg'
import ICON_CALENDAR from '../../img/icon_calendar.svg'

/**
 * 日历选择结果展示控件
 * 主要处理结果值
 * -----
 * 如果是单日历（单选）是支持输入日期值
 */
const Picker = {
    props: {
        data: Array,
        placeholder: String,
        startPlaceholder: String,
        endPlaceholder: String,
        format: String,
        type: String,
        multi: Boolean,
        disabled: Boolean,

        // form校验
        errorHint: String,

        // range日历结果分离器
        separator: String,
        clear: Boolean,
    },
    emits: ['change', 'click-picker', 'clear'],
    setup(props, { emit }) {

        const cacheValue = ref('')

        const model = computed({
            get() {
                const arr = props.data.map(n => utils.dateFormat(n, props.format))
                return props.type === 'range'? arr.join(' ' + props.separator + ' ') : arr.toString()
            },
            set(value) {
                cacheValue.value = value
            }
        })

        const handleClick = (e) => {
            emit('click-picker', e)
        }

        const handleClear = (e) => {
            emit('clear', e)
        }

        const rangeResult = computed(() => {
            return props.type === 'range'? {
                start: props.data[0]? utils.dateFormat(props.data[0], props.format) : '',
                end: props.data[1]? utils.dateFormat(props.data[1], props.format) : '',
            } : {}
        })

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

        return () => (
            <div>
                {
                    props.type === 'range'? (
                        <div class={[
                            'mc-month__result range',
                            {
                                error: Boolean(props.errorHint)
                            }
                        ]}
                        onClick={handleClick}>
                            <div class="mc-month__result--inner">
                                <span class="mc-month__result--content">
                                    {rangeResultContentNode(rangeResult.value.start, props.startPlaceholder)}
                                </span>
                                <span class="mc-month__result--separator">{
                                    ICON_SEPARATOR? <img src={ICON_SEPARATOR} /> : props.separator
                                }</span>
                                <span class="mc-month__result--content">
                                    {rangeResultContentNode(rangeResult.value.end, props.endPlaceholder)}
                                </span>
                            </div>
                            <i class="mc-month__result--icon"><img src={ICON_CALENDAR} /></i>
                        </div>
                    ) : (
                        <McInput v-model={model.value}
                            readonly
                            disabled={props.disabled}
                            placeholder={props.placeholder}
                            suffixIcon={ICON_CALENDAR}
                            clear={props.clear}
                            errorStatus={Boolean(props.errorHint)}
                            onClear={handleClear}
                            onClick={handleClick}/>
                    )
                }
            </div>
        )
    }
}

export { Picker, Picker as default }