feat: update drawer

antdv-demo

@@ -1 +1 @@
-Subproject commit f3b049411f17e556d8795f40d41bfadb471ae630
+Subproject commit adbfcd30aeb6c125defa35102ed659f1be03c672

components/_util/props-util.js

@@ -122,7 +122,16 @@ const getOptionProps = instance => {
   const { $props = {} } = instance;
   return filterProps($props);
 };
-
+const getComponent = (instance, prop, options = instance, execute = true) => {
+  const temp = instance[prop];
+  if (temp !== undefined) {
+    return typeof temp === 'function' && execute ? temp(options) : temp;
+  } else {
+    let com = instance.$slots[prop] || null;
+    com = execute && com ? com(options) : com;
+    return Array.isArray(com) && com.length === 1 ? com[0] : com;
+  }
+};
 const getComponentFromProp = (instance, prop, options = instance, execute = true) => {
   if (instance.$createElement) {
     const h = instance.$createElement;
@@ -218,6 +227,9 @@ export function getEvents(child) {
   // }
   // return { ...events };
 }
+export function getEvent(child, event) {
+  return child.props && child.props[event];
+}
 
 // 获取 xxx.native 或者 原生标签 事件
 export function getDataEvents(child) {
@@ -338,6 +350,7 @@ export {
   hasProp,
   filterProps,
   getOptionProps,
+  getComponent,
   getComponentFromProp,
   getSlotOptions,
   slotHasProp,

components/config-provider/index.jsx

@@ -2,7 +2,6 @@ import { reactive, provide } from 'vue';
 import PropTypes from '../_util/vue-types';
 import { getComponentFromProp } from '../_util/props-util';
 import defaultRenderEmpty from './renderEmpty';
-import Base from '../base';
 import LocaleProvider, { ANT_MARK } from '../locale-provider';
 import LocaleReceiver from '../locale-provider/LocaleReceiver';
 
@@ -85,9 +84,8 @@ export const ConfigConsumerProps = {
 };
 
 /* istanbul ignore next */
-ConfigProvider.install = function(Vue) {
-  Vue.use(Base);
-  Vue.component(ConfigProvider.name, ConfigProvider);
+ConfigProvider.install = function(app) {
+  app.component(ConfigProvider.name, ConfigProvider);
 };
 
 export default ConfigProvider;

components/drawer/index.jsx

@@ -5,12 +5,12 @@ import VcDrawer from '../vc-drawer/src';
 import PropTypes from '../_util/vue-types';
 import BaseMixin from '../_util/BaseMixin';
 import CloseOutlined from '@ant-design/icons-vue/CloseOutlined';
-import { getComponentFromProp, getOptionProps, getListeners } from '../_util/props-util';
+import { getComponent, getOptionProps } from '../_util/props-util';
 import { ConfigConsumerProps } from '../config-provider';
-import Base from '../base';
 
 const Drawer = {
   name: 'ADrawer',
+  inheritAttrs: false,
   props: {
     closable: PropTypes.bool.def(true),
     destroyOnClose: PropTypes.bool,
@@ -145,9 +145,7 @@ const Drawer = {
     },
     renderHeader(prefixCls) {
       const { closable, headerStyle } = this.$props;
-      // TODO
-      // const title = getComponentFromProp(this, 'title');
-      const title = null;
+      const title = getComponent(this, 'title');
       if (!title && !closable) {
         return null;
       }
@@ -220,13 +218,12 @@ const Drawer = {
     } else {
       offsetStyle.height = typeof height === 'number' ? `${height}px` : height;
     }
-    // TODO
-    // const handler = getComponentFromProp(this, 'handle') || false;
-    const handler = false;
+    const handler = getComponent(this, 'handle') || false;
     const getPrefixCls = this.configProvider.getPrefixCls;
     const prefixCls = getPrefixCls('drawer', customizePrefixCls);
 
     const vcDrawerProps = {
+      ...this.$attrs,
       ...omit(rest, [
         'closable',
         'destroyOnClose',
@@ -256,22 +253,12 @@ const Drawer = {
       }),
       wrapStyle: this.getRcDrawerStyle(),
     };
-    return (
-      <VcDrawer
-        {...vcDrawerProps}
-        on={{
-          ...getListeners(this), //TODO
-        }}
-      >
-        {this.renderBody(prefixCls)}
-      </VcDrawer>
-    );
+    return <VcDrawer {...vcDrawerProps}>{this.renderBody(prefixCls)}</VcDrawer>;
   },
 };
 
 /* istanbul ignore next */
 Drawer.install = function(app) {
-  app.use(Base);
   app.component(Drawer.name, Drawer);
 };
 

components/vc-drawer/src/Drawer.js

@@ -2,8 +2,7 @@ import classnames from 'classnames';
 import { cloneVNode, withDirectives, Teleport, nextTick } from 'vue';
 import antRef from '../../_util/ant-ref';
 import BaseMixin from '../../_util/BaseMixin';
-import { initDefaultProps, getEvents, getListeners, getSlot } from '../../_util/props-util';
-// import { cloneElement } from '../../_util/vnode';
+import { initDefaultProps, getSlot } from '../../_util/props-util';
 import getScrollBarSize from '../../_util/getScrollBarSize';
 import { IDrawerProps } from './IDrawerPropTypes';
 import KeyCode from '../../_util/KeyCode';
@@ -16,7 +15,6 @@ import {
   transformArguments,
   isNumeric,
 } from './utils';
-// import Portal from '../../_util/Portal';
 
 function noop() {}
 
@@ -27,9 +25,10 @@ const windowIsUndefined = !(
   window.document.createElement
 );
 
-// Vue.use(ref, { name: 'ant-ref' });
 const Drawer = {
+  name: 'Drawer',
   mixins: [BaseMixin],
+  inheritAttrs: false,
   directives: { 'ant-ref': antRef },
   props: initDefaultProps(IDrawerProps, {
     prefixCls: 'drawer',
@@ -63,6 +62,9 @@ const Drawer = {
     this.preProps = { ...this.$props };
     return {
       sOpen: open,
+      isOpenChange: undefined,
+      passive: undefined,
+      container: undefined,
     };
   },
   mounted() {
@@ -363,11 +365,9 @@ const Drawer = {
           }
         }
       }
-      // TODO
-      // const { change } = getListeners(this);
-      const change = false;
-      if (change && this.isOpenChange && this.sFirstEnter) {
-        change(open);
+      const { onChange } = this.$attrs;
+      if (onChange && this.isOpenChange && this.sFirstEnter) {
+        onChange(open);
         this.isOpenChange = false;
       }
     },
@@ -385,12 +385,14 @@ const Drawer = {
         keyboard,
         maskClosable,
       } = this.$props;
+      const { class: cls, style } = this.$attrs;
       const children = getSlot(this);
       const wrapperClassname = classnames(prefixCls, {
         [`${prefixCls}-${placement}`]: true,
         [`${prefixCls}-open`]: open,
         [className]: !!className,
         'no-mask': !showMask,
+        [cls]: true,
       });
       const isOpenChange = this.isOpenChange;
       const isHorizontal = placement === 'left' || placement === 'right';
@@ -409,13 +411,13 @@ const Drawer = {
       let handlerChildren;
       if (handler !== false) {
         const handlerDefalut = (
-          <div class="drawer-handle">
+          <div class="drawer-handle" onClick={() => {}}>
             <i class="drawer-handle-icon" />
           </div>
         );
         const { handler: handlerSlot } = this;
         const handlerSlotVnode = handlerSlot || handlerDefalut;
-        const { onclick: handleIconClick } = getEvents(handlerSlotVnode);
+        const handleIconClick = handlerSlotVnode.props && handlerSlotVnode.props.onClick;
         handlerChildren = withDirectives(
           cloneVNode(handlerSlotVnode, {
             onClick: e => {
@@ -445,7 +447,7 @@ const Drawer = {
         // ],
         onTransitionend: this.onWrapperTransitionEnd,
         onKeydown: open && keyboard ? this.onKeyDown : noop,
-        style: wrapStyle,
+        style: { ...wrapStyle, ...style },
       };
       // const directivesMaskDom = [
       //   {

examples/App.vue

@@ -1,14 +1,24 @@
 <template>
   <div>
-    <a-button type="primary" @click="showDrawer">Open</a-button>
+    <a-button type="primary" @click="showDrawer">
+      Open
+    </a-button>
     <a-drawer
       title="Multi-level drawer"
       width="520"
       :closable="false"
       :visible="visible"
+      style="color: red"
       @close="onClose"
     >
-      <a-button type="primary" @click="showChildrenDrawer">Two-level drawer</a-button>
+      <template v-slot:handle>
+        <a-button @click="() => {}">
+          hahah
+        </a-button>
+      </template>
+      <a-button type="primary" @click="showChildrenDrawer">
+        Two-level drawer
+      </a-button>
       <a-drawer
         title="Two-level Drawer"
         width="320"
@@ -16,7 +26,9 @@
         :visible="childrenDrawer"
         @close="onChildrenDrawerClose"
       >
-        <a-button type="primary" @click="showChildrenDrawer">This is two-level drawer</a-button>
+        <a-button type="primary" @click="showChildrenDrawer">
+          This is two-level drawer
+        </a-button>
       </a-drawer>
       <div
         :style="{
@@ -32,8 +44,12 @@
           boxSizing: 'border-box',
         }"
       >
-        <a-button style="marginRight: 8px" @click="onClose">Cancel</a-button>
-        <a-button type="primary" @click="onClose">Submit</a-button>
+        <a-button style="marginRight: 8px" @click="onClose">
+          Cancel
+        </a-button>
+        <a-button type="primary" @click="onClose">
+          Submit
+        </a-button>
       </div>
     </a-drawer>
   </div>