feat: update inputnumber

Author: tangjinzhou

antdv-demo

@@ -1,11 +1,11 @@
+import { inject } from 'vue';
 import PropTypes from '../_util/vue-types';
-import { initDefaultProps, getOptionProps, getListeners } from '../_util/props-util';
+import { initDefaultProps, getOptionProps } from '../_util/props-util';
 import classNames from 'classnames';
 import UpOutlined from '@ant-design/icons-vue/UpOutlined';
 import DownOutlined from '@ant-design/icons-vue/DownOutlined';
 import VcInputNumber from '../vc-input-number/src';
 import { ConfigConsumerProps } from '../config-provider';
-import Base from '../base';
 
 export const InputNumberProps = {
   prefixCls: PropTypes.string,
@@ -29,56 +29,59 @@ export const InputNumberProps = {
 
 const InputNumber = {
   name: 'AInputNumber',
-  model: {
-    prop: 'value',
-    event: 'change',
-  },
+  inheritAttrs: false,
   props: initDefaultProps(InputNumberProps, {
     step: 1,
   }),
-  inject: {
-    configProvider: { default: () => ConfigConsumerProps },
+  setup() {
+    return {
+      configProvider: inject('configProvider', ConfigConsumerProps),
+    };
   },
   methods: {
+    saveInputNumber(inputNumberRef) {
+      this.inputNumberRef = inputNumberRef;
+    },
     focus() {
-      this.$refs.inputNumberRef.focus();
+      this.inputNumberRef.focus();
     },
     blur() {
-      this.$refs.inputNumberRef.blur();
+      this.inputNumberRef.blur();
     },
   },
 
   render() {
-    const { prefixCls: customizePrefixCls, size, ...others } = getOptionProps(this);
+    const { prefixCls: customizePrefixCls, size, class: className, ...others } = {
+      ...getOptionProps(this),
+      ...this.$attrs,
+    };
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('input-number', customizePrefixCls);
 
-    const inputNumberClass = classNames({
-      [`${prefixCls}-lg`]: size === 'large',
-      [`${prefixCls}-sm`]: size === 'small',
-    });
+    const inputNumberClass = classNames(
+      {
+        [`${prefixCls}-lg`]: size === 'large',
+        [`${prefixCls}-sm`]: size === 'small',
+      },
+      className,
+    );
     const upIcon = <UpOutlined class={`${prefixCls}-handler-up-inner`} />;
     const downIcon = <DownOutlined class={`${prefixCls}-handler-down-inner`} />;
 
     const vcInputNumberprops = {
-      props: {
-        prefixCls,
-        upHandler: upIcon,
-        downHandler: downIcon,
-        ...others,
-      },
+      prefixCls,
+      upHandler: upIcon,
+      downHandler: downIcon,
+      ...others,
       class: inputNumberClass,
-      ref: 'inputNumberRef',
-      on: getListeners(this),
     };
-    return <VcInputNumber {...vcInputNumberprops} />;
+    return <VcInputNumber {...vcInputNumberprops} ref={this.saveInputNumber} />;
   },
 };
 
 /* istanbul ignore next */
-InputNumber.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(InputNumber.name, InputNumber);
+InputNumber.install = function(app) {
+  app.component(InputNumber.name, InputNumber);
 };
 
 export default InputNumber;

components/input-number/index.jsx

@@ -1,25 +1,23 @@
 import PropTypes from '../../_util/vue-types';
 import Touchable from '../../vc-m-feedback';
-import { getListeners } from '../../_util/props-util';
+import { getSlot } from '../../_util/props-util';
 
 const InputHandler = {
   name: 'InputHandler',
+  inheritAttrs: false,
   props: {
     prefixCls: PropTypes.string,
     disabled: PropTypes.bool,
   },
   render() {
     const { prefixCls, disabled } = this.$props;
     const touchableProps = {
-      props: {
-        disabled,
-        activeClassName: `${prefixCls}-handler-active`,
-      },
-      on: getListeners(this),
+      disabled,
+      activeClassName: `${prefixCls}-handler-active`,
     };
     return (
       <Touchable {...touchableProps}>
-        <span>{this.$slots.default}</span>
+        <span {...this.$attrs}>{getSlot(this)}</span>
       </Touchable>
     );
   },