feat: update vc-calendar

2020-07-21 22:29:54 +08:00 · 2020-07-21 22:29:54 +08:00 · 02cf80bb18
parent f6e2e54f65
commit 02cf80bb18
13 changed files with 179 additions and 215 deletions
--- a/components/calendar/index.jsx
+++ b/components/calendar/index.jsx
@ -8,7 +8,6 @@ import LocaleReceiver from '../locale-provider/LocaleReceiver';
 import interopDefault from '../_util/interopDefault';
 import { ConfigConsumerProps } from '../config-provider';
 import enUS from './locale/en_US';
-import Base from '../base';
 import { checkValidate, stringToMoment, momentToString, TimeType } from '../_util/moment-util';

 function noop() {
@ -248,9 +247,8 @@ const Calendar = {
 };

 /* istanbul ignore next */
-Calendar.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(Calendar.name, Calendar);
+Calendar.install = function(app) {
+  app.component(Calendar.name, Calendar);
 };
 export { HeaderProps } from './Header';
 export default Calendar;
--- a/components/vc-calendar/index.js
+++ b/components/vc-calendar/index.js
@ -1,8 +1,4 @@
 // based on rc-calendar 9.15.10
-import Vue from 'vue';
-import ref from 'vue-ref';
 import Calendar from './src/';

-Vue.use(ref, { name: 'ant-ref' });
-
 export default Calendar;
--- a/components/vc-calendar/src/Calendar.jsx
+++ b/components/vc-calendar/src/Calendar.jsx
@ -23,6 +23,7 @@ const getMomentObjectIfValid = date => {

 const Calendar = {
  name: 'Calendar',
+  inheritAttrs: false,
  props: {
    locale: PropTypes.object.def(enUs),
    format: PropTypes.oneOfType([
@ -273,22 +274,18 @@ const Calendar = {
    if (timePicker && showTimePicker) {
      const timePickerOriginProps = getOptionProps(timePicker);
      const timePickerProps = {
-        props: {
-          showHour: true,
-          showSecond: true,
-          showMinute: true,
-          ...timePickerOriginProps,
-          ...disabledTimeConfig,
-          value: sSelectedValue,
-          disabledTime,
-        },
-        on: {
-          change: this.onDateInputChange,
-        },
+        showHour: true,
+        showSecond: true,
+        showMinute: true,
+        ...timePickerOriginProps,
+        ...disabledTimeConfig,
+        value: sSelectedValue,
+        disabledTime,
+        onChange: this.onDateInputChange,
      };

      if (timePickerOriginProps.defaultValue !== undefined) {
-        timePickerProps.props.defaultOpenValue = timePickerOriginProps.defaultValue;
+        timePickerProps.defaultOpenValue = timePickerOriginProps.defaultValue;
      }
      timePickerEle = cloneElement(timePicker, timePickerProps);
    }
--- a/components/vc-calendar/src/FullCalendar.jsx
+++ b/components/vc-calendar/src/FullCalendar.jsx
@ -1,7 +1,7 @@
 import moment from 'moment';
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { getOptionProps, hasProp, getListeners } from '../../_util/props-util';
+import { getOptionProps, hasProp } from '../../_util/props-util';
 import DateTable from './date/DateTable';
 import MonthTable from './month/MonthTable';
 import CalendarMixin, { getNowByCurrentStateValue } from './mixin/CalendarMixin';
@ -10,6 +10,7 @@ import CalendarHeader from './full-calendar/CalendarHeader';
 import enUs from './locale/en_US';
 const FullCalendar = {
  name: 'FullCalendar',
+  inheritAttrs: false,
  props: {
    locale: PropTypes.object.def(enUs),
    format: PropTypes.oneOfType([PropTypes.string, PropTypes.array, PropTypes.func]),
@ -103,17 +104,13 @@ const FullCalendar = {
      } else {
        const TheHeader = headerComponent || CalendarHeader;
        const headerProps = {
-          props: {
-            ...props,
-            prefixCls: `${prefixCls}-full`,
-            type,
-            value,
-          },
-          on: {
-            ...getListeners(this),
-            typeChange: this.setType,
-            valueChange: this.setValue,
-          },
+          ...props,
+          ...this.$attrs,
+          prefixCls: `${prefixCls}-full`,
+          type,
+          value,
+          onTypeChange: this.setType,
+          onValueChange: this.setValue,
          key: 'calendar-header',
        };
        header = <TheHeader {...headerProps} />;
--- a/components/vc-calendar/src/MonthCalendar.jsx
+++ b/components/vc-calendar/src/MonthCalendar.jsx
@ -9,6 +9,7 @@ import CommonMixin from './mixin/CommonMixin';
 import enUs from './locale/en_US';
 const MonthCalendar = {
  name: 'MonthCalendar',
+  inheritAttrs: false,
  props: {
    locale: PropTypes.object.def(enUs),
    format: PropTypes.string,
@ -90,12 +91,11 @@ const MonthCalendar = {
  },

  render() {
-    const { mode, sValue: value, $props: props, $scopedSlots } = this;
+    const { mode, sValue: value, $props: props, $slots } = this;
    const { prefixCls, locale, disabledDate } = props;
-    const monthCellRender = this.monthCellRender || $scopedSlots.monthCellRender;
-    const monthCellContentRender =
-      this.monthCellContentRender || $scopedSlots.monthCellContentRender;
-    const renderFooter = this.renderFooter || $scopedSlots.renderFooter;
+    const monthCellRender = this.monthCellRender || $slots.monthCellRender;
+    const monthCellContentRender = this.monthCellContentRender || $slots.monthCellContentRender;
+    const renderFooter = this.renderFooter || $slots.renderFooter;
    const children = (
      <div class={`${prefixCls}-month-calendar-content`}>
        <div class={`${prefixCls}-month-header-wrap`}>
--- a/components/vc-calendar/src/Picker.jsx
+++ b/components/vc-calendar/src/Picker.jsx
@ -1,6 +1,6 @@
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import { getOptionProps, hasProp, getEvents, getStyle } from '../../_util/props-util';
+import { getOptionProps, hasProp, getEvents, findDOMNode } from '../../_util/props-util';
 import { cloneElement } from '../../_util/vnode';
 import createChainedFunction from '../../_util/createChainedFunction';
 import KeyCode from '../../_util/KeyCode';
@ -19,8 +19,14 @@ const TimeType = {
    }
  },
 };
+
+function refFn(field, component) {
+  this[field] = component;
+}
+
 const Picker = {
  name: 'Picker',
+  inheritAttrs: false,
  props: {
    animation: PropTypes.oneOfType([PropTypes.func, PropTypes.string]),
    disabled: PropTypes.bool,
@ -40,11 +46,13 @@ const Picker = {
    align: PropTypes.object.def(() => ({})),
    dropdownClassName: PropTypes.string,
    dateRender: PropTypes.func,
+    children: PropTypes.func.isRequired,
  },
  mixins: [BaseMixin],

  data() {
    const props = this.$props;
+    this.saveCalendarRef = refFn.bind(this, 'calendarInstance');
    let open;
    if (hasProp(this, 'open')) {
      open = props.open;
@ -140,18 +148,14 @@ const Picker = {
      const { sValue: value } = this;
      const defaultValue = value;
      const extraProps = {
-        ref: 'calendarInstance',
-        props: {
-          defaultValue: defaultValue || calendarProps.defaultValue,
-          selectedValue: value,
-        },
-        on: {
-          keydown: this.onCalendarKeyDown,
-          ok: createChainedFunction(calendarEvents.ok, this.onCalendarOk),
-          select: createChainedFunction(calendarEvents.select, this.onCalendarSelect),
-          clear: createChainedFunction(calendarEvents.clear, this.onCalendarClear),
-          blur: createChainedFunction(calendarEvents.blur, this.onCalendarBlur),
-        },
+        ref: this.saveCalendarRef,
+        defaultValue: defaultValue || calendarProps.defaultValue,
+        selectedValue: value,
+        onKeydown: this.onCalendarKeyDown,
+        onOk: createChainedFunction(calendarEvents.onOk, this.onCalendarOk),
+        onSelect: createChainedFunction(calendarEvents.onSelect, this.onCalendarSelect),
+        onClear: createChainedFunction(calendarEvents.onClear, this.onCalendarClear),
+        onBlur: createChainedFunction(calendarEvents.onBlur, this.onCalendarBlur),
      };

      return cloneElement(props.calendar, extraProps);
@ -181,20 +185,19 @@ const Picker = {

    focus() {
      if (!this.sOpen) {
-        this.$el.focus();
+        findDOMNode(this).focus();
      }
    },

    focusCalendar() {
-      if (this.sOpen && this.calendarInstance && this.calendarInstance.componentInstance) {
-        this.calendarInstance.componentInstance.focus();
+      if (this.sOpen && !!this.calendarInstance) {
+        this.calendarInstance.focus();
      }
    },
  },

  render() {
    const props = getOptionProps(this);
-    const style = getStyle(this);
    const {
      prefixCls,
      placement,
@ -206,13 +209,13 @@ const Picker = {
      transitionName,
    } = props;
    const { sValue, sOpen } = this;
-    const children = this.$scopedSlots.default;
    const childrenState = {
      value: sValue,
      open: sOpen,
    };
-    if (this.sOpen || !this.calendarInstance) {
-      this.calendarInstance = this.getCalendarElement();
+    const children = this.children(childrenState, props);
+    if (this.sOpen || !this.calendarElement) {
+      this.calendarElement = this.getCalendarElement();
    }

    return (
@ -223,16 +226,16 @@ const Picker = {
        action={disabled && !sOpen ? [] : ['click']}
        destroyPopupOnHide
        getPopupContainer={getCalendarContainer}
-        popupStyle={style}
+        popupStyle={this.$attrs.style || {}}
        popupAnimation={animation}
        popupTransitionName={transitionName}
        popupVisible={sOpen}
        onPopupVisibleChange={this.onVisibleChange}
        prefixCls={prefixCls}
        popupClassName={dropdownClassName}
+        popup={this.calendarElement}
      >
-        <template slot="popup">{this.calendarInstance}</template>
-        {cloneElement(children(childrenState, props), { on: { keydown: this.onKeyDown } })}
+        {cloneElement(children, { onKeydown: this.onKeyDown })}
      </Trigger>
    );
  },
--- a/components/vc-calendar/src/RangeCalendar.jsx
+++ b/components/vc-calendar/src/RangeCalendar.jsx
@ -1,12 +1,6 @@
 import PropTypes from '../../_util/vue-types';
 import BaseMixin from '../../_util/BaseMixin';
-import {
-  getOptionProps,
-  hasProp,
-  mergeProps,
-  getComponent,
-  getListeners,
-} from '../../_util/props-util';
+import { getOptionProps, hasProp, getComponent } from '../../_util/props-util';
 import moment from 'moment';
 import KeyCode from '../../_util/KeyCode';
 import CalendarPart from './range-calendar/CalendarPart';
@ -86,6 +80,8 @@ function onInputSelect(direction, value, cause) {
 }

 const RangeCalendar = {
+  name: 'RangeCalendar',
+  inheritAttrs: false,
  props: {
    locale: PropTypes.object.def(enUs),
    visible: PropTypes.bool.def(true),
@ -672,6 +668,7 @@ const RangeCalendar = {
    const clearIcon = getComponent(this, 'clearIcon');
    const { sHoverValue, sSelectedValue, sMode: mode, sShowTimePicker, sValue } = this;
    const className = {
+      [this.$attrs.class]: !!this.$attrs.class,
      [prefixCls]: 1,
      [`${prefixCls}-hidden`]: !props.visible,
      [`${prefixCls}-range`]: 1,
@ -679,22 +676,18 @@ const RangeCalendar = {
      [`${prefixCls}-week-number`]: props.showWeekNumber,
    };
    const baseProps = {
-      props,
-      on: getListeners(this),
+      ...props,
+      ...this.$attrs,
    };
    const newProps = {
-      props: {
-        selectedValue: sSelectedValue,
-      },
-      on: {
-        select: this.onSelect,
-        dayHover:
-          (type === 'start' && sSelectedValue[1]) ||
-          (type === 'end' && sSelectedValue[0]) ||
-          !!sHoverValue.length
-            ? this.onDayHover
-            : noop,
-      },
+      selectedValue: sSelectedValue,
+      onSelect: this.onSelect,
+      onDayHover:
+        (type === 'start' && sSelectedValue[1]) ||
+        (type === 'end' && sSelectedValue[0]) ||
+        !!sHoverValue.length
+          ? this.onDayHover
+          : noop,
    };

    let placeholder1;
@ -725,98 +718,85 @@ const RangeCalendar = {
    const nextMonthOfStart = startValue.clone().add(1, 'months');
    const isClosestMonths =
      nextMonthOfStart.year() === endValue.year() && nextMonthOfStart.month() === endValue.month();
-    const leftPartProps = mergeProps(baseProps, newProps, {
-      props: {
-        hoverValue: sHoverValue,
-        direction: 'left',
-        disabledTime: this.disabledStartTime,
-        disabledMonth: this.disabledStartMonth,
-        format: this.getFormat(),
-        value: startValue,
-        mode: mode[0],
-        placeholder: placeholder1,
-        showDateInput: this.showDateInput,
-        timePicker,
-        showTimePicker: sShowTimePicker || mode[0] === 'time',
-        enablePrev: true,
-        enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]),
-        clearIcon,
-      },
-      on: {
-        inputChange: this.onStartInputChange,
-        inputSelect: this.onStartInputSelect,
-        valueChange: this.onStartValueChange,
-        panelChange: this.onStartPanelChange,
-      },
-    });
-    const rightPartProps = mergeProps(baseProps, newProps, {
-      props: {
-        hoverValue: sHoverValue,
-        direction: 'right',
-        format: this.getFormat(),
-        timePickerDisabledTime: this.getEndDisableTime(),
-        placeholder: placeholder2,
-        value: endValue,
-        mode: mode[1],
-        showDateInput: this.showDateInput,
-        timePicker,
-        showTimePicker: sShowTimePicker || mode[1] === 'time',
-        disabledTime: this.disabledEndTime,
-        disabledMonth: this.disabledEndMonth,
-        enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]),
-        enableNext: true,
-        clearIcon,
-      },
-      on: {
-        inputChange: this.onEndInputChange,
-        inputSelect: this.onEndInputSelect,
-        valueChange: this.onEndValueChange,
-        panelChange: this.onEndPanelChange,
-      },
-    });
+    const leftPartProps = {
+      ...baseProps,
+      ...newProps,
+      hoverValue: sHoverValue,
+      direction: 'left',
+      disabledTime: this.disabledStartTime,
+      disabledMonth: this.disabledStartMonth,
+      format: this.getFormat(),
+      value: startValue,
+      mode: mode[0],
+      placeholder: placeholder1,
+      showDateInput: this.showDateInput,
+      timePicker,
+      showTimePicker: sShowTimePicker || mode[0] === 'time',
+      enablePrev: true,
+      enableNext: !isClosestMonths || this.isMonthYearPanelShow(mode[1]),
+      clearIcon,
+      onInputChange: this.onStartInputChange,
+      onInputSelect: this.onStartInputSelect,
+      onValueChange: this.onStartValueChange,
+      onPanelChange: this.onStartPanelChange,
+    };
+    const rightPartProps = {
+      ...baseProps,
+      ...newProps,
+      hoverValue: sHoverValue,
+      direction: 'right',
+      format: this.getFormat(),
+      timePickerDisabledTime: this.getEndDisableTime(),
+      placeholder: placeholder2,
+      value: endValue,
+      mode: mode[1],
+      showDateInput: this.showDateInput,
+      timePicker,
+      showTimePicker: sShowTimePicker || mode[1] === 'time',
+      disabledTime: this.disabledEndTime,
+      disabledMonth: this.disabledEndMonth,
+      enablePrev: !isClosestMonths || this.isMonthYearPanelShow(mode[0]),
+      enableNext: true,
+      clearIcon,
+      onInputChange: this.onEndInputChange,
+      onInputSelect: this.onEndInputSelect,
+      onValueChange: this.onEndValueChange,
+      onPanelChange: this.onEndPanelChange,
+    };
    let TodayButtonNode = null;
    if (showToday) {
-      const todayButtonProps = mergeProps(baseProps, {
-        props: {
-          disabled: isTodayInView,
-          value: sValue[0],
-          text: locale.backToToday,
-        },
-        on: {
-          today: this.onToday,
-        },
-      });
+      const todayButtonProps = {
+        ...baseProps,
+        disabled: isTodayInView,
+        value: sValue[0],
+        text: locale.backToToday,
+        onToday: this.onToday,
+      };
      TodayButtonNode = <TodayButton key="todayButton" {...todayButtonProps} />;
    }

    let TimePickerButtonNode = null;
    if (props.timePicker) {
-      const timePickerButtonProps = mergeProps(baseProps, {
-        props: {
-          showTimePicker: sShowTimePicker || (mode[0] === 'time' && mode[1] === 'time'),
-          timePickerDisabled: !this.hasSelectedValue() || sHoverValue.length,
-        },
-        on: {
-          openTimePicker: this.onOpenTimePicker,
-          closeTimePicker: this.onCloseTimePicker,
-        },
-      });
+      const timePickerButtonProps = {
+        ...baseProps,
+        showTimePicker: sShowTimePicker || (mode[0] === 'time' && mode[1] === 'time'),
+        timePickerDisabled: !this.hasSelectedValue() || sHoverValue.length,
+        onOpenTimePicker: this.onOpenTimePicker,
+        onCloseTimePicker: this.onCloseTimePicker,
+      };
      TimePickerButtonNode = <TimePickerButton key="timePickerButton" {...timePickerButtonProps} />;
    }

    let OkButtonNode = null;
    if (showOkButton) {
-      const okButtonProps = mergeProps(baseProps, {
-        props: {
-          okDisabled:
-            !this.isAllowedDateAndTime(sSelectedValue) ||
-            !this.hasSelectedValue() ||
-            sHoverValue.length,
-        },
-        on: {
-          ok: this.onOk,
-        },
-      });
+      const okButtonProps = {
+        ...baseProps,
+        okDisabled:
+          !this.isAllowedDateAndTime(sSelectedValue) ||
+          !this.hasSelectedValue() ||
+          sHoverValue.length,
+        onOk: this.onOk,
+      };
      OkButtonNode = <OkButton key="okButtonNode" {...okButtonProps} />;
    }
    const extraFooter = this.renderFooter(mode);
--- a/components/vc-calendar/src/date/DateTable.jsx
+++ b/components/vc-calendar/src/date/DateTable.jsx
@ -4,7 +4,7 @@ import DateTBody from './DateTBody';
 const DateTable = (_, { attrs }) => {
  const prefixCls = attrs.prefixCls;
  return (
-    <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+    <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
      <DateTHead {...attrs} />
      <DateTBody {...attrs} />
    </table>
--- a/components/vc-calendar/src/decade/DecadePanel.jsx
+++ b/components/vc-calendar/src/decade/DecadePanel.jsx
@ -122,7 +122,7 @@ export default {
          />
        </div>
        <div class={`${prefixCls}-body`}>
-          <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+          <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
            <tbody class={`${prefixCls}-tbody`}>{decadesEls}</tbody>
          </table>
        </div>
--- a/components/vc-calendar/src/month/MonthPanel.jsx
+++ b/components/vc-calendar/src/month/MonthPanel.jsx
@ -11,6 +11,7 @@ function noop() {}

 const MonthPanel = {
  name: 'MonthPanel',
+  inheritAttrs: false,
  mixins: [BaseMixin],
  props: {
    value: PropTypes.any,
--- a/components/vc-calendar/src/month/MonthTable.jsx
+++ b/components/vc-calendar/src/month/MonthTable.jsx
@ -9,6 +9,7 @@ function noop() {}

 const MonthTable = {
  name: 'MonthTable',
+  inheritAttrs: false,
  mixins: [BaseMixin],
  props: {
    cellRender: PropTypes.func,
@ -122,7 +123,7 @@ const MonthTable = {
    });

    return (
-      <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+      <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
        <tbody class={`${prefixCls}-tbody`}>{monthsEls}</tbody>
      </table>
    );
--- a/components/vc-calendar/src/range-calendar/CalendarPart.jsx
+++ b/components/vc-calendar/src/range-calendar/CalendarPart.jsx
@ -1,6 +1,6 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { getOptionProps, getComponent, getListeners } from '../../../_util/props-util';
+import { getOptionProps, getComponent } from '../../../_util/props-util';
 import { cloneElement } from '../../../_util/vnode';
 import CalendarHeader from '../calendar/CalendarHeader';
 import DateTable from '../date/DateTable';
@ -8,6 +8,8 @@ import DateInput from '../date/DateInput';
 import { getTimeConfig } from '../util/index';
 function noop() {}
 const CalendarPart = {
+  name: 'CalendarPart',
+  inheritAttrs: false,
  mixins: [BaseMixin],
  props: {
    prefixCls: PropTypes.string,
@ -64,13 +66,13 @@ const CalendarPart = {
    } = props;
    const clearIcon = getComponent(this, 'clearIcon');
    const {
-      inputChange = noop,
-      inputSelect = noop,
-      valueChange = noop,
-      panelChange = noop,
-      select = noop,
-      dayHover = noop,
-    } = getListeners(this);
+      onInputChange = noop,
+      onInputSelect = noop,
+      onValueChange = noop,
+      onPanelChange = noop,
+      onSelect = noop,
+      onDayHover = noop,
+    } = this.$attrs;
    const shouldShowTimePicker = showTimePicker && timePicker;
    const disabledTimeConfig =
      shouldShowTimePicker && disabledTime ? getTimeConfig(selectedValue, disabledTime) : null;
@ -86,19 +88,15 @@ const CalendarPart = {
    if (shouldShowTimePicker) {
      const timePickerProps = getOptionProps(timePicker);
      timePickerEle = cloneElement(timePicker, {
-        props: {
-          showHour: true,
-          showMinute: true,
-          showSecond: true,
-          ...timePickerProps,
-          ...disabledTimeConfig,
-          ...timePickerDisabledTime,
-          defaultOpenValue: value,
-          value: selectedValue[index],
-        },
-        on: {
-          change: inputChange,
-        },
+        showHour: true,
+        showMinute: true,
+        showSecond: true,
+        ...timePickerProps,
+        ...disabledTimeConfig,
+        ...timePickerDisabledTime,
+        defaultOpenValue: value,
+        value: selectedValue[index],
+        onChange: onInputChange,
      });
    }

@ -114,39 +112,31 @@ const CalendarPart = {
        value={value}
        showClear={showClear || false}
        selectedValue={selectedValue[index]}
-        onChange={inputChange}
-        onSelect={inputSelect}
+        onChange={onInputChange}
+        onSelect={onInputSelect}
        clearIcon={clearIcon}
        inputMode={inputMode}
        inputReadOnly={inputReadOnly}
      />
    );
    const headerProps = {
-      props: {
-        ...newProps,
-        mode,
-        enableNext,
-        enablePrev,
-        disabledMonth,
-      },
-      on: {
-        valueChange,
-        panelChange,
-      },
+      ...newProps,
+      mode,
+      enableNext,
+      enablePrev,
+      disabledMonth,
+      onValueChange,
+      onPanelChange,
    };
    const tableProps = {
-      props: {
-        ...newProps,
-        hoverValue,
-        selectedValue,
-        dateRender,
-        disabledDate,
-        showWeekNumber,
-      },
-      on: {
-        select,
-        dayHover,
-      },
+      ...newProps,
+      hoverValue,
+      selectedValue,
+      dateRender,
+      disabledDate,
+      showWeekNumber,
+      onSelect,
+      onDayHover,
    };
    return (
      <div class={`${rangeClassName}-part ${rangeClassName}-${direction}`}>
--- a/components/vc-calendar/src/year/YearPanel.jsx
+++ b/components/vc-calendar/src/year/YearPanel.jsx
@ -1,6 +1,5 @@
 import PropTypes from '../../../_util/vue-types';
 import BaseMixin from '../../../_util/BaseMixin';
-import { getListeners } from '../../../_util/props-util';
 const ROW = 4;
 const COL = 3;
 function noop() {}
@ -21,7 +20,9 @@ function chooseYear(year) {
 }

 export default {
+  name: 'YearPanel',
  mixins: [BaseMixin],
+  inheritAttrs: false,
  props: {
    rootPrefixCls: PropTypes.string,
    value: PropTypes.object,
@ -68,7 +69,7 @@ export default {

  render() {
    const { sValue: value, locale, renderFooter } = this;
-    const decadePanelShow = getListeners(this).decadePanelShow || noop;
+    const onDecadePanelShow = this.$attrs.onDecadePanelShow || noop;
    const years = this.years();
    const currentYear = value.year();
    const startYear = parseInt(currentYear / 10, 10) * 10;
@ -123,7 +124,7 @@ export default {
            <a
              class={`${prefixCls}-decade-select`}
              role="button"
-              onClick={decadePanelShow}
+              onClick={onDecadePanelShow}
              title={locale.decadeSelect}
            >
              <span class={`${prefixCls}-decade-select-content`}>
@ -140,7 +141,7 @@ export default {
            />
          </div>
          <div class={`${prefixCls}-body`}>
-            <table class={`${prefixCls}-table`} cellSpacing="0" role="grid">
+            <table class={`${prefixCls}-table`} cellspacing="0" role="grid">
              <tbody class={`${prefixCls}-tbody`}>{yeasEls}</tbody>
            </table>
          </div>