vxe-pc-ui 3.16.0 → 3.16.1

package/es/input/src/input.js

@@ -0,0 +1,3084 @@
+import { defineVxeComponent } from '../../ui/src/comp';
+import XEUtils from 'xe-utils';
+import { getConfig, getIcon, getI18n, globalEvents, GLOBAL_EVENT_KEYS, createEvent, globalMixins, renderEmptyElement } from '../../ui';
+import { getFuncText, getLastZIndex, nextZIndex, eqEmptyValue } from '../../ui/src/utils';
+import { hasClass, getAbsolutePos, getEventTargetNode, hasControlKey } from '../../ui/src/dom';
+import { toStringTimeDate, getDateQuarter } from '../../date-panel/src/util';
+import { handleNumber, toFloatValueFixed } from '../../number-input/src/util';
+import { getSlotVNs } from '../../ui/src/vn';
+import { createComponentLog } from '../../ui/src/log';
+const { warnLog } = createComponentLog('input');
+export default {
+    name: 'VxeInput',
+    mixins: [
+        globalMixins.sizeMixin
+    ],
+    model: {
+        prop: 'value',
+        event: 'modelValue'
+    },
+    props: {
+        value: [String, Number, Date],
+        immediate: {
+            type: Boolean,
+            default: true
+        },
+        name: String,
+        title: String,
+        type: {
+            type: String,
+            default: 'text'
+        },
+        clearable: {
+            type: Boolean,
+            default: () => getConfig().input.clearable
+        },
+        readonly: {
+            type: Boolean,
+            default: null
+        },
+        disabled: {
+            type: Boolean,
+            default: null
+        },
+        placeholder: {
+            type: String,
+            default: null
+        },
+        maxLength: {
+            type: [String, Number],
+            default: () => getConfig().input.maxLength
+        },
+        autoComplete: {
+            type: String,
+            default: 'off'
+        },
+        autoFocus: {
+            type: Boolean,
+            default: null
+        },
+        align: String,
+        form: String,
+        className: String,
+        size: {
+            type: String,
+            default: () => getConfig().input.size || getConfig().size
+        },
+        multiple: Boolean,
+        // text
+        showWordCount: Boolean,
+        countMethod: Function,
+        // number、integer、float
+        min: {
+            type: [String, Number],
+            default: null
+        },
+        max: {
+            type: [String, Number],
+            default: null
+        },
+        step: [String, Number],
+        trim: {
+            type: Boolean,
+            default: () => getConfig().input.trim
+        },
+        exponential: {
+            type: Boolean,
+            default: () => getConfig().input.exponential
+        },
+        // number、integer、float、password
+        controls: {
+            type: Boolean,
+            default: () => getConfig().input.controls
+        },
+        // float
+        digits: {
+            type: [String, Number],
+            default: () => getConfig().input.digits
+        },
+        // date、week、month、quarter、year
+        startDate: {
+            type: [String, Number, Date],
+            default: () => getConfig().input.startDate
+        },
+        endDate: {
+            type: [String, Number, Date],
+            default: () => getConfig().input.endDate
+        },
+        minDate: [String, Number, Date],
+        maxDate: [String, Number, Date],
+        // 已废弃 startWeek，被 startDay 替换
+        startWeek: Number,
+        startDay: {
+            type: [String, Number],
+            default: () => getConfig().input.startDay
+        },
+        labelFormat: String,
+        valueFormat: String,
+        editable: {
+            type: Boolean,
+            default: true
+        },
+        festivalMethod: {
+            type: Function,
+            default: () => getConfig().input.festivalMethod
+        },
+        disabledMethod: {
+            type: Function,
+            default: () => getConfig().input.disabledMethod
+        },
+        // week
+        selectDay: {
+            type: [String, Number],
+            default: () => getConfig().input.selectDay
+        },
+        prefixIcon: String,
+        prefixConfig: Object,
+        suffixIcon: String,
+        suffixConfig: Object,
+        placement: String,
+        transfer: {
+            type: Boolean,
+            default: null
+        },
+        // 已废弃
+        maxlength: [String, Number],
+        // 已废弃
+        autocomplete: String
+    },
+    inject: {
+        $xeSelect: {
+            default: null
+        },
+        $xeTreeSelect: {
+            default: null
+        },
+        $xeModal: {
+            default: null
+        },
+        $xeDrawer: {
+            default: null
+        },
+        $xeTable: {
+            default: null
+        },
+        $xeForm: {
+            default: null
+        },
+        formItemInfo: {
+            from: 'xeFormItemInfo',
+            default: null
+        }
+    },
+    data() {
+        const xID = XEUtils.uniqueId();
+        const reactData = {
+            initialized: false,
+            panelIndex: 0,
+            showPwd: false,
+            visiblePanel: false,
+            isAniVisible: false,
+            panelStyle: {},
+            panelPlacement: '',
+            isActivated: false,
+            inputValue: '',
+            datetimePanelValue: null,
+            datePanelValue: null,
+            datePanelLabel: '',
+            datePanelType: 'day',
+            selectMonth: null,
+            currentDate: null
+        };
+        const internalData = {
+            yearSize: 12,
+            monthSize: 20,
+            quarterSize: 8,
+            hpTimeout: undefined,
+            dnTimeout: undefined
+        };
+        return {
+            xID,
+            reactData,
+            internalData
+        };
+    },
+    computed: Object.assign(Object.assign({}, {}), { computePrefixOpts() {
+            const $xeInput = this;
+            const props = $xeInput;
+            return Object.assign({}, getConfig().input.prefixConfig, props.prefixConfig);
+        },
+        computeSuffixOpts() {
+            const $xeInput = this;
+            const props = $xeInput;
+            return Object.assign({}, getConfig().input.suffixConfig, props.suffixConfig);
+        },
+        computeBtnTransfer() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const $xeTable = $xeInput.$xeTable;
+            const $xeModal = $xeInput.$xeModal;
+            const $xeDrawer = $xeInput.$xeDrawer;
+            const $xeForm = $xeInput.$xeForm;
+            const { transfer } = props;
+            if (transfer === null) {
+                const globalTransfer = getConfig().input.transfer;
+                if (XEUtils.isBoolean(globalTransfer)) {
+                    return globalTransfer;
+                }
+                if ($xeTable || $xeModal || $xeDrawer || $xeForm) {
+                    return true;
+                }
+            }
+            return transfer;
+        },
+        computeFormReadonly() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const $xeForm = $xeInput.$xeForm;
+            if (getConfig().inputReadonly === 'obsolete') {
+                if ($xeForm) {
+                    return $xeForm.readonly;
+                }
+                return false;
+            }
+            const { readonly } = props;
+            if (readonly === null) {
+                if ($xeForm) {
+                    return $xeForm.readonly;
+                }
+                return false;
+            }
+            return readonly;
+        },
+        computeIsDisabled() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const $xeForm = $xeInput.$xeForm;
+            const { disabled } = props;
+            if (disabled === null) {
+                if ($xeForm) {
+                    return $xeForm.disabled;
+                }
+                return false;
+            }
+            return disabled;
+        },
+        computeInpMaxLength() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { maxLength, maxlength } = props;
+            const maxLen = maxLength || maxlength;
+            const isNumType = $xeInput.computeIsNumType;
+            // 数值最大长度限制 16 位，包含小数
+            if (isNumType) {
+                if (!XEUtils.toNumber(maxLen)) {
+                    return 16;
+                }
+            }
+            return maxLen;
+        },
+        computeIsDateTimeType() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { type } = props;
+            return type === 'time' || type === 'datetime';
+        },
+        computeIsNumType() {
+            const $xeInput = this;
+            const props = $xeInput;
+            return ['number', 'integer', 'float'].indexOf(props.type) > -1;
+        },
+        computeInputCount() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            return XEUtils.getSize(reactData.inputValue);
+        },
+        computeIsCountError() {
+            const $xeInput = this;
+            const inputCount = $xeInput.computeInputCount;
+            const inpMaxLength = $xeInput.computeInpMaxLength;
+            return inpMaxLength && inputCount > XEUtils.toNumber(inpMaxLength);
+        },
+        computeIsDatePickerType() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const isDateTimeType = $xeInput.computeIsDateTimeType;
+            return isDateTimeType || ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+        },
+        computeIsPawdType() {
+            const $xeInput = this;
+            const props = $xeInput;
+            return props.type === 'password';
+        },
+        computeIsSearchType() {
+            const $xeInput = this;
+            const props = $xeInput;
+            return props.type === 'search';
+        },
+        computeDigitsValue() {
+            const $xeInput = this;
+            const props = $xeInput;
+            return XEUtils.toInteger(props.digits) || 1;
+        },
+        computeStepValue() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { type } = props;
+            const digitsValue = $xeInput.computeDigitsValue;
+            const step = props.step;
+            if (type === 'integer') {
+                return XEUtils.toInteger(step) || 1;
+            }
+            else if (type === 'float') {
+                return XEUtils.toNumber(step) || (1 / Math.pow(10, digitsValue));
+            }
+            return XEUtils.toNumber(step) || 1;
+        },
+        computeIsClearable() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { type } = props;
+            const isNumType = $xeInput.computeIsNumType;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const isPawdType = $xeInput.computeIsPawdType;
+            return props.clearable && (isPawdType || isNumType || isDatePickerType || type === 'text' || type === 'search');
+        },
+        computeDateStartTime() {
+            const $xeInput = this;
+            const props = $xeInput;
+            return props.startDate ? XEUtils.toStringDate(props.startDate) : null;
+        },
+        computeDateEndTime() {
+            const $xeInput = this;
+            const props = $xeInput;
+            return props.endDate ? XEUtils.toStringDate(props.endDate) : null;
+        },
+        computeSupportMultiples() {
+            const $xeInput = this;
+            const props = $xeInput;
+            return ['date', 'week', 'month', 'quarter', 'year'].indexOf(props.type) > -1;
+        },
+        computeDateListValue() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { value, multiple } = props;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const dateValueFormat = $xeInput.computeDateValueFormat;
+            if (multiple && value && isDatePickerType) {
+                return XEUtils.toValueString(value).split(',').map(item => {
+                    const date = $xeInput.parseDate(item, dateValueFormat);
+                    if (XEUtils.isValidDate(date)) {
+                        return date;
+                    }
+                    return date;
+                });
+            }
+            return [];
+        },
+        computeDateMultipleValue() {
+            const $xeInput = this;
+            const dateListValue = $xeInput.computeDateListValue;
+            const dateValueFormat = $xeInput.computeDateValueFormat;
+            return dateListValue.map(date => XEUtils.toDateString(date, dateValueFormat));
+        },
+        computeDateMultipleLabel() {
+            const $xeInput = this;
+            const dateListValue = $xeInput.computeDateListValue;
+            const dateLabelFormat = $xeInput.computeDateLabelFormat;
+            return dateListValue.map(date => XEUtils.toDateString(date, dateLabelFormat)).join(', ');
+        },
+        computeDateValueFormat() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { type, valueFormat } = props;
+            if (valueFormat) {
+                return valueFormat;
+            }
+            if (type === 'time') {
+                return 'HH:mm:ss';
+            }
+            if (type === 'datetime') {
+                return 'yyyy-MM-dd HH:mm:ss';
+            }
+            return 'yyyy-MM-dd';
+        },
+        computeDateValue() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { value } = props;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const dateValueFormat = $xeInput.computeDateValueFormat;
+            let val = null;
+            if (value && isDatePickerType) {
+                const date = $xeInput.parseDate(value, dateValueFormat);
+                if (XEUtils.isValidDate(date)) {
+                    val = date;
+                }
+            }
+            return val;
+        },
+        computeIsDisabledPrevDateBtn() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const dateStartTime = $xeInput.computeDateStartTime;
+            const { selectMonth } = reactData;
+            if (selectMonth && dateStartTime) {
+                return selectMonth <= dateStartTime;
+            }
+            return false;
+        },
+        computeIsDisabledNextDateBtn() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const dateEndTime = $xeInput.computeDateEndTime;
+            const { selectMonth } = reactData;
+            if (selectMonth && dateEndTime) {
+                return selectMonth >= dateEndTime;
+            }
+            return false;
+        },
+        computeDateTimeLabel() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { datetimePanelValue } = reactData;
+            const hasTimeSecond = $xeInput.computeHasTimeSecond;
+            if (datetimePanelValue) {
+                return XEUtils.toDateString(datetimePanelValue, hasTimeSecond ? 'HH:mm:ss' : 'HH:mm');
+            }
+            return '';
+        },
+        computeDateHMSTime() {
+            const $xeInput = this;
+            const dateValue = $xeInput.computeDateValue;
+            const isDateTimeType = $xeInput.computeIsDateTimeType;
+            return dateValue && isDateTimeType ? (dateValue.getHours() * 3600 + dateValue.getMinutes() * 60 + dateValue.getSeconds()) * 1000 : 0;
+        },
+        computeDateLabelFormat() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { labelFormat } = props;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            if (isDatePickerType) {
+                return labelFormat || getI18n(`vxe.input.date.labelFormat.${props.type}`);
+            }
+            return '';
+        },
+        computeYearList() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const internalData = $xeInput.internalData;
+            const { selectMonth, currentDate } = reactData;
+            const { yearSize } = internalData;
+            const years = [];
+            if (selectMonth && currentDate) {
+                const currFullYear = currentDate.getFullYear();
+                const selectFullYear = selectMonth.getFullYear();
+                const startYearDate = new Date(selectFullYear - selectFullYear % yearSize, 0, 1);
+                for (let index = -4; index < yearSize + 4; index++) {
+                    const date = XEUtils.getWhatYear(startYearDate, index, 'first');
+                    const itemFullYear = date.getFullYear();
+                    years.push({
+                        date,
+                        isCurrent: true,
+                        isPrev: index < 0,
+                        isNow: currFullYear === itemFullYear,
+                        isNext: index >= yearSize,
+                        year: itemFullYear
+                    });
+                }
+            }
+            return years;
+        },
+        computeSelectDatePanelObj() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            let y = '';
+            let m = '';
+            if (isDatePickerType) {
+                const { datePanelType, selectMonth } = reactData;
+                const yearList = $xeInput.computeYearList;
+                let year = '';
+                let month;
+                if (selectMonth) {
+                    year = selectMonth.getFullYear();
+                    month = selectMonth.getMonth() + 1;
+                }
+                if (datePanelType === 'quarter' || datePanelType === 'month') {
+                    y = getI18n('vxe.datePicker.yearTitle', [year]);
+                }
+                else if (datePanelType === 'year') {
+                    y = yearList.length ? `${yearList[0].year} - ${yearList[yearList.length - 1].year}` : '';
+                }
+                else {
+                    y = getI18n('vxe.datePicker.yearTitle', [year]);
+                    m = month ? getI18n(`vxe.input.date.m${month}`) : '-';
+                }
+            }
+            return {
+                y,
+                m
+            };
+        },
+        computeFirstDayOfWeek() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { startDay, startWeek } = props;
+            return XEUtils.toNumber(XEUtils.isNumber(startDay) || XEUtils.isString(startDay) ? startDay : startWeek);
+        },
+        computeWeekDatas() {
+            const $xeInput = this;
+            const weeks = [];
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            if (isDatePickerType) {
+                let sWeek = $xeInput.computeFirstDayOfWeek;
+                weeks.push(sWeek);
+                for (let index = 0; index < 6; index++) {
+                    if (sWeek >= 6) {
+                        sWeek = 0;
+                    }
+                    else {
+                        sWeek++;
+                    }
+                    weeks.push(sWeek);
+                }
+            }
+            return weeks;
+        },
+        computeDateHeaders() {
+            const $xeInput = this;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            if (isDatePickerType) {
+                const weekDatas = $xeInput.computeWeekDatas;
+                return weekDatas.map((day) => {
+                    return {
+                        value: day,
+                        label: getI18n(`vxe.input.date.weeks.w${day}`)
+                    };
+                });
+            }
+            return [];
+        },
+        computeWeekHeaders() {
+            const $xeInput = this;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            if (isDatePickerType) {
+                const dateHeaders = $xeInput.computeDateHeaders;
+                return [{ label: getI18n('vxe.input.date.weeks.w') }].concat(dateHeaders);
+            }
+            return [];
+        },
+        computeYearDatas() {
+            const $xeInput = this;
+            const yearList = $xeInput.computeYearList;
+            return XEUtils.chunk(yearList, 4);
+        },
+        computeQuarterList() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const internalData = $xeInput.internalData;
+            const { selectMonth, currentDate } = reactData;
+            const { quarterSize } = internalData;
+            const quarters = [];
+            if (selectMonth && currentDate) {
+                const currFullYear = currentDate.getFullYear();
+                const currQuarter = getDateQuarter(currentDate);
+                const firstYear = XEUtils.getWhatYear(selectMonth, 0, 'first');
+                const selFullYear = firstYear.getFullYear();
+                for (let index = -2; index < quarterSize - 2; index++) {
+                    const date = XEUtils.getWhatQuarter(firstYear, index);
+                    const itemFullYear = date.getFullYear();
+                    const itemQuarter = getDateQuarter(date);
+                    const isPrev = itemFullYear < selFullYear;
+                    quarters.push({
+                        date,
+                        isPrev,
+                        isCurrent: itemFullYear === selFullYear,
+                        isNow: itemFullYear === currFullYear && itemQuarter === currQuarter,
+                        isNext: !isPrev && itemFullYear > selFullYear,
+                        quarter: itemQuarter
+                    });
+                }
+            }
+            return quarters;
+        },
+        computeQuarterDatas() {
+            const $xeInput = this;
+            const quarterList = $xeInput.computeQuarterList;
+            return XEUtils.chunk(quarterList, 2);
+        },
+        computeMonthList() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const internalData = $xeInput.internalData;
+            const { selectMonth, currentDate } = reactData;
+            const { monthSize } = internalData;
+            const months = [];
+            if (selectMonth && currentDate) {
+                const currFullYear = currentDate.getFullYear();
+                const currMonth = currentDate.getMonth();
+                const selFullYear = XEUtils.getWhatYear(selectMonth, 0, 'first').getFullYear();
+                for (let index = -4; index < monthSize - 4; index++) {
+                    const date = XEUtils.getWhatYear(selectMonth, 0, index);
+                    const itemFullYear = date.getFullYear();
+                    const itemMonth = date.getMonth();
+                    const isPrev = itemFullYear < selFullYear;
+                    months.push({
+                        date,
+                        isPrev,
+                        isCurrent: itemFullYear === selFullYear,
+                        isNow: itemFullYear === currFullYear && itemMonth === currMonth,
+                        isNext: !isPrev && itemFullYear > selFullYear,
+                        month: itemMonth
+                    });
+                }
+            }
+            return months;
+        },
+        computeMonthDatas() {
+            const $xeInput = this;
+            const monthList = $xeInput.computeMonthList;
+            return XEUtils.chunk(monthList, 4);
+        },
+        computeDayList() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { selectMonth, currentDate } = reactData;
+            const days = [];
+            if (selectMonth && currentDate) {
+                const dateHMSTime = $xeInput.computeDateHMSTime;
+                const weekDatas = $xeInput.computeWeekDatas;
+                const currFullYear = currentDate.getFullYear();
+                const currMonth = currentDate.getMonth();
+                const currDate = currentDate.getDate();
+                const selFullYear = selectMonth.getFullYear();
+                const selMonth = selectMonth.getMonth();
+                const selDay = selectMonth.getDay();
+                const prevOffsetDate = -weekDatas.indexOf(selDay);
+                const startDayDate = new Date(XEUtils.getWhatDay(selectMonth, prevOffsetDate).getTime() + dateHMSTime);
+                for (let index = 0; index < 42; index++) {
+                    const date = XEUtils.getWhatDay(startDayDate, index);
+                    const itemFullYear = date.getFullYear();
+                    const itemMonth = date.getMonth();
+                    const itemDate = date.getDate();
+                    const isPrev = date < selectMonth;
+                    days.push({
+                        date,
+                        isPrev,
+                        isCurrent: itemFullYear === selFullYear && itemMonth === selMonth,
+                        isNow: itemFullYear === currFullYear && itemMonth === currMonth && itemDate === currDate,
+                        isNext: !isPrev && selMonth !== itemMonth,
+                        label: itemDate
+                    });
+                }
+            }
+            return days;
+        },
+        computeDayDatas() {
+            const $xeInput = this;
+            const dayList = $xeInput.computeDayList;
+            return XEUtils.chunk(dayList, 7);
+        },
+        computeWeekDates() {
+            const $xeInput = this;
+            const dayDatas = $xeInput.computeDayDatas;
+            const firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+            return dayDatas.map((list) => {
+                const firstItem = list[0];
+                const item = {
+                    date: firstItem.date,
+                    isWeekNumber: true,
+                    isPrev: false,
+                    isCurrent: false,
+                    isNow: false,
+                    isNext: false,
+                    label: XEUtils.getYearWeek(firstItem.date, firstDayOfWeek)
+                };
+                return [item].concat(list);
+            });
+        },
+        computeHourList() {
+            const $xeInput = this;
+            const list = [];
+            const isDateTimeType = $xeInput.computeIsDateTimeType;
+            if (isDateTimeType) {
+                for (let index = 0; index < 24; index++) {
+                    list.push({
+                        value: index,
+                        label: ('' + index).padStart(2, '0'),
+                        disabled: false
+                    });
+                }
+            }
+            return list;
+        },
+        computeMinuteList() {
+            const $xeInput = this;
+            const list = [];
+            const isDateTimeType = $xeInput.computeIsDateTimeType;
+            if (isDateTimeType) {
+                for (let index = 0; index < 60; index++) {
+                    list.push({
+                        value: index,
+                        label: ('' + index).padStart(2, '0'),
+                        disabled: false
+                    });
+                }
+            }
+            return list;
+        },
+        computeHasTimeMinute() {
+            const $xeInput = this;
+            const dateValueFormat = $xeInput.computeDateValueFormat;
+            return !/HH/.test(dateValueFormat) || /mm/.test(dateValueFormat);
+        },
+        computeHasTimeSecond() {
+            const $xeInput = this;
+            const dateValueFormat = $xeInput.computeDateValueFormat;
+            return !/HH/.test(dateValueFormat) || /ss/.test(dateValueFormat);
+        },
+        computeSecondList() {
+            const $xeInput = this;
+            const minuteList = $xeInput.computeMinuteList;
+            return minuteList;
+        },
+        computeInputReadonly() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { type, editable, multiple, readonly } = props;
+            return readonly || multiple || !editable || type === 'week' || type === 'quarter';
+        },
+        computeInputType() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { type } = props;
+            const { showPwd } = reactData;
+            const isNumType = $xeInput.computeIsNumType;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const isPawdType = $xeInput.computeIsPawdType;
+            if (isDatePickerType || isNumType || (isPawdType && showPwd) || type === 'number') {
+                return 'text';
+            }
+            return type;
+        },
+        computeInpPlaceholder() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { placeholder } = props;
+            if (placeholder) {
+                return getFuncText(placeholder);
+            }
+            if (XEUtils.eqNull(placeholder)) {
+                const globalPlaceholder = getConfig().input.placeholder;
+                if (globalPlaceholder) {
+                    return getFuncText(globalPlaceholder);
+                }
+                return getI18n('vxe.base.pleaseInput');
+            }
+            return placeholder;
+        },
+        computeInpImmediate() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { type, immediate } = props;
+            return immediate || !(type === 'text' || type === 'number' || type === 'integer' || type === 'float');
+        },
+        computeNumValue() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { type } = props;
+            const { inputValue } = reactData;
+            const isNumType = $xeInput.computeIsNumType;
+            if (isNumType) {
+                return type === 'integer' ? XEUtils.toInteger(handleNumber(inputValue)) : XEUtils.toNumber(handleNumber(inputValue));
+            }
+            return 0;
+        },
+        computeIsDisabledSubtractNumber() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { min } = props;
+            const { inputValue } = reactData;
+            const isNumType = $xeInput.computeIsNumType;
+            const numValue = $xeInput.computeNumValue;
+            // 当有值时再进行判断
+            if ((inputValue || inputValue === 0) && isNumType && min !== null) {
+                return numValue <= XEUtils.toNumber(min);
+            }
+            return false;
+        },
+        computeIsDisabledAddNumber() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { max } = props;
+            const { inputValue } = reactData;
+            const isNumType = $xeInput.computeIsNumType;
+            const numValue = $xeInput.computeNumValue;
+            // 当有值时再进行判断
+            if ((inputValue || inputValue === 0) && isNumType && max !== null) {
+                return numValue >= XEUtils.toNumber(max);
+            }
+            return false;
+        } }),
+    methods: {
+        //
+        // Method
+        //
+        dispatchEvent(type, params, evnt) {
+            const $xeInput = this;
+            $xeInput.$emit(type, createEvent(evnt, { $input: $xeInput }, params));
+        },
+        emitModel(value) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { trim } = props;
+            const { _events } = $xeInput;
+            if (_events && _events.modelValue) {
+                $xeInput.$emit('modelValue', trim ? `${value || ''}`.trim() : value);
+            }
+            else {
+                $xeInput.$emit('model-value', trim ? `${value || ''}`.trim() : value);
+            }
+        },
+        focus() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const inputElem = $xeInput.$refs.refInputTarget;
+            reactData.isActivated = true;
+            inputElem.focus();
+            return $xeInput.$nextTick();
+        },
+        blur() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const inputElem = $xeInput.$refs.refInputTarget;
+            inputElem.blur();
+            reactData.isActivated = false;
+            return $xeInput.$nextTick();
+        },
+        select() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const inputElem = $xeInput.$refs.refInputTarget;
+            inputElem.select();
+            reactData.isActivated = false;
+            return $xeInput.$nextTick();
+        },
+        parseDate(value, format) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { type } = props;
+            if (type === 'time') {
+                return toStringTimeDate(value);
+            }
+            return XEUtils.toStringDate(value, format);
+        },
+        getNumberValue(val) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { type, exponential } = props;
+            const inpMaxLength = $xeInput.computeInpMaxLength;
+            const digitsValue = $xeInput.computeDigitsValue;
+            const restVal = (type === 'float' ? toFloatValueFixed(val, type, digitsValue, '') : XEUtils.toValueString(val));
+            if (exponential && (val === restVal || XEUtils.toValueString(val).toLowerCase() === XEUtils.toNumber(restVal).toExponential())) {
+                return val;
+            }
+            return restVal.slice(0, inpMaxLength);
+        },
+        triggerEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { inputValue } = reactData;
+            $xeInput.dispatchEvent(evnt.type, { value: inputValue }, evnt);
+        },
+        handleChange(value, evnt) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const $xeForm = $xeInput.$xeForm;
+            const formItemInfo = $xeInput.formItemInfo;
+            const $xeSelect = $xeInput.$xeSelect;
+            const $xeTreeSelect = $xeInput.$xeTreeSelect;
+            if (props.trim) {
+                value = `${value || ''}`.trim();
+            }
+            reactData.inputValue = value;
+            $xeInput.emitModel(value);
+            $xeInput.dispatchEvent('input', { value }, evnt);
+            if (XEUtils.toValueString(props.value) !== value) {
+                $xeInput.dispatchEvent('change', { value }, evnt);
+                if (!$xeSelect && !$xeTreeSelect) {
+                    // 自动更新校验状态
+                    if ($xeForm && formItemInfo) {
+                        $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+                    }
+                }
+            }
+        },
+        emitInputEvent(value, evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const inpImmediate = $xeInput.computeInpImmediate;
+            reactData.inputValue = value;
+            if (!isDatePickerType) {
+                if (inpImmediate) {
+                    $xeInput.handleChange(value, evnt);
+                }
+                else {
+                    $xeInput.dispatchEvent('input', { value }, evnt);
+                }
+            }
+        },
+        inputEvent(evnt) {
+            const $xeInput = this;
+            const inputElem = evnt.target;
+            const value = inputElem.value;
+            $xeInput.emitInputEvent(value, evnt);
+        },
+        changeEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const inpImmediate = $xeInput.computeInpImmediate;
+            if (!inpImmediate) {
+                $xeInput.triggerEvent(evnt);
+            }
+            $xeInput.dispatchEvent('lazy-change', { value: reactData.inputValue }, evnt);
+        },
+        blurEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const $xeForm = $xeInput.$xeForm;
+            const formItemInfo = $xeInput.formItemInfo;
+            const $xeSelect = $xeInput.$xeSelect;
+            const $xeTreeSelect = $xeInput.$xeTreeSelect;
+            const { inputValue } = reactData;
+            const value = inputValue;
+            const inpImmediate = $xeInput.computeInpImmediate;
+            if (!inpImmediate) {
+                $xeInput.handleChange(value, evnt);
+            }
+            $xeInput.afterCheckValue();
+            if (!reactData.visiblePanel) {
+                reactData.isActivated = false;
+            }
+            $xeInput.dispatchEvent('blur', { value }, evnt);
+            if (!$xeSelect && !$xeTreeSelect) {
+                // 自动更新校验状态
+                if ($xeForm && formItemInfo) {
+                    $xeForm.triggerItemEvent(evnt, formItemInfo.itemConfig.field, value);
+                }
+            }
+        },
+        focusEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { inputValue } = reactData;
+            const isNumType = $xeInput.computeIsNumType;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            reactData.isActivated = true;
+            if (isNumType) {
+                reactData.inputValue = eqEmptyValue(inputValue) ? '' : `${XEUtils.toNumber(inputValue)}`;
+            }
+            else if (isDatePickerType) {
+                $xeInput.datePickerOpenEvent(evnt);
+            }
+            $xeInput.triggerEvent(evnt);
+        },
+        clickPrefixEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const isDisabled = $xeInput.computeIsDisabled;
+            if (!isDisabled) {
+                const { inputValue } = reactData;
+                $xeInput.dispatchEvent('prefix-click', { value: inputValue }, evnt);
+            }
+        },
+        hidePanel() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const internalData = $xeInput.internalData;
+            return new Promise(resolve => {
+                reactData.visiblePanel = false;
+                internalData.hpTimeout = setTimeout(() => {
+                    reactData.isAniVisible = false;
+                    resolve();
+                }, 350);
+            });
+        },
+        clearValueEvent(evnt, value) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { type, autoFocus } = props;
+            const isNumType = $xeInput.computeIsNumType;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            if (isDatePickerType) {
+                $xeInput.hidePanel();
+            }
+            if (autoFocus || autoFocus === null) {
+                if (isNumType || ['text', 'search', 'password'].indexOf(type) > -1) {
+                    $xeInput.focus();
+                }
+            }
+            $xeInput.handleChange('', evnt);
+            $xeInput.dispatchEvent('clear', { value }, evnt);
+            $xeInput.dispatchEvent('lazy-change', { value }, evnt);
+        },
+        clickSuffixEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const isDisabled = $xeInput.computeIsDisabled;
+            if (!isDisabled) {
+                const { inputValue } = reactData;
+                $xeInput.dispatchEvent('suffix-click', { value: inputValue }, evnt);
+            }
+        },
+        dateParseValue(value) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { type } = props;
+            const dateLabelFormat = $xeInput.computeDateLabelFormat;
+            const dateValueFormat = $xeInput.computeDateValueFormat;
+            const firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+            let dValue = null;
+            let dLabel = '';
+            if (value) {
+                dValue = $xeInput.parseDate(value, dateValueFormat);
+            }
+            if (XEUtils.isValidDate(dValue)) {
+                dLabel = XEUtils.toDateString(dValue, dateLabelFormat, { firstDay: firstDayOfWeek });
+                // 周选择器，由于年份和第几周是冲突的行为，所以需要特殊处理，判断是否跨年，例如
+                // '2024-12-31' 'yyyy-MM-dd W' >> '2024-12-31 1'
+                // '2025-01-01' 'yyyy-MM-dd W' >> '2025-01-01 1'
+                if (dateLabelFormat && type === 'week') {
+                    const weekNum = XEUtils.getYearWeek(dValue, firstDayOfWeek);
+                    const weekDate = XEUtils.getWhatWeek(dValue, 0, weekNum === 1 ? ((6 + firstDayOfWeek) % 7) : firstDayOfWeek, firstDayOfWeek);
+                    const weekFullYear = weekDate.getFullYear();
+                    if (weekFullYear !== dValue.getFullYear()) {
+                        const yyIndex = dateLabelFormat.indexOf('yyyy');
+                        if (yyIndex > -1) {
+                            const yyNum = Number(dLabel.substring(yyIndex, yyIndex + 4));
+                            if (yyNum && !isNaN(yyNum)) {
+                                dLabel = dLabel.replace(`${yyNum}`, `${weekFullYear}`);
+                            }
+                        }
+                    }
+                }
+            }
+            else {
+                dValue = null;
+            }
+            reactData.datePanelValue = dValue;
+            reactData.datePanelLabel = dLabel;
+        },
+        /**
+         * 值变化时处理
+         */
+        changeValue() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const { inputValue } = reactData;
+            if (isDatePickerType) {
+                $xeInput.dateParseValue(inputValue);
+                reactData.inputValue = props.multiple ? $xeInput.computeDateMultipleLabel : reactData.datePanelLabel;
+            }
+        },
+        /**
+         * 检查初始值
+         */
+        initValue() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { type } = props;
+            const { inputValue } = reactData;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const digitsValue = $xeInput.computeDigitsValue;
+            if (isDatePickerType) {
+                $xeInput.changeValue();
+            }
+            else if (type === 'float') {
+                if (inputValue) {
+                    const validValue = toFloatValueFixed(inputValue, type, digitsValue, '');
+                    if (inputValue !== validValue) {
+                        $xeInput.handleChange(validValue, { type: 'init' });
+                    }
+                }
+            }
+        },
+        validMaxNum(num) {
+            const $xeInput = this;
+            const props = $xeInput;
+            return props.max === null || props.max === '' || XEUtils.toNumber(num) <= XEUtils.toNumber(props.max);
+        },
+        validMinNum(num) {
+            const $xeInput = this;
+            const props = $xeInput;
+            return props.min === null || props.min === '' || XEUtils.toNumber(num) >= XEUtils.toNumber(props.min);
+        },
+        dateRevert() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            reactData.inputValue = props.multiple ? $xeInput.computeDateMultipleLabel : reactData.datePanelLabel;
+        },
+        dateCheckMonth(date) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+            const weekNum = XEUtils.getYearWeek(date, firstDayOfWeek);
+            const weekStartDate = XEUtils.getWhatWeek(date, 0, firstDayOfWeek, firstDayOfWeek);
+            const month = XEUtils.getWhatMonth(weekNum === 1 ? XEUtils.getWhatDay(weekStartDate, 6) : date, 0, 'first');
+            if (!XEUtils.isEqual(month, reactData.selectMonth)) {
+                reactData.selectMonth = month;
+            }
+        },
+        dateChange(date) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { multiple } = props;
+            const { datetimePanelValue } = reactData;
+            const isDateTimeType = $xeInput.computeIsDateTimeType;
+            const dateValueFormat = $xeInput.computeDateValueFormat;
+            const firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+            if (props.type === 'week') {
+                const sWeek = XEUtils.toNumber(props.selectDay);
+                date = XEUtils.getWhatWeek(date, 0, sWeek, firstDayOfWeek);
+            }
+            else if (isDateTimeType) {
+                date.setHours(datetimePanelValue.getHours());
+                date.setMinutes(datetimePanelValue.getMinutes());
+                date.setSeconds(datetimePanelValue.getSeconds());
+            }
+            const inpVal = XEUtils.toDateString(date, dateValueFormat, { firstDay: firstDayOfWeek });
+            $xeInput.dateCheckMonth(date);
+            if (multiple) {
+                // 如果为多选
+                const dateMultipleValue = $xeInput.computeDateMultipleValue;
+                if (isDateTimeType) {
+                    // 如果是datetime特殊类型
+                    const dateListValue = [...$xeInput.computeDateListValue];
+                    const datetimeRest = [];
+                    const eqIndex = XEUtils.findIndexOf(dateListValue, val => XEUtils.isDateSame(date, val, 'yyyyMMdd'));
+                    if (eqIndex === -1) {
+                        dateListValue.push(date);
+                    }
+                    else {
+                        dateListValue.splice(eqIndex, 1);
+                    }
+                    dateListValue.forEach(item => {
+                        if (item) {
+                            item.setHours(datetimePanelValue.getHours());
+                            item.setMinutes(datetimePanelValue.getMinutes());
+                            item.setSeconds(datetimePanelValue.getSeconds());
+                            datetimeRest.push(item);
+                        }
+                    });
+                    $xeInput.handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
+                }
+                else {
+                    // 如果是日期类型
+                    if (dateMultipleValue.some(val => XEUtils.isEqual(val, inpVal))) {
+                        $xeInput.handleChange(dateMultipleValue.filter(val => !XEUtils.isEqual(val, inpVal)).join(','), { type: 'update' });
+                    }
+                    else {
+                        $xeInput.handleChange(dateMultipleValue.concat([inpVal]).join(','), { type: 'update' });
+                    }
+                }
+            }
+            else {
+                // 如果为单选
+                if (!XEUtils.isEqual(props.value, inpVal)) {
+                    $xeInput.handleChange(inpVal, { type: 'update' });
+                }
+            }
+        },
+        afterCheckValue() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { type, min, max, exponential } = props;
+            const { inputValue, datetimePanelValue } = reactData;
+            const isNumType = $xeInput.computeIsNumType;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const dateLabelFormat = $xeInput.computeDateLabelFormat;
+            const inputReadonly = $xeInput.computeInputReadonly;
+            if (!inputReadonly) {
+                if (isNumType) {
+                    if (inputValue) {
+                        const inpVal = `${handleNumber(inputValue)}`;
+                        if (inpVal) {
+                            let inpNumVal = type === 'integer' ? XEUtils.toInteger(inpVal) : XEUtils.toNumber(inpVal);
+                            if (!$xeInput.validMinNum(inpNumVal)) {
+                                inpNumVal = min;
+                            }
+                            else if (!$xeInput.validMaxNum(inpNumVal)) {
+                                inpNumVal = max;
+                            }
+                            if (exponential) {
+                                const inpStringVal = XEUtils.toValueString(inputValue).toLowerCase();
+                                if (inpStringVal === XEUtils.toNumber(inpNumVal).toExponential()) {
+                                    inpNumVal = inpStringVal;
+                                }
+                            }
+                            $xeInput.handleChange($xeInput.getNumberValue(inpNumVal), { type: 'check' });
+                        }
+                        else {
+                            // 输入错误字符，清空
+                            let inpValue = '';
+                            if (min || min === 0) {
+                                inpValue = `${min}`;
+                            }
+                            $xeInput.handleChange(inpValue, { type: 'check' });
+                        }
+                    }
+                }
+                else if (isDatePickerType) {
+                    if (inputValue) {
+                        let inpDateVal = $xeInput.parseDate(inputValue, dateLabelFormat);
+                        if (XEUtils.isValidDate(inpDateVal)) {
+                            if (type === 'time') {
+                                inpDateVal = XEUtils.toDateString(inpDateVal, dateLabelFormat);
+                                if (inputValue !== inpDateVal) {
+                                    $xeInput.handleChange(inpDateVal, { type: 'check' });
+                                }
+                                reactData.inputValue = inpDateVal;
+                            }
+                            else {
+                                let isChange = false;
+                                const firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+                                if (type === 'datetime') {
+                                    const dateValue = $xeInput.computeDateValue;
+                                    if (inputValue !== XEUtils.toDateString(dateValue, dateLabelFormat) || inputValue !== XEUtils.toDateString(inpDateVal, dateLabelFormat)) {
+                                        isChange = true;
+                                        datetimePanelValue.setHours(inpDateVal.getHours());
+                                        datetimePanelValue.setMinutes(inpDateVal.getMinutes());
+                                        datetimePanelValue.setSeconds(inpDateVal.getSeconds());
+                                    }
+                                }
+                                else {
+                                    isChange = true;
+                                }
+                                reactData.inputValue = XEUtils.toDateString(inpDateVal, dateLabelFormat, { firstDay: firstDayOfWeek });
+                                if (isChange) {
+                                    $xeInput.dateChange(inpDateVal);
+                                }
+                            }
+                        }
+                        else {
+                            $xeInput.dateRevert();
+                        }
+                    }
+                    else {
+                        $xeInput.handleChange('', { type: 'check' });
+                    }
+                }
+            }
+        },
+        // 密码
+        passwordToggleEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { showPwd } = reactData;
+            const isDisabled = $xeInput.computeIsDisabled;
+            const inputReadonly = $xeInput.computeInputReadonly;
+            if (!isDisabled && !inputReadonly) {
+                reactData.showPwd = !showPwd;
+            }
+            $xeInput.dispatchEvent('toggle-visible', { visible: reactData.showPwd }, evnt);
+        },
+        // 搜索
+        searchEvent(evnt) {
+            const $xeInput = this;
+            $xeInput.dispatchEvent('search-click', {}, evnt);
+        },
+        // 数值
+        numberChange(isPlus, evnt) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { min, max, type } = props;
+            const { inputValue } = reactData;
+            const stepValue = $xeInput.computeStepValue;
+            const numValue = type === 'integer' ? XEUtils.toInteger(handleNumber(inputValue)) : XEUtils.toNumber(handleNumber(inputValue));
+            const newValue = isPlus ? XEUtils.add(numValue, stepValue) : XEUtils.subtract(numValue, stepValue);
+            let restNum;
+            if (!$xeInput.validMinNum(newValue)) {
+                restNum = min;
+            }
+            else if (!$xeInput.validMaxNum(newValue)) {
+                restNum = max;
+            }
+            else {
+                restNum = newValue;
+            }
+            $xeInput.emitInputEvent($xeInput.getNumberValue(restNum), evnt);
+        },
+        numberNextEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const isDisabled = $xeInput.computeIsDisabled;
+            const inputReadonly = $xeInput.computeInputReadonly;
+            const isDisabledSubtractNumber = $xeInput.computeIsDisabledSubtractNumber;
+            $xeInput.numberStopDown();
+            if (!isDisabled && !inputReadonly && !isDisabledSubtractNumber) {
+                $xeInput.numberChange(false, evnt);
+            }
+            $xeInput.dispatchEvent('next-number', { value: reactData.inputValue }, evnt);
+        },
+        numberDownNextEvent(evnt) {
+            const $xeInput = this;
+            const internalData = $xeInput.internalData;
+            internalData.dnTimeout = setTimeout(() => {
+                $xeInput.numberNextEvent(evnt);
+                $xeInput.numberDownNextEvent(evnt);
+            }, 60);
+        },
+        numberPrevEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const isDisabled = $xeInput.computeIsDisabled;
+            const inputReadonly = $xeInput.computeInputReadonly;
+            const isDisabledAddNumber = $xeInput.computeIsDisabledAddNumber;
+            $xeInput.numberStopDown();
+            if (!isDisabled && !inputReadonly && !isDisabledAddNumber) {
+                $xeInput.numberChange(true, evnt);
+            }
+            $xeInput.dispatchEvent('prev-number', { value: reactData.inputValue }, evnt);
+        },
+        numberKeydownEvent(evnt) {
+            const $xeInput = this;
+            const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+            const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+            if (isUpArrow || isDwArrow) {
+                evnt.preventDefault();
+                if (isUpArrow) {
+                    $xeInput.numberPrevEvent(evnt);
+                }
+                else {
+                    $xeInput.numberNextEvent(evnt);
+                }
+            }
+        },
+        keydownEvent(evnt) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { type, exponential, controls } = props;
+            const isNumType = $xeInput.computeIsNumType;
+            if (isNumType) {
+                const isControlKey = hasControlKey(evnt);
+                const isShiftKey = evnt.shiftKey;
+                const isAltKey = evnt.altKey;
+                const keyCode = evnt.keyCode;
+                const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
+                const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+                const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+                if (!isControlKey && !isShiftKey && !isAltKey) {
+                    if (globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.SPACEBAR) || (type === 'integer' && keyCode === 110) || ((!exponential || keyCode !== 69) && (keyCode >= 65 && keyCode <= 90)) || (keyCode >= 186 && keyCode <= 188) || keyCode >= 191) {
+                        evnt.preventDefault();
+                    }
+                }
+                if (isEsc) {
+                    $xeInput.afterCheckValue();
+                }
+                else if (isUpArrow || isDwArrow) {
+                    if (controls) {
+                        $xeInput.numberKeydownEvent(evnt);
+                    }
+                }
+            }
+            $xeInput.triggerEvent(evnt);
+        },
+        keyupEvent(evnt) {
+            const $xeInput = this;
+            $xeInput.triggerEvent(evnt);
+        },
+        // 数值
+        numberStopDown() {
+            const $xeInput = this;
+            const internalData = $xeInput.internalData;
+            const { dnTimeout } = internalData;
+            if (dnTimeout) {
+                clearTimeout(dnTimeout);
+                internalData.dnTimeout = undefined;
+            }
+        },
+        numberDownPrevEvent(evnt) {
+            const $xeInput = this;
+            const internalData = $xeInput.internalData;
+            internalData.dnTimeout = setTimeout(() => {
+                $xeInput.numberPrevEvent(evnt);
+                $xeInput.numberDownPrevEvent(evnt);
+            }, 60);
+        },
+        numberMousedownEvent(evnt) {
+            const $xeInput = this;
+            const internalData = $xeInput.internalData;
+            $xeInput.numberStopDown();
+            if (evnt.button === 0) {
+                const isPrevNumber = hasClass(evnt.currentTarget, 'is--prev');
+                if (isPrevNumber) {
+                    $xeInput.numberPrevEvent(evnt);
+                }
+                else {
+                    $xeInput.numberNextEvent(evnt);
+                }
+                internalData.dnTimeout = setTimeout(() => {
+                    if (isPrevNumber) {
+                        $xeInput.numberDownPrevEvent(evnt);
+                    }
+                    else {
+                        $xeInput.numberDownNextEvent(evnt);
+                    }
+                }, 500);
+            }
+        },
+        wheelEvent(evnt) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const isNumType = $xeInput.computeIsNumType;
+            if (isNumType && props.controls) {
+                if (reactData.isActivated) {
+                    const delta = evnt.deltaY;
+                    if (delta > 0) {
+                        $xeInput.numberNextEvent(evnt);
+                    }
+                    else if (delta < 0) {
+                        $xeInput.numberPrevEvent(evnt);
+                    }
+                    evnt.preventDefault();
+                }
+            }
+            $xeInput.triggerEvent(evnt);
+        },
+        // 日期
+        dateMonthHandle(date, offsetMonth) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+            const weekNum = XEUtils.getYearWeek(date, firstDayOfWeek);
+            const weekStartDate = XEUtils.getWhatWeek(date, 0, firstDayOfWeek, firstDayOfWeek);
+            const month = XEUtils.getWhatMonth(weekNum === 1 ? XEUtils.getWhatDay(weekStartDate, 6) : date, offsetMonth, 'first');
+            reactData.selectMonth = month;
+        },
+        dateNowHandle() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const currentDate = XEUtils.getWhatDay(Date.now(), 0, 'first');
+            reactData.currentDate = currentDate;
+            $xeInput.dateMonthHandle(currentDate, 0);
+        },
+        dateToggleYearTypeEvent() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            reactData.datePanelType = 'year';
+        },
+        dateToggleMonthTypeEvent() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            let { datePanelType } = reactData;
+            if (datePanelType === 'month' || datePanelType === 'quarter') {
+                datePanelType = 'year';
+            }
+            else {
+                datePanelType = 'month';
+            }
+            reactData.datePanelType = datePanelType;
+        },
+        datePrevEvent(evnt) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const internalData = $xeInput.internalData;
+            const { type } = props;
+            const { datePanelType, selectMonth, inputValue } = reactData;
+            const { yearSize } = internalData;
+            const value = inputValue;
+            const isDisabledPrevDateBtn = $xeInput.computeIsDisabledPrevDateBtn;
+            if (!isDisabledPrevDateBtn) {
+                let viewDate;
+                if (type === 'year') {
+                    viewDate = XEUtils.getWhatYear(selectMonth, -yearSize, 'first');
+                }
+                else if (type === 'month' || type === 'quarter') {
+                    if (datePanelType === 'year') {
+                        viewDate = XEUtils.getWhatYear(selectMonth, -yearSize, 'first');
+                    }
+                    else {
+                        viewDate = XEUtils.getWhatYear(selectMonth, -1, 'first');
+                    }
+                }
+                else {
+                    if (datePanelType === 'year') {
+                        viewDate = XEUtils.getWhatYear(selectMonth, -yearSize, 'first');
+                    }
+                    else if (datePanelType === 'month') {
+                        viewDate = XEUtils.getWhatYear(selectMonth, -1, 'first');
+                    }
+                    else {
+                        viewDate = XEUtils.getWhatMonth(selectMonth, -1, 'first');
+                    }
+                }
+                reactData.selectMonth = viewDate;
+                $xeInput.dispatchEvent('date-prev', { viewType: datePanelType, viewDate, value, type }, evnt);
+            }
+        },
+        dateTodayMonthEvent(evnt) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            $xeInput.dateNowHandle();
+            if (!props.multiple) {
+                $xeInput.dateChange(reactData.currentDate);
+                $xeInput.hidePanel();
+            }
+            $xeInput.dispatchEvent('date-today', { type: props.type }, evnt);
+        },
+        dateNextEvent(evnt) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const internalData = $xeInput.internalData;
+            const { type } = props;
+            const { datePanelType, selectMonth, inputValue } = reactData;
+            const { yearSize } = internalData;
+            const value = inputValue;
+            const isDisabledNextDateBtn = $xeInput.computeIsDisabledNextDateBtn;
+            if (!isDisabledNextDateBtn) {
+                let viewDate;
+                if (type === 'year') {
+                    viewDate = XEUtils.getWhatYear(selectMonth, yearSize, 'first');
+                }
+                else if (type === 'month' || type === 'quarter') {
+                    if (datePanelType === 'year') {
+                        viewDate = XEUtils.getWhatYear(selectMonth, yearSize, 'first');
+                    }
+                    else {
+                        viewDate = XEUtils.getWhatYear(selectMonth, 1, 'first');
+                    }
+                }
+                else {
+                    if (datePanelType === 'year') {
+                        viewDate = XEUtils.getWhatYear(selectMonth, yearSize, 'first');
+                    }
+                    else if (datePanelType === 'month') {
+                        viewDate = XEUtils.getWhatYear(selectMonth, 1, 'first');
+                    }
+                    else {
+                        viewDate = XEUtils.getWhatMonth(selectMonth, 1, 'first');
+                    }
+                }
+                reactData.selectMonth = viewDate;
+                $xeInput.dispatchEvent('date-next', { viewType: datePanelType, viewDate, value, type }, evnt);
+            }
+        },
+        isDateDisabled(item) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { disabledMethod } = props;
+            const { datePanelType } = reactData;
+            const dateStartTime = $xeInput.computeDateStartTime;
+            const dateEndTime = $xeInput.computeDateEndTime;
+            const { date } = item;
+            if (dateStartTime && dateStartTime.getTime() > date.getTime()) {
+                return true;
+            }
+            if (dateEndTime && dateEndTime.getTime() < date.getTime()) {
+                return true;
+            }
+            if (disabledMethod) {
+                return disabledMethod({ type: datePanelType, viewType: datePanelType, date, $input: $xeInput });
+            }
+            return false;
+        },
+        dateSelectItem(date) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { type, multiple } = props;
+            const { datePanelType } = reactData;
+            if (type === 'month') {
+                if (datePanelType === 'year') {
+                    reactData.datePanelType = 'month';
+                    $xeInput.dateCheckMonth(date);
+                }
+                else {
+                    $xeInput.dateChange(date);
+                    if (!multiple) {
+                        $xeInput.hidePanel();
+                    }
+                }
+            }
+            else if (type === 'year') {
+                $xeInput.dateChange(date);
+                if (!multiple) {
+                    $xeInput.hidePanel();
+                }
+            }
+            else if (type === 'quarter') {
+                if (datePanelType === 'year') {
+                    reactData.datePanelType = 'quarter';
+                    $xeInput.dateCheckMonth(date);
+                }
+                else {
+                    $xeInput.dateChange(date);
+                    if (!multiple) {
+                        $xeInput.hidePanel();
+                    }
+                }
+            }
+            else {
+                if (datePanelType === 'month') {
+                    reactData.datePanelType = type === 'week' ? type : 'day';
+                    $xeInput.dateCheckMonth(date);
+                }
+                else if (datePanelType === 'year') {
+                    reactData.datePanelType = 'month';
+                    $xeInput.dateCheckMonth(date);
+                }
+                else {
+                    $xeInput.dateChange(date);
+                    if (type === 'datetime') {
+                        // 日期带时间
+                    }
+                    else {
+                        if (!multiple) {
+                            $xeInput.hidePanel();
+                        }
+                    }
+                }
+            }
+        },
+        dateSelectEvent(item) {
+            const $xeInput = this;
+            if (!$xeInput.isDateDisabled(item)) {
+                $xeInput.dateSelectItem(item.date);
+            }
+        },
+        dateMoveDay(offsetDay) {
+            const $xeInput = this;
+            if (!$xeInput.isDateDisabled({ date: offsetDay })) {
+                const dayList = $xeInput.computeDayList;
+                if (!dayList.some((item) => XEUtils.isDateSame(item.date, offsetDay, 'yyyyMMdd'))) {
+                    $xeInput.dateCheckMonth(offsetDay);
+                }
+                $xeInput.dateParseValue(offsetDay);
+            }
+        },
+        dateMoveYear(offsetYear) {
+            const $xeInput = this;
+            if (!$xeInput.isDateDisabled({ date: offsetYear })) {
+                const yearList = $xeInput.computeYearList;
+                if (!yearList.some((item) => XEUtils.isDateSame(item.date, offsetYear, 'yyyy'))) {
+                    $xeInput.dateCheckMonth(offsetYear);
+                }
+                $xeInput.dateParseValue(offsetYear);
+            }
+        },
+        dateMoveQuarter(offsetQuarter) {
+            const $xeInput = this;
+            if (!$xeInput.isDateDisabled({ date: offsetQuarter })) {
+                const quarterList = $xeInput.computeQuarterList;
+                if (!quarterList.some((item) => XEUtils.isDateSame(item.date, offsetQuarter, 'yyyyq'))) {
+                    $xeInput.dateCheckMonth(offsetQuarter);
+                }
+                $xeInput.dateParseValue(offsetQuarter);
+            }
+        },
+        dateMoveMonth(offsetMonth) {
+            const $xeInput = this;
+            if (!$xeInput.isDateDisabled({ date: offsetMonth })) {
+                const monthList = $xeInput.computeMonthList;
+                if (!monthList.some((item) => XEUtils.isDateSame(item.date, offsetMonth, 'yyyyMM'))) {
+                    $xeInput.dateCheckMonth(offsetMonth);
+                }
+                $xeInput.dateParseValue(offsetMonth);
+            }
+        },
+        dateMouseenterEvent(item) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            if (!$xeInput.isDateDisabled(item)) {
+                const { datePanelType } = reactData;
+                if (datePanelType === 'month') {
+                    $xeInput.dateMoveMonth(item.date);
+                }
+                else if (datePanelType === 'quarter') {
+                    $xeInput.dateMoveQuarter(item.date);
+                }
+                else if (datePanelType === 'year') {
+                    $xeInput.dateMoveYear(item.date);
+                }
+                else {
+                    $xeInput.dateMoveDay(item.date);
+                }
+            }
+        },
+        updateTimePos(liElem) {
+            if (liElem) {
+                const height = liElem.offsetHeight;
+                const ulElem = liElem.parentNode;
+                ulElem.scrollTop = liElem.offsetTop - height * 4;
+            }
+        },
+        dateTimeChangeEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            reactData.datetimePanelValue = new Date(reactData.datetimePanelValue.getTime());
+            $xeInput.updateTimePos(evnt.currentTarget);
+        },
+        dateHourEvent(evnt, item) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            reactData.datetimePanelValue.setHours(item.value);
+            $xeInput.dateTimeChangeEvent(evnt);
+        },
+        dateConfirmEvent() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { multiple } = props;
+            const { datetimePanelValue } = reactData;
+            const dateValue = $xeInput.computeDateValue;
+            const isDateTimeType = $xeInput.computeIsDateTimeType;
+            if (isDateTimeType) {
+                const dateValueFormat = $xeInput.computeDateValueFormat;
+                if (multiple) {
+                    // 如果为多选
+                    const dateMultipleValue = $xeInput.computeDateMultipleValue;
+                    if (isDateTimeType) {
+                        // 如果是datetime特殊类型
+                        const dateListValue = [...$xeInput.computeDateListValue];
+                        const datetimeRest = [];
+                        dateListValue.forEach(item => {
+                            if (item) {
+                                item.setHours(datetimePanelValue.getHours());
+                                item.setMinutes(datetimePanelValue.getMinutes());
+                                item.setSeconds(datetimePanelValue.getSeconds());
+                                datetimeRest.push(item);
+                            }
+                        });
+                        $xeInput.handleChange(datetimeRest.map(date => XEUtils.toDateString(date, dateValueFormat)).join(','), { type: 'update' });
+                    }
+                    else {
+                        // 如果是日期类型
+                        $xeInput.handleChange(dateMultipleValue.join(','), { type: 'update' });
+                    }
+                }
+                else {
+                    $xeInput.dateChange(dateValue || reactData.currentDate);
+                }
+            }
+            $xeInput.hidePanel();
+        },
+        dateMinuteEvent(evnt, item) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            reactData.datetimePanelValue.setMinutes(item.value);
+            $xeInput.dateTimeChangeEvent(evnt);
+        },
+        dateSecondEvent(evnt, item) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            reactData.datetimePanelValue.setSeconds(item.value);
+            $xeInput.dateTimeChangeEvent(evnt);
+        },
+        dateOffsetEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { isActivated, datePanelValue, datePanelType } = reactData;
+            if (isActivated) {
+                evnt.preventDefault();
+                const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
+                const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+                const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+                const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+                if (datePanelType === 'year') {
+                    let offsetYear = XEUtils.getWhatYear(datePanelValue || Date.now(), 0, 'first');
+                    if (isLeftArrow) {
+                        offsetYear = XEUtils.getWhatYear(offsetYear, -1);
+                    }
+                    else if (isUpArrow) {
+                        offsetYear = XEUtils.getWhatYear(offsetYear, -4);
+                    }
+                    else if (isRightArrow) {
+                        offsetYear = XEUtils.getWhatYear(offsetYear, 1);
+                    }
+                    else if (isDwArrow) {
+                        offsetYear = XEUtils.getWhatYear(offsetYear, 4);
+                    }
+                    $xeInput.dateMoveYear(offsetYear);
+                }
+                else if (datePanelType === 'quarter') {
+                    let offsetQuarter = XEUtils.getWhatQuarter(datePanelValue || Date.now(), 0, 'first');
+                    if (isLeftArrow) {
+                        offsetQuarter = XEUtils.getWhatQuarter(offsetQuarter, -1);
+                    }
+                    else if (isUpArrow) {
+                        offsetQuarter = XEUtils.getWhatQuarter(offsetQuarter, -2);
+                    }
+                    else if (isRightArrow) {
+                        offsetQuarter = XEUtils.getWhatQuarter(offsetQuarter, 1);
+                    }
+                    else if (isDwArrow) {
+                        offsetQuarter = XEUtils.getWhatQuarter(offsetQuarter, 2);
+                    }
+                    $xeInput.dateMoveQuarter(offsetQuarter);
+                }
+                else if (datePanelType === 'month') {
+                    let offsetMonth = XEUtils.getWhatMonth(datePanelValue || Date.now(), 0, 'first');
+                    if (isLeftArrow) {
+                        offsetMonth = XEUtils.getWhatMonth(offsetMonth, -1);
+                    }
+                    else if (isUpArrow) {
+                        offsetMonth = XEUtils.getWhatMonth(offsetMonth, -4);
+                    }
+                    else if (isRightArrow) {
+                        offsetMonth = XEUtils.getWhatMonth(offsetMonth, 1);
+                    }
+                    else if (isDwArrow) {
+                        offsetMonth = XEUtils.getWhatMonth(offsetMonth, 4);
+                    }
+                    $xeInput.dateMoveMonth(offsetMonth);
+                }
+                else {
+                    let offsetDay = datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
+                    const firstDayOfWeek = $xeInput.computeFirstDayOfWeek;
+                    if (isLeftArrow) {
+                        offsetDay = XEUtils.getWhatDay(offsetDay, -1);
+                    }
+                    else if (isUpArrow) {
+                        offsetDay = XEUtils.getWhatWeek(offsetDay, -1, firstDayOfWeek);
+                    }
+                    else if (isRightArrow) {
+                        offsetDay = XEUtils.getWhatDay(offsetDay, 1);
+                    }
+                    else if (isDwArrow) {
+                        offsetDay = XEUtils.getWhatWeek(offsetDay, 1, firstDayOfWeek);
+                    }
+                    $xeInput.dateMoveDay(offsetDay);
+                }
+            }
+        },
+        datePgOffsetEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { isActivated } = reactData;
+            if (isActivated) {
+                const isPgUp = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_UP);
+                evnt.preventDefault();
+                if (isPgUp) {
+                    $xeInput.datePrevEvent(evnt);
+                }
+                else {
+                    $xeInput.dateNextEvent(evnt);
+                }
+            }
+        },
+        dateOpenPanel() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { type } = props;
+            const isDateTimeType = $xeInput.computeIsDateTimeType;
+            const dateValue = $xeInput.computeDateValue;
+            if (['year', 'quarter', 'month', 'week'].indexOf(type) > -1) {
+                reactData.datePanelType = type;
+            }
+            else {
+                reactData.datePanelType = 'day';
+            }
+            reactData.currentDate = XEUtils.getWhatDay(Date.now(), 0, 'first');
+            if (dateValue) {
+                $xeInput.dateMonthHandle(dateValue, 0);
+                $xeInput.dateParseValue(dateValue);
+            }
+            else {
+                $xeInput.dateNowHandle();
+            }
+            if (isDateTimeType) {
+                reactData.datetimePanelValue = reactData.datePanelValue || XEUtils.getWhatDay(Date.now(), 0, 'first');
+                $xeInput.$nextTick(() => {
+                    const timeBodyElem = $xeInput.$refs.refInputTimeBody;
+                    XEUtils.arrayEach(timeBodyElem.querySelectorAll('li.is--selected'), (elem) => {
+                        $xeInput.updateTimePos(elem);
+                    });
+                });
+            }
+        },
+        // 弹出面板
+        updateZindex() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            if (reactData.panelIndex < getLastZIndex()) {
+                reactData.panelIndex = nextZIndex();
+            }
+        },
+        updatePlacement() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            return $xeInput.$nextTick().then(() => {
+                const { placement } = props;
+                const { panelIndex } = reactData;
+                const targetElem = $xeInput.$refs.refInputTarget;
+                const panelElem = $xeInput.$refs.refInputPanel;
+                const btnTransfer = $xeInput.computeBtnTransfer;
+                if (targetElem && panelElem) {
+                    const targetHeight = targetElem.offsetHeight;
+                    const targetWidth = targetElem.offsetWidth;
+                    const panelHeight = panelElem.offsetHeight;
+                    const panelWidth = panelElem.offsetWidth;
+                    const marginSize = 5;
+                    const panelStyle = {
+                        zIndex: panelIndex
+                    };
+                    const { boundingTop, boundingLeft, visibleHeight, visibleWidth } = getAbsolutePos(targetElem);
+                    let panelPlacement = 'bottom';
+                    if (btnTransfer) {
+                        let left = boundingLeft;
+                        let top = boundingTop + targetHeight;
+                        if (placement === 'top') {
+                            panelPlacement = 'top';
+                            top = boundingTop - panelHeight;
+                        }
+                        else if (!placement) {
+                            // 如果下面不够放，则向上
+                            if (top + panelHeight + marginSize > visibleHeight) {
+                                panelPlacement = 'top';
+                                top = boundingTop - panelHeight;
+                            }
+                            // 如果上面不够放，则向下（优先）
+                            if (top < marginSize) {
+                                panelPlacement = 'bottom';
+                                top = boundingTop + targetHeight;
+                            }
+                        }
+                        // 如果溢出右边
+                        if (left + panelWidth + marginSize > visibleWidth) {
+                            left -= left + panelWidth + marginSize - visibleWidth;
+                        }
+                        // 如果溢出左边
+                        if (left < marginSize) {
+                            left = marginSize;
+                        }
+                        Object.assign(panelStyle, {
+                            left: `${left}px`,
+                            top: `${top}px`,
+                            minWidth: `${targetWidth}px`
+                        });
+                    }
+                    else {
+                        if (placement === 'top') {
+                            panelPlacement = 'top';
+                            panelStyle.bottom = `${targetHeight}px`;
+                        }
+                        else if (!placement) {
+                            // 如果下面不够放，则向上
+                            panelStyle.top = `${targetHeight}px`;
+                            if (boundingTop + targetHeight + panelHeight > visibleHeight) {
+                                // 如果上面不够放，则向下（优先）
+                                if (boundingTop - targetHeight - panelHeight > marginSize) {
+                                    panelPlacement = 'top';
+                                    panelStyle.top = '';
+                                    panelStyle.bottom = `${targetHeight}px`;
+                                }
+                            }
+                        }
+                    }
+                    reactData.panelStyle = panelStyle;
+                    reactData.panelPlacement = panelPlacement;
+                    return $xeInput.$nextTick();
+                }
+            });
+        },
+        showPanel() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const internalData = $xeInput.internalData;
+            const { visiblePanel } = reactData;
+            const { hpTimeout } = internalData;
+            const isDisabled = $xeInput.computeIsDisabled;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const btnTransfer = $xeInput.computeBtnTransfer;
+            if (!isDisabled && !visiblePanel) {
+                const panelElem = $xeInput.$refs.refInputPanel;
+                if (!reactData.initialized) {
+                    reactData.initialized = true;
+                    if (btnTransfer) {
+                        if (panelElem) {
+                            document.body.appendChild(panelElem);
+                        }
+                    }
+                }
+                if (hpTimeout) {
+                    clearTimeout(hpTimeout);
+                    internalData.hpTimeout = undefined;
+                }
+                reactData.isActivated = true;
+                reactData.isAniVisible = true;
+                if (isDatePickerType) {
+                    $xeInput.dateOpenPanel();
+                }
+                setTimeout(() => {
+                    reactData.visiblePanel = true;
+                }, 10);
+                $xeInput.updateZindex();
+                return $xeInput.updatePlacement();
+            }
+            return $xeInput.$nextTick();
+        },
+        datePickerOpenEvent(evnt) {
+            const $xeInput = this;
+            const inputReadonly = $xeInput.computeInputReadonly;
+            if (!inputReadonly) {
+                evnt.preventDefault();
+                $xeInput.showPanel();
+            }
+        },
+        clickEvent(evnt) {
+            const $xeInput = this;
+            $xeInput.triggerEvent(evnt);
+        },
+        handleGlobalMousedownEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { visiblePanel, isActivated } = reactData;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const el = $xeInput.$refs.refElem;
+            const panelWrapperElem = $xeInput.$refs.refPanelWrapper;
+            const isDisabled = $xeInput.computeIsDisabled;
+            if (!isDisabled && isActivated) {
+                reactData.isActivated = getEventTargetNode(evnt, el).flag || getEventTargetNode(evnt, panelWrapperElem).flag;
+                if (!reactData.isActivated) {
+                    // 如果是日期类型
+                    if (isDatePickerType) {
+                        if (visiblePanel) {
+                            $xeInput.hidePanel();
+                            $xeInput.afterCheckValue();
+                        }
+                    }
+                    else {
+                        $xeInput.afterCheckValue();
+                    }
+                }
+            }
+        },
+        handleGlobalKeydownEvent(evnt) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { clearable } = props;
+            const { visiblePanel } = reactData;
+            const isDisabled = $xeInput.computeIsDisabled;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            if (!isDisabled) {
+                const isTab = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.TAB);
+                const isDel = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.DELETE);
+                const isEsc = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ESCAPE);
+                const isEnter = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ENTER);
+                const isLeftArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_LEFT);
+                const isUpArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_UP);
+                const isRightArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_RIGHT);
+                const isDwArrow = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.ARROW_DOWN);
+                const isPgUp = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_UP);
+                const isPgDn = globalEvents.hasKey(evnt, GLOBAL_EVENT_KEYS.PAGE_DOWN);
+                const operArrow = isLeftArrow || isUpArrow || isRightArrow || isDwArrow;
+                let isActivated = reactData.isActivated;
+                if (isTab) {
+                    if (isActivated) {
+                        $xeInput.afterCheckValue();
+                    }
+                    isActivated = false;
+                    reactData.isActivated = isActivated;
+                }
+                else if (operArrow) {
+                    if (isDatePickerType) {
+                        if (isActivated) {
+                            if (visiblePanel) {
+                                $xeInput.dateOffsetEvent(evnt);
+                            }
+                            else if (isUpArrow || isDwArrow) {
+                                $xeInput.datePickerOpenEvent(evnt);
+                            }
+                        }
+                    }
+                }
+                else if (isEnter) {
+                    if (isDatePickerType) {
+                        if (visiblePanel) {
+                            if (reactData.datePanelValue) {
+                                $xeInput.dateSelectItem(reactData.datePanelValue);
+                            }
+                            else {
+                                $xeInput.hidePanel();
+                            }
+                        }
+                        else if (isActivated) {
+                            $xeInput.datePickerOpenEvent(evnt);
+                        }
+                    }
+                }
+                else if (isPgUp || isPgDn) {
+                    if (isDatePickerType) {
+                        if (isActivated) {
+                            $xeInput.datePgOffsetEvent(evnt);
+                        }
+                    }
+                }
+                if (isTab || isEsc) {
+                    if (visiblePanel) {
+                        $xeInput.hidePanel();
+                    }
+                }
+                else if (isDel && clearable) {
+                    if (isActivated) {
+                        $xeInput.clearValueEvent(evnt, null);
+                    }
+                }
+            }
+        },
+        handleGlobalMousewheelEvent(evnt) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { visiblePanel } = reactData;
+            const isDisabled = $xeInput.computeIsDisabled;
+            if (!isDisabled) {
+                if (visiblePanel) {
+                    const panelWrapperElem = $xeInput.$refs.refPanelWrapper;
+                    if (getEventTargetNode(evnt, panelWrapperElem).flag) {
+                        $xeInput.updatePlacement();
+                    }
+                    else {
+                        $xeInput.hidePanel();
+                        $xeInput.afterCheckValue();
+                    }
+                }
+            }
+        },
+        handleGlobalBlurEvent() {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { isActivated, visiblePanel } = reactData;
+            if (visiblePanel) {
+                $xeInput.hidePanel();
+            }
+            if (isActivated) {
+                reactData.isActivated = false;
+            }
+            if (isActivated) {
+                $xeInput.afterCheckValue();
+                const inputElem = $xeInput.$refs.refInputTarget;
+                if (inputElem) {
+                    inputElem.blur();
+                }
+            }
+        },
+        //
+        // Render
+        //
+        renderDateLabel(h, item, label) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { festivalMethod } = props;
+            if (festivalMethod) {
+                const { datePanelType } = reactData;
+                const festivalRest = festivalMethod({ type: datePanelType, viewType: datePanelType, date: item.date, $input: $xeInput });
+                const festivalItem = festivalRest ? (XEUtils.isString(festivalRest) ? { label: festivalRest } : festivalRest) : {};
+                const extraItem = festivalItem.extra ? (XEUtils.isString(festivalItem.extra) ? { label: festivalItem.extra } : festivalItem.extra) : null;
+                const labels = [
+                    h('span', {
+                        class: ['vxe-input--date-label', {
+                                'is-notice': festivalItem.notice
+                            }]
+                    }, extraItem && extraItem.label
+                        ? [
+                            h('span', `${label || ''}`),
+                            h('span', {
+                                class: ['vxe-input--date-label--extra', extraItem.important ? 'is-important' : '', extraItem.className],
+                                style: extraItem.style
+                            }, XEUtils.toValueString(extraItem.label))
+                        ]
+                        : [`${label || ''}`])
+                ];
+                const festivalLabel = festivalItem.label;
+                if (festivalLabel) {
+                    // 默认最多支持3个节日重叠
+                    const festivalLabels = XEUtils.toValueString(festivalLabel).split(',');
+                    labels.push(h('span', {
+                        class: ['vxe-input--date-festival', festivalItem.important ? 'is-important' : '', festivalItem.className],
+                        style: festivalItem.style
+                    }, [
+                        festivalLabels.length > 1
+                            ? h('span', {
+                                class: ['vxe-input--date-festival--overlap', `overlap--${festivalLabels.length}`]
+                            }, festivalLabels.map(label => h('span', label.substring(0, 3))))
+                            : h('span', {
+                                class: 'vxe-input--date-festival--label'
+                            }, festivalLabels[0].substring(0, 3))
+                    ]));
+                }
+                return labels;
+            }
+            return [`${label || ''}`];
+        },
+        renderDateDayTable(h) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { multiple } = props;
+            const { datePanelType, datePanelValue } = reactData;
+            const dateValue = $xeInput.computeDateValue;
+            const dateHeaders = $xeInput.computeDateHeaders;
+            const dayDatas = $xeInput.computeDayDatas;
+            const dateListValue = $xeInput.computeDateListValue;
+            const matchFormat = 'yyyyMMdd';
+            return [
+                h('table', {
+                    class: `vxe-input--date-${datePanelType}-view`,
+                    attrs: {
+                        cellspacing: 0,
+                        cellpadding: 0,
+                        border: 0
+                    }
+                }, [
+                    h('thead', [
+                        h('tr', dateHeaders.map((item) => {
+                            return h('th', item.label);
+                        }))
+                    ]),
+                    h('tbody', dayDatas.map((rows) => {
+                        return h('tr', rows.map((item) => {
+                            return h('td', {
+                                class: {
+                                    'is--prev': item.isPrev,
+                                    'is--current': item.isCurrent,
+                                    'is--now': item.isNow,
+                                    'is--next': item.isNext,
+                                    'is--disabled': $xeInput.isDateDisabled(item),
+                                    'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                    'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                                },
+                                on: {
+                                    click: () => $xeInput.dateSelectEvent(item),
+                                    mouseenter: () => $xeInput.dateMouseenterEvent(item)
+                                }
+                            }, $xeInput.renderDateLabel(h, item, item.label));
+                        }));
+                    }))
+                ])
+            ];
+        },
+        renderDateWeekTable(h) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { multiple } = props;
+            const { datePanelType, datePanelValue } = reactData;
+            const dateValue = $xeInput.computeDateValue;
+            const weekHeaders = $xeInput.computeWeekHeaders;
+            const weekDates = $xeInput.computeWeekDates;
+            const dateListValue = $xeInput.computeDateListValue;
+            const matchFormat = 'yyyyMMdd';
+            return [
+                h('table', {
+                    class: `vxe-input--date-${datePanelType}-view`,
+                    attrs: {
+                        cellspacing: 0,
+                        cellpadding: 0,
+                        border: 0
+                    }
+                }, [
+                    h('thead', [
+                        h('tr', weekHeaders.map((item) => {
+                            return h('th', item.label);
+                        }))
+                    ]),
+                    h('tbody', weekDates.map((rows) => {
+                        const isSelected = multiple ? rows.some((item) => dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat))) : rows.some((item) => XEUtils.isDateSame(dateValue, item.date, matchFormat));
+                        const isHover = rows.some((item) => XEUtils.isDateSame(datePanelValue, item.date, matchFormat));
+                        return h('tr', rows.map((item) => {
+                            return h('td', {
+                                class: {
+                                    'is--prev': item.isPrev,
+                                    'is--current': item.isCurrent,
+                                    'is--now': item.isNow,
+                                    'is--next': item.isNext,
+                                    'is--disabled': $xeInput.isDateDisabled(item),
+                                    'is--selected': isSelected,
+                                    'is--hover': isHover
+                                },
+                                on: {
+                                    click: () => $xeInput.dateSelectEvent(item),
+                                    mouseenter: () => $xeInput.dateMouseenterEvent(item)
+                                }
+                            }, $xeInput.renderDateLabel(h, item, item.label));
+                        }));
+                    }))
+                ])
+            ];
+        },
+        renderDateMonthTable(h) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { multiple } = props;
+            const { datePanelType, datePanelValue } = reactData;
+            const dateValue = $xeInput.computeDateValue;
+            const monthDatas = $xeInput.computeMonthDatas;
+            const dateListValue = $xeInput.computeDateListValue;
+            const matchFormat = 'yyyyMM';
+            return [
+                h('table', {
+                    class: `vxe-input--date-${datePanelType}-view`,
+                    attrs: {
+                        cellspacing: 0,
+                        cellpadding: 0,
+                        border: 0
+                    }
+                }, [
+                    h('tbody', monthDatas.map((rows) => {
+                        return h('tr', rows.map((item) => {
+                            return h('td', {
+                                class: {
+                                    'is--prev': item.isPrev,
+                                    'is--current': item.isCurrent,
+                                    'is--now': item.isNow,
+                                    'is--next': item.isNext,
+                                    'is--disabled': $xeInput.isDateDisabled(item),
+                                    'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                    'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                                },
+                                on: {
+                                    click: () => $xeInput.dateSelectEvent(item),
+                                    mouseenter: () => $xeInput.dateMouseenterEvent(item)
+                                }
+                            }, $xeInput.renderDateLabel(h, item, getI18n(`vxe.input.date.months.m${item.month}`)));
+                        }));
+                    }))
+                ])
+            ];
+        },
+        renderDateQuarterTable(h) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { multiple } = props;
+            const { datePanelType, datePanelValue } = reactData;
+            const dateValue = $xeInput.computeDateValue;
+            const quarterDatas = $xeInput.computeQuarterDatas;
+            const dateListValue = $xeInput.computeDateListValue;
+            const matchFormat = 'yyyyq';
+            return [
+                h('table', {
+                    class: `vxe-input--date-${datePanelType}-view`,
+                    attrs: {
+                        cellspacing: 0,
+                        cellpadding: 0,
+                        border: 0
+                    }
+                }, [
+                    h('tbody', quarterDatas.map((rows) => {
+                        return h('tr', rows.map((item) => {
+                            return h('td', {
+                                class: {
+                                    'is--prev': item.isPrev,
+                                    'is--current': item.isCurrent,
+                                    'is--now': item.isNow,
+                                    'is--next': item.isNext,
+                                    'is--disabled': $xeInput.isDateDisabled(item),
+                                    'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                    'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                                },
+                                on: {
+                                    click: () => $xeInput.dateSelectEvent(item),
+                                    mouseenter: () => $xeInput.dateMouseenterEvent(item)
+                                }
+                            }, $xeInput.renderDateLabel(h, item, getI18n(`vxe.input.date.quarters.q${item.quarter}`)));
+                        }));
+                    }))
+                ])
+            ];
+        },
+        renderDateYearTable(h) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { multiple } = props;
+            const { datePanelType, datePanelValue } = reactData;
+            const dateValue = $xeInput.computeDateValue;
+            const yearDatas = $xeInput.computeYearDatas;
+            const dateListValue = $xeInput.computeDateListValue;
+            const matchFormat = 'yyyy';
+            return [
+                h('table', {
+                    class: `vxe-input--date-${datePanelType}-view`,
+                    attrs: {
+                        cellspacing: 0,
+                        cellpadding: 0,
+                        border: 0
+                    }
+                }, [
+                    h('tbody', yearDatas.map((rows) => {
+                        return h('tr', rows.map((item) => {
+                            return h('td', {
+                                class: {
+                                    'is--prev': item.isPrev,
+                                    'is--current': item.isCurrent,
+                                    'is--now': item.isNow,
+                                    'is--next': item.isNext,
+                                    'is--disabled': $xeInput.isDateDisabled(item),
+                                    'is--selected': multiple ? dateListValue.some(val => XEUtils.isDateSame(val, item.date, matchFormat)) : XEUtils.isDateSame(dateValue, item.date, matchFormat),
+                                    'is--hover': XEUtils.isDateSame(datePanelValue, item.date, matchFormat)
+                                },
+                                on: {
+                                    click: () => $xeInput.dateSelectEvent(item),
+                                    mouseenter: () => $xeInput.dateMouseenterEvent(item)
+                                }
+                            }, $xeInput.renderDateLabel(h, item, item.year));
+                        }));
+                    }))
+                ])
+            ];
+        },
+        renderDateTable(h) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { datePanelType } = reactData;
+            switch (datePanelType) {
+                case 'week':
+                    return $xeInput.renderDateWeekTable(h);
+                case 'month':
+                    return $xeInput.renderDateMonthTable(h);
+                case 'quarter':
+                    return $xeInput.renderDateQuarterTable(h);
+                case 'year':
+                    return $xeInput.renderDateYearTable(h);
+            }
+            return $xeInput.renderDateDayTable(h);
+        },
+        renderDatePanel(h) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { multiple } = props;
+            const { datePanelType } = reactData;
+            const isDisabledPrevDateBtn = $xeInput.computeIsDisabledPrevDateBtn;
+            const isDisabledNextDateBtn = $xeInput.computeIsDisabledNextDateBtn;
+            const selectDatePanelObj = $xeInput.computeSelectDatePanelObj;
+            return [
+                h('div', {
+                    class: 'vxe-input--date-picker-header'
+                }, [
+                    h('div', {
+                        class: 'vxe-input--date-picker-type-wrapper'
+                    }, [
+                        datePanelType === 'year'
+                            ? h('span', {
+                                class: 'vxe-input--date-picker-label'
+                            }, selectDatePanelObj.y)
+                            : h('span', {
+                                class: 'vxe-input--date-picker-btns'
+                            }, [
+                                h('span', {
+                                    class: 'vxe-input--date-picker-btn',
+                                    on: {
+                                        click: $xeInput.dateToggleYearTypeEvent
+                                    }
+                                }, selectDatePanelObj.y),
+                                selectDatePanelObj.m
+                                    ? h('span', {
+                                        class: 'vxe-input--date-picker-btn',
+                                        on: {
+                                            click: $xeInput.dateToggleMonthTypeEvent
+                                        }
+                                    }, selectDatePanelObj.m)
+                                    : renderEmptyElement($xeInput)
+                            ])
+                    ]),
+                    h('div', {
+                        class: 'vxe-input--date-picker-btn-wrapper'
+                    }, [
+                        h('span', {
+                            class: ['vxe-input--date-picker-btn vxe-input--date-picker-prev-btn', {
+                                    'is--disabled': isDisabledPrevDateBtn
+                                }],
+                            on: {
+                                click: $xeInput.datePrevEvent
+                            }
+                        }, [
+                            h('i', {
+                                class: 'vxe-icon-caret-left'
+                            })
+                        ]),
+                        h('span', {
+                            class: 'vxe-input--date-picker-btn vxe-input--date-picker-current-btn',
+                            on: {
+                                click: $xeInput.dateTodayMonthEvent
+                            }
+                        }, [
+                            h('i', {
+                                class: 'vxe-icon-dot'
+                            })
+                        ]),
+                        h('span', {
+                            class: ['vxe-input--date-picker-btn vxe-input--date-picker-next-btn', {
+                                    'is--disabled': isDisabledNextDateBtn
+                                }],
+                            on: {
+                                click: $xeInput.dateNextEvent
+                            }
+                        }, [
+                            h('i', {
+                                class: 'vxe-icon-caret-right'
+                            })
+                        ]),
+                        multiple && $xeInput.computeSupportMultiples
+                            ? h('span', {
+                                class: 'vxe-input--date-picker-btn vxe-input--date-picker-confirm-btn'
+                            }, [
+                                h('button', {
+                                    class: 'vxe-input--date-picker-confirm',
+                                    attrs: {
+                                        type: 'button'
+                                    },
+                                    on: {
+                                        click: $xeInput.dateConfirmEvent
+                                    }
+                                }, getI18n('vxe.button.confirm'))
+                            ])
+                            : null
+                    ])
+                ]),
+                h('div', {
+                    class: 'vxe-input--date-picker-body'
+                }, $xeInput.renderDateTable(h))
+            ];
+        },
+        renderTimePanel(h) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { datetimePanelValue } = reactData;
+            const dateTimeLabel = $xeInput.computeDateTimeLabel;
+            const hourList = $xeInput.computeHourList;
+            const hasTimeMinute = $xeInput.computeHasTimeMinute;
+            const minuteList = $xeInput.computeMinuteList;
+            const hasTimeSecond = $xeInput.computeHasTimeSecond;
+            const secondList = $xeInput.computeSecondList;
+            return [
+                h('div', {
+                    class: 'vxe-input--time-picker-header'
+                }, [
+                    hasTimeMinute
+                        ? h('span', {
+                            class: 'vxe-input--time-picker-title'
+                        }, dateTimeLabel)
+                        : renderEmptyElement($xeInput),
+                    h('div', {
+                        class: 'vxe-input--time-picker-btn'
+                    }, [
+                        h('button', {
+                            class: 'vxe-input--time-picker-confirm',
+                            attrs: {
+                                type: 'button'
+                            },
+                            on: {
+                                click: $xeInput.dateConfirmEvent
+                            }
+                        }, getI18n('vxe.button.confirm'))
+                    ])
+                ]),
+                h('div', {
+                    ref: 'refInputTimeBody',
+                    class: 'vxe-input--time-picker-body'
+                }, [
+                    h('ul', {
+                        class: 'vxe-input--time-picker-hour-list'
+                    }, hourList.map((item, index) => {
+                        return h('li', {
+                            key: index,
+                            class: {
+                                'is--selected': datetimePanelValue && datetimePanelValue.getHours() === item.value
+                            },
+                            on: {
+                                click: (evnt) => $xeInput.dateHourEvent(evnt, item)
+                            }
+                        }, item.label);
+                    })),
+                    hasTimeMinute
+                        ? h('ul', {
+                            class: 'vxe-input--time-picker-minute-list'
+                        }, minuteList.map((item, index) => {
+                            return h('li', {
+                                key: index,
+                                class: {
+                                    'is--selected': datetimePanelValue && datetimePanelValue.getMinutes() === item.value
+                                },
+                                on: {
+                                    click: (evnt) => $xeInput.dateMinuteEvent(evnt, item)
+                                }
+                            }, item.label);
+                        }))
+                        : renderEmptyElement($xeInput),
+                    hasTimeMinute && hasTimeSecond
+                        ? h('ul', {
+                            class: 'vxe-input--time-picker-second-list'
+                        }, secondList.map((item, index) => {
+                            return h('li', {
+                                key: index,
+                                class: {
+                                    'is--selected': datetimePanelValue && datetimePanelValue.getSeconds() === item.value
+                                },
+                                on: {
+                                    click: (evnt) => $xeInput.dateSecondEvent(evnt, item)
+                                }
+                            }, item.label);
+                        }))
+                        : renderEmptyElement($xeInput)
+                ])
+            ];
+        },
+        renderPanel(h) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { type } = props;
+            const { initialized, isAniVisible, visiblePanel, panelPlacement, panelStyle } = reactData;
+            const vSize = $xeInput.computeSize;
+            const btnTransfer = $xeInput.computeBtnTransfer;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const renders = [];
+            if (isDatePickerType) {
+                if (type === 'datetime') {
+                    renders.push(h('div', {
+                        key: type,
+                        ref: 'refPanelWrapper',
+                        class: 'vxe-input--panel-layout-wrapper'
+                    }, [
+                        h('div', {
+                            class: 'vxe-input--panel-left-wrapper'
+                        }, $xeInput.renderDatePanel(h)),
+                        h('div', {
+                            class: 'vxe-input--panel-right-wrapper'
+                        }, $xeInput.renderTimePanel(h))
+                    ]));
+                }
+                else if (type === 'time') {
+                    renders.push(h('div', {
+                        key: type,
+                        ref: 'refPanelWrapper',
+                        class: 'vxe-input--panel-wrapper'
+                    }, $xeInput.renderTimePanel(h)));
+                }
+                else {
+                    renders.push(h('div', {
+                        key: type || 'default',
+                        ref: 'refPanelWrapper',
+                        class: 'vxe-input--panel-wrapper'
+                    }, $xeInput.renderDatePanel(h)));
+                }
+                return h('div', {
+                    ref: 'refInputPanel',
+                    class: ['vxe-table--ignore-clear vxe-input--panel', `type--${type}`, {
+                            [`size--${vSize}`]: vSize,
+                            'is--transfer': btnTransfer,
+                            'ani--leave': isAniVisible,
+                            'ani--enter': visiblePanel
+                        }],
+                    attrs: {
+                        placement: panelPlacement
+                    },
+                    style: panelStyle
+                }, initialized && (visiblePanel || isAniVisible) ? renders : []);
+            }
+            return renderEmptyElement($xeInput);
+        },
+        renderNumberIcon(h) {
+            const $xeInput = this;
+            const isDisabledAddNumber = $xeInput.computeIsDisabledAddNumber;
+            const isDisabledSubtractNumber = $xeInput.computeIsDisabledSubtractNumber;
+            return h('div', {
+                class: 'vxe-input--control-icon'
+            }, [
+                h('div', {
+                    class: 'vxe-input--number-icon'
+                }, [
+                    h('div', {
+                        class: ['vxe-input--number-btn is--prev', {
+                                'is--disabled': isDisabledAddNumber
+                            }],
+                        on: {
+                            mousedown: $xeInput.numberMousedownEvent,
+                            mouseup: $xeInput.numberStopDown,
+                            mouseleave: $xeInput.numberStopDown
+                        }
+                    }, [
+                        h('i', {
+                            class: getIcon().INPUT_PLUS_NUM
+                        })
+                    ]),
+                    h('div', {
+                        class: ['vxe-input--number-btn is--next', {
+                                'is--disabled': isDisabledSubtractNumber
+                            }],
+                        on: {
+                            mousedown: $xeInput.numberMousedownEvent,
+                            mouseup: $xeInput.numberStopDown,
+                            mouseleave: $xeInput.numberStopDown
+                        }
+                    }, [
+                        h('i', {
+                            class: getIcon().INPUT_MINUS_NUM
+                        })
+                    ])
+                ])
+            ]);
+        },
+        renderDatePickerIcon(h) {
+            const $xeInput = this;
+            return h('div', {
+                class: 'vxe-input--control-icon',
+                on: {
+                    click: $xeInput.datePickerOpenEvent
+                }
+            }, [
+                h('i', {
+                    class: ['vxe-input--date-picker-icon', getIcon().DATE_PICKER_DATE]
+                })
+            ]);
+        },
+        renderSearchIcon(h) {
+            const $xeInput = this;
+            return h('div', {
+                class: 'vxe-input--control-icon',
+                on: {
+                    click: $xeInput.searchEvent
+                }
+            }, [
+                h('i', {
+                    class: ['vxe-input--search-icon', getIcon().INPUT_SEARCH]
+                })
+            ]);
+        },
+        renderPasswordIcon(h) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            const { showPwd } = reactData;
+            return h('div', {
+                class: 'vxe-input--control-icon',
+                on: {
+                    click: $xeInput.passwordToggleEvent
+                }
+            }, [
+                h('i', {
+                    class: ['vxe-input--password-icon', showPwd ? getIcon().PASSWORD_INPUT_SHOW_PWD : getIcon().PASSWORD_INPUT_HIDE_PWD]
+                })
+            ]);
+        },
+        renderPrefixIcon(h) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const slots = $xeInput.$scopedSlots;
+            const { prefixIcon } = props;
+            const prefixOpts = $xeInput.computePrefixOpts;
+            const prefixSlot = slots.prefix;
+            const preIcon = prefixIcon || prefixOpts.icon;
+            const sufContent = prefixOpts.content;
+            return prefixSlot || preIcon || sufContent
+                ? h('div', {
+                    class: 'vxe-input--prefix',
+                    on: {
+                        click: $xeInput.clickPrefixEvent
+                    }
+                }, [
+                    h('div', {
+                        class: 'vxe-input--prefix-icon'
+                    }, prefixSlot
+                        ? getSlotVNs(prefixSlot({}))
+                        : [
+                            preIcon
+                                ? h('i', {
+                                    class: preIcon
+                                })
+                                : renderEmptyElement($xeInput),
+                            sufContent
+                                ? h('span', {
+                                    class: 'vxe-input--prefix-text'
+                                }, `${sufContent}`)
+                                : renderEmptyElement($xeInput)
+                        ])
+                ])
+                : null;
+        },
+        renderSuffixIcon(h) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const slots = $xeInput.$scopedSlots;
+            const reactData = $xeInput.reactData;
+            const { suffixIcon } = props;
+            const { inputValue } = reactData;
+            const suffixSlot = slots.suffix;
+            const suffixOpts = $xeInput.computeSuffixOpts;
+            const isDisabled = $xeInput.computeIsDisabled;
+            const isNumType = $xeInput.computeIsNumType;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const isPawdType = $xeInput.computeIsPawdType;
+            const isSearchType = $xeInput.computeIsSearchType;
+            const isClearable = $xeInput.computeIsClearable;
+            const isExtraBtn = isPawdType || isNumType || isDatePickerType || isSearchType;
+            const sufIcon = suffixIcon || suffixOpts.icon;
+            const sufContent = suffixOpts.content;
+            return isClearable || suffixSlot || sufIcon || sufContent || isExtraBtn
+                ? h('div', {
+                    class: ['vxe-input--suffix', {
+                            'is--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+                        }]
+                }, [
+                    isClearable
+                        ? h('div', {
+                            class: 'vxe-input--clear-icon',
+                            on: {
+                                click: $xeInput.clearValueEvent
+                            }
+                        }, [
+                            h('i', {
+                                class: getIcon().INPUT_CLEAR
+                            })
+                        ])
+                        : renderEmptyElement($xeInput),
+                    isExtraBtn ? $xeInput.renderExtraSuffixIcon(h) : renderEmptyElement($xeInput),
+                    suffixSlot || sufIcon || sufContent
+                        ? h('div', {
+                            class: 'vxe-input--suffix-icon',
+                            on: {
+                                click: $xeInput.clickSuffixEvent
+                            }
+                        }, suffixSlot
+                            ? getSlotVNs(suffixSlot({}))
+                            : [
+                                sufIcon
+                                    ? h('i', {
+                                        class: sufIcon
+                                    })
+                                    : renderEmptyElement($xeInput),
+                                sufContent
+                                    ? h('span', {
+                                        class: 'vxe-input--suffix-text'
+                                    }, `${sufContent}`)
+                                    : renderEmptyElement($xeInput)
+                            ])
+                        : renderEmptyElement($xeInput)
+                ])
+                : null;
+        },
+        renderExtraSuffixIcon(h) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const { controls } = props;
+            const isNumType = $xeInput.computeIsNumType;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            const isPawdType = $xeInput.computeIsPawdType;
+            const isSearchType = $xeInput.computeIsSearchType;
+            if (isPawdType) {
+                return $xeInput.renderPasswordIcon(h);
+            }
+            if (isNumType) {
+                if (controls) {
+                    return $xeInput.renderNumberIcon(h);
+                }
+            }
+            if (isDatePickerType) {
+                return $xeInput.renderDatePickerIcon(h);
+            }
+            if (isSearchType) {
+                return $xeInput.renderSearchIcon(h);
+            }
+            return renderEmptyElement($xeInput);
+        },
+        renderVN(h) {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const { className, controls, type, title, align, showWordCount, countMethod, name, autoComplete, autocomplete } = props;
+            const { inputValue, visiblePanel, isActivated } = reactData;
+            const vSize = $xeInput.computeSize;
+            const isDisabled = $xeInput.computeIsDisabled;
+            const formReadonly = $xeInput.computeFormReadonly;
+            if (formReadonly) {
+                return h('div', {
+                    ref: 'refElem',
+                    class: ['vxe-input--readonly', `type--${type}`, className]
+                }, inputValue);
+            }
+            const isCountError = $xeInput.computeIsCountError;
+            const inputCount = $xeInput.computeInputCount;
+            const inputReadonly = $xeInput.computeInputReadonly;
+            const inpMaxLength = $xeInput.computeInpMaxLength;
+            const inputType = $xeInput.computeInputType;
+            const inpPlaceholder = $xeInput.computeInpPlaceholder;
+            const isClearable = $xeInput.computeIsClearable;
+            const isWordCount = showWordCount && ['text', 'search'].includes(type);
+            const prefix = $xeInput.renderPrefixIcon(h);
+            const suffix = $xeInput.renderSuffixIcon(h);
+            return h('div', {
+                ref: 'refElem',
+                class: ['vxe-input', `type--${type}`, className, {
+                        [`size--${vSize}`]: vSize,
+                        [`is--${align}`]: align,
+                        'is--controls': controls,
+                        'is--prefix': !!prefix,
+                        'is--suffix': !!suffix,
+                        'is--visible': visiblePanel,
+                        'is--count': isWordCount,
+                        'is--disabled': isDisabled,
+                        'is--active': isActivated,
+                        'show--clear': isClearable && !isDisabled && !(inputValue === '' || XEUtils.eqNull(inputValue))
+                    }],
+                attrs: {
+                    spellcheck: false
+                }
+            }, [
+                prefix || renderEmptyElement($xeInput),
+                h('div', {
+                    class: 'vxe-input--wrapper',
+                    attrs: title
+                        ? {
+                            title
+                        }
+                        : undefined
+                }, [
+                    h('input', {
+                        ref: 'refInputTarget',
+                        class: 'vxe-input--inner',
+                        domProps: {
+                            value: inputValue
+                        },
+                        attrs: {
+                            name,
+                            type: inputType,
+                            placeholder: inpPlaceholder,
+                            maxlength: inpMaxLength,
+                            readonly: inputReadonly,
+                            disabled: isDisabled,
+                            autocomplete: autoComplete || autocomplete
+                        },
+                        on: {
+                            keydown: $xeInput.keydownEvent,
+                            keyup: $xeInput.keyupEvent,
+                            click: $xeInput.clickEvent,
+                            input: $xeInput.inputEvent,
+                            change: $xeInput.changeEvent,
+                            focus: $xeInput.focusEvent,
+                            blur: $xeInput.blurEvent
+                        }
+                    })
+                ]),
+                suffix || renderEmptyElement($xeInput),
+                // 下拉面板
+                $xeInput.renderPanel(h),
+                // 字数统计
+                isWordCount
+                    ? h('span', {
+                        class: ['vxe-input--count', {
+                                'is--error': isCountError
+                            }]
+                    }, countMethod ? `${countMethod({ value: inputValue })}` : `${inputCount}${inpMaxLength ? `/${inpMaxLength}` : ''}`)
+                    : renderEmptyElement($xeInput)
+            ]);
+        }
+    },
+    watch: {
+        value(val) {
+            const $xeInput = this;
+            const reactData = $xeInput.reactData;
+            reactData.inputValue = val;
+            $xeInput.changeValue();
+        },
+        type() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            // 切换类型是重置内置变量
+            Object.assign(reactData, {
+                inputValue: props.value,
+                datetimePanelValue: null,
+                datePanelValue: null,
+                datePanelLabel: '',
+                datePanelType: 'day',
+                selectMonth: null,
+                currentDate: null
+            });
+            $xeInput.initValue();
+        },
+        computeDateLabelFormat() {
+            const $xeInput = this;
+            const props = $xeInput;
+            const reactData = $xeInput.reactData;
+            const isDatePickerType = $xeInput.computeIsDatePickerType;
+            if (isDatePickerType) {
+                $xeInput.dateParseValue(reactData.datePanelValue);
+                reactData.inputValue = props.multiple ? $xeInput.computeDateMultipleLabel : reactData.datePanelLabel;
+            }
+        }
+    },
+    created() {
+        const $xeInput = this;
+        const props = $xeInput;
+        const reactData = $xeInput.reactData;
+        reactData.inputValue = props.value;
+        $xeInput.initValue();
+    },
+    mounted() {
+        const $xeInput = this;
+        const props = $xeInput;
+        const { type } = props;
+        if (['date', 'time', 'datetime', 'week', 'month', 'quarter', 'year'].includes(type)) {
+            warnLog('vxe.error.useNew', [`<vxe-input type="${type}" ... />`, `<vxe-date-picker type="${type}" ... />`]);
+        }
+        else if (['number', 'integer', 'float'].includes(type)) {
+            warnLog('vxe.error.useNew', [`<vxe-input type="${type}" ... />`, `<vxe-number-input type="${type}" ... />`]);
+        }
+        else if (['password'].includes(type)) {
+            warnLog('vxe.error.useNew', [`<vxe-input type="${type}" ... />`, '<vxe-password-input ... />']);
+        }
+        const inputElem = $xeInput.$refs.refInputTarget;
+        if (inputElem) {
+            inputElem.addEventListener('wheel', $xeInput.wheelEvent, { passive: false });
+        }
+        globalEvents.on($xeInput, 'mousewheel', $xeInput.handleGlobalMousewheelEvent);
+        globalEvents.on($xeInput, 'mousedown', $xeInput.handleGlobalMousedownEvent);
+        globalEvents.on($xeInput, 'keydown', $xeInput.handleGlobalKeydownEvent);
+        globalEvents.on($xeInput, 'blur', $xeInput.handleGlobalBlurEvent);
+    },
+    beforeDestroy() {
+        const $xeInput = this;
+        const panelElem = $xeInput.$refs.refInputPanel;
+        if (panelElem && panelElem.parentNode) {
+            panelElem.parentNode.removeChild(panelElem);
+        }
+        $xeInput.numberStopDown();
+        $xeInput.afterCheckValue();
+        const inputElem = $xeInput.$refs.refInputTarget;
+        if (inputElem) {
+            inputElem.removeEventListener('wheel', $xeInput.wheelEvent);
+        }
+        globalEvents.off($xeInput, 'mousewheel');
+        globalEvents.off($xeInput, 'mousedown');
+        globalEvents.off($xeInput, 'keydown');
+        globalEvents.off($xeInput, 'blur');
+    },
+    render(h) {
+        return this.renderVN(h);
+    }
+};